Jump to content

Only load Ajax function once and delay text being shown.


NetGuru87

Recommended Posts

Hi everyone,

 

So I am implementing som Ajax on my site: http://www.xn--billig-bredbnd-wib.nu/

 

What I am trying to do is to a a small table when page loads, and when someone chooses "Hastighed" it will load the entire tabel in order to sort alle results.

 

I have used this tutorial to load the full mysql datatabel using Ajax Onclick: http://www.phpgang.com/fetch-data-from-xml-json-mysqli-using-jquery-ajax-php_733.html (under "Fetching Data from MySQL Database using Ajax" )

 

code:

function fetchfromMysqlDatabase() {
                  $.ajax({
                    type: "GET",
                    dataType: "html",
                    url: "getrecords.php",
                    cache: false,
                    beforeSend: function() {
                       $('#res3').html('loading please wait...');
                    },
                    success: function(htmldata) {
                       $('#res3').html(htmldata);
                    }
                  });
                }

The HTML form:

<form class="form-inline" style="text-align:center" onClick="fetchfromMysqlDatabase();" >

The problem is that it loads evertime i click, which is making it impossible to use the filter function.

 

So my question is: How do i make this code only run once, when I click the form the first time?

Also - if i want to keep the "loading please wait..." for lets say 2 sec - what do I then need to do...

...Never worked with Ajax before so I am in deep waters!

 

 

Link to comment
Share on other sites

You could check the contents of $('#res3') and only run the AJAX call if it's empty. Or, set a variable (loaded = true, for instance) in the .success() function of the AJAX call and check that before you attempt to load the data again.

Link to comment
Share on other sites

Since you're already using jQuery, use a jQuery-style event handler and then de-register it after it runs.

 

$(function(){
    $('#form-name').on('click', function(){
        fetchFromLysqlDatabase();
        $(this).off('click');
    });
});
As per my example, you'll need to give your form an id (I used form-name), or modify the selector.
Link to comment
Share on other sites

Hi everyone,

 

First of all, thank you so much for you help already!

 

But, I am a total noob and I have no idea of what I am doing  :tease-03:

 

I tried the variable thing - could not get it to work. 

 

the script:

 

  $(function(){
  $('#form-name').on('click', function(){
  fetchFromLysqlDatabase();
  $(this).off('click');
  });
  });

Where exactly am I supposed to put it in the function above?

 

Thanks in advance!

 

Link to comment
Share on other sites

Hi Scootstah,

 

Yes i did. I put it in like so:

function fetchfromMysqlDatabase() {
                  $.ajax({
                    type: "GET",
                    dataType: "html",
                    url: "getrecords.php",
                    cache: false,
                    beforeSend: function() {
                       $('#res3').html('loading please wait...');
                    },
                    success: function(htmldata) {
                       $('#res3').html(htmldata);
                    }
                  });
$(function(){
$('#form-name').on('click', function(){
fetchFromLysqlDatabase();
$(this).off('click');
});
});
                }
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.