14 Replies - 786 Views - Last Post: 23 March 2013 - 01:49 AM

#1 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 11
  • View blog
  • Posts: 763
  • Joined: 31-August 11

Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 02:39 PM

So in my online application I have a database of stuff and I am using jquery.post to show the user if what they're entering is already in our database. I'm using events attached to them typing in the boxes. The problem is that it costs and SQL query everytime the user even presses a key.

IS there any way to add a delay to this? If I use something like setTimeout won't that still call the post everytime the user presses a key anyway but just delay it? What can you do about this problem?

Thanks guys

Is This A Good Question/Topic? 0
  • +

Replies To: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

#2 Koyume  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 89
  • Joined: 19-February 13

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 02:45 PM

You can use a setInterval() function to be able to do this.
Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,543
  • Joined: 12-December 12

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 03:02 PM

You can use the jQuery debounce plug-in. The example at this link uses keyup , so is directly relevant to your post.

This post has been edited by andrewsw: 22 March 2013 - 03:04 PM

Was This Post Helpful? 1
  • +
  • -

#4 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 11
  • View blog
  • Posts: 763
  • Joined: 31-August 11

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 03:06 PM

I'd like to try and "not" use other plugins for jquery if I don't have too though it's something I will consider. To the other answer the setInterval correct me if I'm wrong wouldn't help if the event is fired everytime a key is pressed for instance and the user presses they key 25 times which sets off a function for jquery.post while there will be a delay (sort) of between the post requests it will still fire 50 times.

What you need is a window of time where that even basically dies and won't fire or if it does fire it won't call post and then it will jquery post again
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,543
  • Joined: 12-December 12

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 03:14 PM

View PostKoyume, on 22 March 2013 - 09:45 PM, said:

You can use a setInterval() function to be able to do this.

It may be possible to use setInterval() but I suspect setTimeout() might be easier (or the debounce plug-in that I referenced).

That is, when a key is pressed set a timeout, clearing any existing timeout. In the timeout, submit the request using the currently available characters. But I haven't explored, or tested this, in any detail. I would also check if there are no characters, again cancelling any existing timeout.

The key to getting this to work is to keep cancelling the existing timeout; that is, if it hasn't already been actioned then replace it with the new timeout/delay.

This post has been edited by andrewsw: 22 March 2013 - 03:16 PM

Was This Post Helpful? 1
  • +
  • -

#6 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,543
  • Joined: 12-December 12

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 03:31 PM

Here's an example:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script type="text/javascript">
        var theTimer;
        function updateDiv() {
            var theText = document.getElementById("textEntry").value;
            if (!theText) {
                document.getElementById("divOutput").innerHTML = "Nothing";
            } else {
                document.getElementById("divOutput").innerHTML = theText;
            }
        }
        function submitChars() {
            if (theTimer) {
                window.clearTimeout(theTimer);
            }
            theTimer = window.setTimeout(updateDiv, 1000);
        }
    </script>
</head>

<body>
<input type="text" id="textEntry" onkeyup="submitChars();">
<div id="divOutput"></div>

</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#7 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6107
  • View blog
  • Posts: 23,663
  • Joined: 23-August 08

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 03:36 PM

Quote

I'd like to try and "not" use other plugins for jquery


This is folly. Never try to reinvent the wheel if at all possible.
Was This Post Helpful? 1
  • +
  • -

#8 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,543
  • Joined: 12-December 12

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 03:37 PM

It would be possible also, to store the text/data that was most recently posted in a variable and, if the request that is about to be made uses the same data, then don't make the request.
Was This Post Helpful? 1
  • +
  • -

#9 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,543
  • Joined: 12-December 12

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 03:52 PM

Like this:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script type="text/javascript">
        var theTimer;
        function updateDiv() {
            var theText = document.getElementById("textEntry").value;
            var divOutput = document.getElementById("divOutput"),
                divErrors = document.getElementById("divErrors");
            if (!theText) {
                divOutput.innerHTML = "Nothing";
                divErrors.innerHTML = "";
            } else if (divOutput.previous && divOutput.previous == theText) {
                divErrors.innerHTML = "Already submitted..";
                
            } else {
                divErrors.innerHTML = "";
                divOutput.innerHTML = theText;
                divOutput.previous = theText;
            }
        }
        function submitChars() {
            if (theTimer) {
                window.clearTimeout(theTimer);
            }
            theTimer = window.setTimeout(updateDiv, 1000);
        }
    </script>
</head>

<body>
<input type="text" id="textEntry" onkeyup="submitChars();">
<div id="divOutput">Output here</div>
<div id="divErrors">Errors here</div>
</body>
</html>



