1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How To Switch From XMLHttpRequest to JQuery?

Discussion in 'jQuery' started by robertlef, Nov 23, 2015.

  1. #1
    I've got a working script (a chained Dropdown using PHP and MySql) that works fine using regular javascript and the XMLHttpRequest but am clueless trying to convert it to JQuery and don't seem to be getting any closer to a solution using tutorials and other examples.

    Here is a typical function in mine that is calling the above method - (i.e. the getXMLHTTP())

    function getCountry(continentId) {
    var strURL="findCountryWithCurl.php?continent="+continentId;
    var req = getXMLHTTP();
    if (req) {
    req.onreadystatechange = function() {
    if (req.readyState == 4) {
    // only if "OK"
    if (req.status == 200) {
    document.getElementById('countrydiv').innerHTML=req.responseText;
    document.getElementById('statediv').innerHTML='<select name="state">'+
    '<option>Select State</option>'+
    '</select>';
    } else {
    alert("Problem while using XMLHTTP:\n" + req.statusText);
    }
    }
    }
    req.open("GET", strURL, true);
    req.send(null);
    }
    }

    I think I see how everything comes back from the XMLHTTP function call as an array stored in the variable "req" (as an array). It looks like that function returns the one index being readyState and another being status.

    I don't know for sure if the other index in it (responseText) is instantly returned or if that is what the function is all about (i.e. waiting for the response) but, regardless, I think if I can get those three values back from JQuery (rather than the XMLHTTP method) I think I'll be able to continue from there.

    The above function is called from the HTML/PHP form with this (waiting for the onchange event) ...
    <select name="continent" onChange="getCountry(this.value)">

    ... and, so, I also need to change that to a JQuery functionality too right?
    Something like ...
    $(document).on('change', 'input', function() {
    // Does some stuff and logs the event to the console
    getCountry(this.value);
    });
    ...or...
    $(document).on('change', 'input', function(getCountry(this.value)) {
    // Does some stuff and logs the event to the console

    And some may wonder why, if it is working, I need to convert it to JQuery. I'm aiming towards making a chained dropdown plugin for WordPress (I need at least Country, State, City but prefer Continent, Country, State, City and District). All the Wordpress plugin demos, tutorials, and similar plugins I've tried use JQuery but I can't seem to find a plugin to do what I want (I have an external database of continents, countries, states, cities that I want the plugin to access) . I think if I can get my current script converted to JQuery I'll be able to slip it all into a WP Plugin.

    Any help will be tremendously appreciated.
     
    robertlef, Nov 23, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    If you have an external database, why don't you just pull the information from that and populate the select boxes (not drop downs) directly? Why muck about doing that via Ajax and jQuery? What you do after you get all the info into the selects are you sort it with javascript, maybe turning off/on disabled if you want the user to have to follow a strict line of selecting continent, then country etc.
     
    PoPSiCLe, Nov 23, 2015 IP
  3. robertlef

    robertlef Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Re: "If you have an external database, why don't you just pull the information from that and populate the select boxes (not drop downs) directly?"

    It requires an additional page load for each query to the database that way. Not a major issue (except perhaps on mobile devices) but AJAX enables just a small part of the DOM to be changed, leaving the rest of the page unchanged, and avoids all that extra bandwidth. And like I said, I've got it working fine using the regular javascript. So far it looks like it is mainly a Wordpress issue. They have simple AJAX usage but not one single plugin doing this sort of chained dropdown (at least thatI have found and I've looked pretty hard).

    Again, I wouldn't think it that big a deal on a regular PC but on mobile devices the extra page loads could be avoided. A lot of WP themes are supposed to be mobile compatable but seems they would have how to do chained dropdowns down to a science and an issue of adding a plugin but I guess not.
     
    robertlef, Nov 23, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Huh? No, no, no. No extra page loads. You pull ALL the information, for ALL the selects ONCE, when first populating the page. No extra page loads.
    Then, if needed, you can use javascript to dynamically enable/disable select boxes, or what those boxes contain, based on what is selected in the previous one. Yes, of course you can do it per select box using Ajax, but that means that the form won't work at all if javascript is turned off.
     
    PoPSiCLe, Nov 24, 2015 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    1) You've got a perfectly good working normal JS script, why would you want to piss on it from orbit with the dumbass mouth-breathing halfwit BS known as jQuery.

    2) NOT that it's all that great a script since it relies on innerHTML instead of DOM manipulation, NOT that jQuery would fix that since it actively encourages that asshattery we've been told for over a decade to STOP doing. EVEN when it would be faster, it can trigger a page reparse which there's no way to time, but if you watch CPU usage, well...

    Seems like as PoPSiCLe said, you're using JS to do something that should have been handled when the page was loaded -- I'm not sure how ajaxing this is saving you anything other than making whatever form you are using an accessibility mess with zero graceful degradation. Remember the unwritten rule of JavaScript: "If you can't make a page that works without Scripting FIRST, you likely have no damned business adding scripting to it!"

    GOOD Scripting should enhance functionality, not provide or supplant it. This reeks of it outright being the only means of even accessing the page, which really gives a giant middle finger to a lot of users -- the LAST thing you should do on a form.
     
    deathshadow, Nov 24, 2015 IP
  6. robertlef

    robertlef Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    PoPSiCLe, re: You pull ALL the information, for ALL the selects ONCE
    The current database is at 9000 rows and that will easily go up probably ten-fold. Many of the end users will select out way before even a fraction of that data would be needed. Many will be on smart phones (where bandwidth, storage and processing may be limited). I can see send that huge wad of data to their device.
     
    robertlef, Nov 24, 2015 IP
  7. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #7
    10k rows, so what? What's important is what kind of data is being sent. As I understood it, this is countries and cities, mostly? That's perhaps an average of 10-15 bytes per row (an id + the name), hence a total of 150kB for all the content. Not really that much. But if you want to do it in jQuery, you'll probably need to modify the server side code as well.
     
    PoPSiCLe, Nov 24, 2015 IP
  8. robertlef

    robertlef Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    So far the db is already 367.1 kB and, like I said, it is no where near finished. Change the server side? Whether native JS or JQuery, the data going to it from the server will be the same wouldn't it? How/why would that need to be changed?
     
    robertlef, Nov 24, 2015 IP
  9. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #9
    Depending on how you're doing things, you might wanna change how the data is returned from the server. The easy way to do this via jQuery would be to send a $.post-request on changes on the selects. Return values then populates the next select box, and so on. It's fairly simple.
     
    PoPSiCLe, Nov 24, 2015 IP