how to work with multiple ajax?

Question

i am using ajax to get data in Date Label, bt it is not working. Details() function is working , but showDate() is stucked. How i get the data in dt id??

<label><b>From</b></label>
            <select id="f" onchange="Details();"><?php echo $coptions; ?></select>
            <label><b>Destination</b></label>
            <select id="d" onchange="Details();"><?php echo $coptions; ?></select>
            <label><b>Flight Name</b></label>
            <select id="list" onchange="showDate();" ></select>
            <label><b>Date</b></label>
            <select id="dt" ></select>
            <button >Go</button>

here is my ajax functions:

function Details()
{
    var xmlhttp;
    var fname = document.getElementById("f").value;
    var dname = document.getElementById("d").value;

    if (window.XMLHttpRequest)
    {   
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4)
        {
            document.getElementById("list").innerHTML=xmlhttp.responseText;
            showDate();
        }
    }
    xmlhttp.open("GET","route.php?q="+fname+"&w="+dname,true);
    xmlhttp.send();
    //loadDetails();
}
function showDate()
    {
        var xmlhttp;
        var ex=document.getElementById("list");
        var id=ex[ex.selectedIndex].id;

        if (window.XMLHttpRequest)
        {   
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("dt").innerHTML=xmlhttp.responseText;

            }
        }
        xmlhttp.open("GET","schdl2.php?f="+id,true);
        xmlhttp.send();
        //loadDetails();
    }

my schdl2.php page is like this:

<?php
    session_start();
    require_once("dbconnect.php");
    $fl=$_REQUEST['f'];

    $sql= "SELECT date FROM schedule where flight='$f1'";
    $rslt = mysql_query($sql);
    $foptions="";
    while ($row=mysql_fetch_array($rslt))
    {
        $rd=$row["date"];
        $foptions.="<option>$rd<option>";
    }
    echo $foptions;

?>

is there is any efficient way??

**Danger**: You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Dec 24 '13 at 12:53
I suggest using jQuery for ajax-calls. This will make things a lot easier. You can find more info on [jQuery.ajax()](http://api.jquery.com/jQuery.ajax/) — cumul, Dec 24 '13 at 13:04
This value var id=ex[ex.selectedIndex].id; ...try put an alert below, like alert(id) ....i think that value is empty — Hackerman, Dec 24 '13 at 13:11
when you say stuck what do you mean? What does the network console say? do you get a response from the server? — Piotr Kaluza, Dec 24 '13 at 13:11

score 0 · Answer 1 · answered Dec 24 '13 at 13:15

I made some tests, and your id var is always empty; so i change your code like this:

    This:

    var id=ex[ex.selectedIndex].id;

    By this on the showDate function:

    var id = document.getElementById("list").value;

Jsfiddle here: http://jsfiddle.net/x97jn/

Adrian Zurkiewicz · Answer 2 · 2013-12-24T17:26:52.327

0

You can work with JQuery ajax.

$( document ).ready(function() {

    $.ajax({

        url: "ajax-1.php",
        context: document.body

    }).done(function(data) {

        $('#result-1').html(data);

    });


    $.ajax({

        url: "ajax-2.php",
        context: document.body

    }).done(function(data) {

        $('#result-2').html(data);

    })


});

edited Dec 24 '13 at 17:26

answered Dec 24 '13 at 13:19

Adrian Zurkiewicz

46
2

It's cleaner not to use a querystring in the url like `?ajax=1`. Instead, use the `data`-option of jQuery.ajax(): `$.ajax({data: {ajax: 1}})` – cumul Dec 24 '13 at 14:54
It's only an example. I changed it to a different (clearly) URL. – Adrian Zurkiewicz Dec 24 '13 at 17:31

how to work with multiple ajax?

2 Answers2