Jquery toggle class on click -
i have following div,
<div id="mainoutput"> <img src="/img/preloader.gif" alt="loading" class="preloader" /> </div>
the beginning of ajax/jquery ,
$(document).ready(function() { $(".preloader").hide(); $("#button").click(function() { $(".preloader").slidetoggle( "slow" ); var host = $("#hostinput").val(); var record = $("#recordinput").val(); $.ajax({ url : "/cachecheck_ajax", type : "post", datatype: "json", data : { hostinput : host, recordinput : record, csrfmiddlewaretoken: '{{ csrf_token }}' }, success: function(json){ stuff... $(".preloader").slidetoggle( "slow" ); $('#mainoutput').html(table).hide().slidetoggle( "slow" );
all works fine. click submit, preloader shows, until ajax success kicks in, preloader toogled , main div (#mainoutput) shown.
however if want submit again want #mainoutput toggled (hidden) , preloader show again. best method ?
i did try following complete broke ajax , json returned,
$(document).ready(function() { $(".preloader").hide(); $("#button").click(function() { // addition if($('#mainoutput').is(':visible'));{ $("#mainoutput").slidetoggle( "slow" ).html(); } // $(".preloader").slidetoggle( "slow" ); var host = $("#hostinput").val(); var record = $("#recordinput").val(); $.ajax({
i use jquery.ajax's beforesend , complete callback methods. hope below code you!
$(document).ready(function() { var xhr = null; $(".preloader").hide(); $("#button").click(function() { var host = $("#hostinput").val(); var record = $("#recordinput").val(); if (xhr != null) { xhr.abort(); //abort existing xhr call $(".preloader").hide(); //by default hide element } //get referance in xhr variable xhr = $.ajax({ url : "/cachecheck_ajax", type : "post", datatype: "json", data : { hostinput : host, recordinput : record, csrfmiddlewaretoken: '{{ csrf_token }}' }, beforesend: function (jqxhr, settings) { $(".preloader").slidetoggle( "slow" ); //before sending server, show element }, success: function(json, textstatus, jqxhr) { //todo: stuff...!!! $('#mainoutput').html(table).hide().slidetoggle( "slow" ); }, error: function (jqxhr, textstatus, errorthrown) { //todo: handle errors here...!!! }, complete: function (jqxhr, textstatus) { //jquery delegate call after xhr. hide element $(".preloader").slidetoggle( "slow" ); } }); }); });
Comments
Post a Comment