Using jQuery for ajax call once url is entered in input field

Question

I have a script that I wrote in PHP which scrapes data from a url.

Is it possible with jQuery to do an ajax call that, once a url is entered into an input field (There is a URL validation inside the script), it "Loads" until a successful url has been identified and the rest of the script can then run thus returning results once it is complete.

Below is an example of what I'm trying to describe:

enter image description here

What exactly should I look up to understand how to do this?

Thor Jacobsen · Accepted Answer · 2011-03-15 09:16:36Z

1

I'm not quite sure what you are trying to achieve? You could add an event handler for the "KeyUp" event on your input box, and then query your PHP script through AJAX on every KeyUp event, and just show some kind og "Loading" message until your script returns something useful.

answered Mar 15, 2011 at 9:16

Thor Jacobsen

8,9092 gold badges30 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bob_cobb Over a year ago

You nailed it. Thanks a bunch, I'm going to use Emmanuel's example above to play around with this. jQuery noob, but learning more every day. Thanks for telling me exactly what I should be looking for (event handling for the KeyUp event). +1 for "og 'Loading'" message. Ha.

Emmanuel · Accepted Answer · 2011-03-16 08:03:31Z

0

Javascript:

$(document).ready(function(){
    $('#search').keyUp(function(){
        var v = $(this).val(); // Value currently in search box

        if(v.length) $('#loader').show();
        else $('#loader').hide();

        var r = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/ // Regex Pattern
        if(r.test(v)) { // Yes, a valid url
            // Do your $.ajax({}); request here
        }
    });
});

HTML

<input type="text" name="search" id="search" />
<p id="loader">Loading...</p>

edited Mar 16, 2011 at 8:03

answered Mar 15, 2011 at 9:22

Emmanuel

5,4835 gold badges53 silver badges75 bronze badges

3 Comments

Emmanuel Over a year ago

@bob_cobb that's great I'm glad it'll help you. Remember to tick the answer you found most helpful.

bob_cobb Over a year ago

I'm playing with the code right now, and for some reason, when testing and I enter a valid url and put this in the if(r.test(s)) conditional $("#loading").html("text can include html code");, and it didn't load the text. Does that have to be inside of an $.ajax({}); request? I'm trying to understand how this works. Thanks.

Emmanuel Over a year ago

@bob_cobb Oops! my bad. It should be if(r.test(v))

sinni800 · Accepted Answer · 2011-03-15 09:21:22Z

0

First look up a) how to REGEX urls. There's URL Regexes. Google 'em! At the same time, look how REGEXing is done in JS.

b) Look up how you subscribe to input type="text" events the jQuery way. (ex: $.("#textbox1").bind('change', function(ev) {doTheFiltering();});. I can't look it up now, I am on a very slow connection)

Then, c) the jQuery.Get() command from jQuery. It shows you how you get html, json, whatever back.

answered Mar 15, 2011 at 9:21

sinni800

1,46914 silver badges30 bronze badges

Collectives™ on Stack Overflow

Using jQuery for ajax call once url is entered in input field

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related