CODEWITHSUNDEEP
jqueryajax
Alex
Alex

Reputation: 283

jQuery .load content then .toggle it without ajax requests

I have a button. When I click on it content loads. When I click on it after content toggles (display: none). But it still sending ajax requests.

How to check If the content was loaded to start toggling without ajax requests?

<div id="morechan">
    <a id="btnC" href="#" title="Kanalu saraksts"><i class="icon-caret-down"></i></a>
</div>
<div id="channel-list">
</div><!-- end channel-list -->

(function($) {
  $("#btnC").click(function() {
    $('#channel-list').html('loading...').load('channels.html');
  }); 
})(jQuery);

Upvotes: 1

Views: 812

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

I would suggest setting a data attribute and testing for it and prevent load if it is not set

$("#btnC").click(function() {
   if( typeof( $('#channel-list').data("contentLoaded") ) != "undefined" ) {
       //Do toggle code here.
       return;
   } else {
       //Do load code here.
       $('#channel-list').load("http://www.someurl.com",function() {
          $(this).data("contentLoaded",true);
       });
   }
});

Set contentLoaded to false when/if needing to reload content and check to see if its true or false in the click event.

var contentLoaded = $('#channel-list').data("contentLoaded");
if( typeof( contentLoaded ) != "undefined" && contentLoaded ) {
   //Do toggle code here.
   return;
}

Upvotes: 3

Related Questions