Jump to content
NetGuru87

Only load Ajax function once and delay text being shown.

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!

 

 

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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!

 

Share this post


Link to post
Share on other sites

Did you give your form an ID, like so?

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

Share this post


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

Share this post


Link to post
Share on other sites

This function is spelled wrong - fetchFromLysqlDatabase();

Share this post


Link to post
Share on other sites

This function is spelled wrong - fetchFromLysqlDatabase();

Oops! Sorry. :P

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.