Sorry, my examples use vanilla JS rather than jQuery - I forgot about jQuery :)
Was This Post Helpful? 1
  • +
  • -

#10 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,543
  • Joined: 12-December 12

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 04:15 PM

Using jQuery:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        var theTimer;
        function updateDiv() {
            var theText = $("#textEntry").val();
            var divOutput = $("#divOutput"),
                divErrors = $("#divErrors");
            if (!theText) {
                divOutput.text("Nothing");
                divErrors.text("");
            } else if (divOutput.data('previous') && divOutput.data('previous') == theText) {
                divErrors.text("Already submitted..");
                
            } else {
                divErrors.text("");
                divOutput.text(theText);
                divOutput.data('previous', theText);
            }
        }
        function submitChars() {
            if (theTimer) {
                window.clearTimeout(theTimer);
            }
            theTimer = window.setTimeout(updateDiv, 1000);
        }
        $(function () {
            $("#textEntry").on('keyup', submitChars);
        });
    </script>
</head>

<body>
<input type="text" id="textEntry">
<div id="divOutput">Output here</div>
<div id="divErrors">Errors here</div>
</body>
</html>



View PostJackOfAllTrades, on 22 March 2013 - 10:36 PM, said:

Quote

I'd like to try and "not" use other plugins for jquery


This is folly. Never try to reinvent the wheel if at all possible.

I certainly agree with this in principle. In particular, if the jQuery framework is already attached then use it as much as possible. However, if something can be achieved with a few lines of code, then I would prefer not to attach a further plug-in.
Was This Post Helpful? 1
  • +
  • -

#11 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 11
  • View blog
  • Posts: 763
  • Joined: 31-August 11

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 04:42 PM

Andrewsw I agree and I really appreciate your help. I tried the timeout method and it doesn't work in terms of someone just pressing the key over and over again like the timeout isn't working or something. I don't really understand why myself but I'm almost certain I coded it right.
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,543
  • Joined: 12-December 12

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 05:02 PM

Check your browser's console for error messages. If you don't know how to use the console refer to the link(s) in my signature. "almost certain" lacks certainty :dontgetit:

View Postadn258, on 22 March 2013 - 11:42 PM, said:

Andrewsw I agree and I really appreciate your help. I tried the timeout method and it doesn't work in terms of someone just pressing the key over and over again like the timeout isn't working or something. I don't really understand why myself but I'm almost certain I coded it right.

..if you just keep typing keys then, yes, the timeout will keep being cancelled. The timeout won't happen unless the timeout-interval passes (without another key being pressed).
Was This Post Helpful? 0
  • +
  • -

#13 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 11
  • View blog
  • Posts: 763
  • Joined: 31-August 11

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 22 March 2013 - 05:22 PM

View Postandrewsw, on 22 March 2013 - 05:02 PM, said:

Check your browser's console for error messages. If you don't know how to use the console refer to the link(s) in my signature. "almost certain" lacks certainty :dontgetit:/>

View Postadn258, on 22 March 2013 - 11:42 PM, said:

Andrewsw I agree and I really appreciate your help. I tried the timeout method and it doesn't work in terms of someone just pressing the key over and over again like the timeout isn't working or something. I don't really understand why myself but I'm almost certain I coded it right.

..if you just keep typing keys then, yes, the timeout will keep being cancelled. The timeout won't happen unless the timeout-interval passes (without another key being pressed).


Right I will check that but that's not what's happening. What's happening is the function keeps getting called thereby submitting the jquery post instead of the timeout getting cancelled as we want.
Was This Post Helpful? 0
  • +
  • -

#14 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 11
  • View blog
  • Posts: 763
  • Joined: 31-August 11

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 23 March 2013 - 01:30 AM

It doesn't matter too much though because I used that plugin and that seems to work for what I need. I do really like that plugin actually as I think it's the most direct way of solving my problem at this point.
Was This Post Helpful? 0
  • +
  • -

#15 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3822
  • View blog
  • Posts: 13,543
  • Joined: 12-December 12

Re: Keeping Jquery.post From Being Called Over And Over Again DOS Style?

Posted 23 March 2013 - 01:49 AM

View Postadn258, on 23 March 2013 - 08:30 AM, said:

It doesn't matter too much though because I used that plugin and that seems to work for what I need. I do really like that plugin actually as I think it's the most direct way of solving my problem at this point.

I'm glad you have resolved it, although I am curious why your previous code-version didn't work, as my sample appears to work well. Perhaps you could post some of that code?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1