loading image during ajax process not working properly

[EHTISHAM]

loading image during ajax process not working properly:

 

my code smthing like this...

 

div to show content and loading image-

<div id="adS" style="float: left; width: 70%">
    <div id="loading-image" style="background-image: url('images/processing.gif'); display: none;">


    </div>
</div>

jquery code-

$(function() {


        $("#lets_search").bind('submit',function() {
          var gen = $("input[name='radGen']:checked").val();
          var mt = $('#selMtQ').val();
          var agf = $('#agf').val();
          var agt = $('#agt').val();
          var rel = $('#religQ').val();
          var cast = $('#selCstQ').val();
          $('#loading-image').show();
           $.post('adSearch.php',{gen:gen,mt:mt,agf:agf,agt:agt,rel:rel,cast:cast}, function(data){
             $("#adS").html(data);
             $('#loading-image').hide();
           });
           return false;
        });
      });

The loading image show only one time on click event.. not every time when i click search li...

 

Need help...

[hansford]

I don't see the html associated with the jQuery which would be helpful. Anyways...

'bind' is not the preferred method for attaching events, it's 'on'. You attach the submit event on the form, not a button and there is a shortcut for doing that.

$("#id-of-form").submit(function(e) {
	
	//stop the default form submission
	e.preventDefault();

	//....rest of the code
});

If your ajax returns fast then you might miss the loading image as it did not have enough time to load before being hid again.

Don't hide the loading image and see if it displays. If it does, then you know it's working and the ajax speed is the issue. 

Edited October 2, 2015 by hansford

[scootstah]

Works here: http://jsfiddle.net/pqart7tk/