Only load Ajax function once and delay text being shown.

[NetGuru87]

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!

 

 

[NetGuru87]

I have looked at the one() function, but I am unsure how to implement it in this script...

[maxxd]

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.

[scootstah]

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.

[NetGuru87]

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 

 

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!

 

[scootstah]

Did you give your form an ID, like so?

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

[NetGuru87]

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');
});
});
                }

[NetGuru87]

I acuually sloved it now by using removeAttr("onClick");, but now my filter is not working... hmmm...

[fastsol]

This function is spelled wrong - fetchFromLysqlDatabase();

[scootstah]

This function is spelled wrong - fetchFromLysqlDatabase();

Oops! Sorry.

[Q695]

You could do a set interval.

[NetGuru87]

I guys,

 

Just wanted to let you know that I solved the issue using removeAttr("onClick"); and then I also changed a few things in the multifilter.js function.

 

Thank you very much for all your help!