CODEWITHSUNDEEP
jquery
JulianJ
JulianJ

Reputation: 1309

Why is my jquery loader not working?

I am trying to add a loading gif to some jquery script. I thought I might use this plugin which has worked before but I am trying to figure out why it is not firing when I submit a form. Have I got it in the correct place?

<script>
    $(document).ready(function() {
        $('#post_data').submit(function() {
//I've placed the plugin here
            $('#spinner').pleaseWait();
            $.ajax({
                url: 'process.php',
                type: 'POST',
                dataType: 'html',
                data: $(this).serialize(),
                success: function(newContent) {
                    $('#mytable').prepend('<tr>' + newContent + '</tr>');
                    $("form").trigger("reset");

                }
            });

            return false;
        });
    });

The div where I want it to appear.

<div class="center-block" id="spinner"></div>

Upvotes: 1

Views: 900

Answers (2)

Imbue
Imbue

Reputation: 429

Did a fiddle for you: https://jsfiddle.net/2Lazd0ez/

Inserted this line:

$('#post_data').submit(function(e) {
     e.preventDefault();
});

The reason being not using preventDefault() and actually submitting the form serverside, instead of through jQuery.

Upvotes: 1

AB Udhay
AB Udhay

Reputation: 753

Reasons :

Give some width height to spinner div. Try customize the spinner as given in the plug-in. Load scripts at end of body both jQuery after that loader plug-in. Just try with only spinner plug-in without ajax. Add beforesend property in ajax and in that method load the spinner and stop at ajax complete property 😉

Upvotes: 2

Related Questions