Ajax request based on other ajax response

[filipgothic]

Hey guys, I am having problem for some time, and can't figure it out by myself

I have code like this

html page with select options which execute javascript function ajaxKupac and send request to page ajaxKupac.php and response is put inside div with id opcije then inside that content another javascript function should be executed called ajaxIzvestaj

 <script>
        function ajaxKupac(str) {
            if (str == "") {
              document.getElementById("opcije").innerHTML = "";
                return;
            } else {
                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("opcije").innerHTML = xmlhttp.responseText;
                    }
                }
                var url = "js/ajax/ajaxKupac.php";
                url = url + "?kupac=" + str;
                url = url + "&sid=" + Math.random();

                xmlhttp.open("GET", url, true);
                xmlhttp.send();
            }

        }
        </script>


        <script>
         function ajaxIzvestaj(str, str2, str3, str4, str5, str6) {
                    if (str == "") {
                        document.getElementById("txtHint").innerHTML = "";
                        return;
                    } else {
                        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("txtHint").innerHTML = xmlhttp.responseText;
                            }
                        }
                        var url = "js/ajax/ajaxIzvestaj.php";
                        url = url + "?broj=" + str + "&datum=" + str2 + "&serija=" + str3 + "&kutija=" + str4 + "&korisnik=" + str5 + "&tabela=" + str6;
                        url = url + "&sid=" + Math.random();

                        xmlhttp.open("GET", url, true);
                        xmlhttp.send();
                    }
                }
        </script>


         NAME<select class="izvestajSelect" name="kupac" id="kupac" onChange="ajaxKupac(this.value)">

                                        <option value="">IZABERITE KUPCA</option>
                                        <option value="MAN">MAN</option>
                                        <option value="MANB">MAN BATCH</option>
                                        <option value="DEUTZ">DEUTZ</option>
                                        <option value="VOLVO">VOLVO</option>

                                    </select>

                                    <div id="opcije">  


                                    </div>
<div id="txtHint"><b>Podaci će biti prikazani ovde...</b>

here is ajaxKupac.php page which chose table from mysql base depending on ajax request from selected option and displays more options which calls next function ajaxIzvestaj to make second ajax request and put it inside div with id txtHint

<?php
if (isset($_GET)) {
    $kupac = ($_GET['kupac']);


    if ($kupac == 'MAN') {

        $tabela = 'harnesi_man';
    } elseif ($kupac == 'MANB') {

        $tabela = 'harnesi_manb';
    } elseif ($kupac == 'DEUTZ') {

        $tabela = 'harnesi_deutz';
    } elseif ($kupac == 'VOLVO') {

        $tabela = 'harnesi_volvo';
    }

    echo $tabela;
    ?>



    BROJ<select class="izvestajSelect" name="broj" id="broj" onChange="ajaxIzvestaj(this.value, document.getElementById('datum').value, document.getElementById('serija').value, document.getElementById('kutija').value, document.getElementById('korisnik').value, <?php echo $tabela; ?>)">

        <option value="10">10</option>
        <option value="100">100</option>
        <option value="1000">1000</option>

    </select>

    DATUM(yyyy-mm-dd)<input class="izvestaj" size="15" type="text" id="datum" name="datum" onKeyUp="ajaxIzvestaj(document.getElementById('broj').value, this.value, document.getElementById('serija').value, document.getElementById('kutija').value, document.getElementById('korisnik').value, <?php echo $tabela; ?>)" />




    SERIJA<input class="izvestaj" size="15" type="text" id="serija" name="serija" onKeyUp="ajaxIzvestaj(document.getElementById('broj').value, document.getElementById('datum').value, this.value, document.getElementById('kutija').value, document.getElementById('korisnik').value, <?php echo $tabela; ?>)" />


    KUTIJA<input class="izvestaj" size="10" type="text" id="kutija" name="kutija" onKeyUp="ajaxIzvestaj(document.getElementById('broj').value, document.getElementById('datum').value, document.getElementById('serija').value, this.value, document.getElementById('korisnik').value, <?php echo $tabela; ?>)"  />






    <?php
    $upit = $konekcija->query("SELECT DISTINCT h.korisnik, k.* FROM $tabela AS h INNER JOIN korisnici AS k on h.korisnik = k.korisnicko_ime ORDER BY ime ASC")
            or die("GREŠKA:" . mysqli_error($upit));
    ?>
    <select class="izvestajSelect" name="korisnik" id="korisnik" onChange="ajaxIzvestaj(document.getElementById('broj').value, document.getElementById('datum').value, document.getElementById('serija').value, document.getElementById('kutija').value, this.value, <?php echo $tabela; ?>)">

        <option value="">KORISNIK</option>
        <?php
        while ($row = $upit->fetch_assoc()) {
            ?>
            <option value = "<?php echo($row['korisnicko_ime']) ?>" >
                <?php echo($row['ime'] . ' ' . $row['prezime']) ?>
            </option>
            <?php
        }
        ?>

    </select>

I hope you understand my question, is basicly ajax request from already generated content from first ajax.

Thanks in advance for your help.

[AleMonteiro]

Hi filipgothic, when you get the result from the first request, just call the second one, simple as this:

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("opcije").innerHTML = xmlhttp.responseText;

        //call the function that will make the next request
        ajaxIvestaj();

    }
}

[filipgothic]

now content of div txtHint changes but with error from mysql, some variable from ajaxIzvestaj is not passed on ajaxIzvestaj.php which generates second content. Does my variable from first ajax request gets passed to the next request with your solution?

variable $table is most important and its generated from first select option to first ajax, than that ajax response also uses same variable to pass it to next one

ajaxKupac have another 6 options which all calls js function ajaxIzvestaj and one of those options is $table from ajaxKupac.php response

ajaxIzvestaj.php should put inside div txtHint table depending on selected options from ajaxKupac.php

[AleMonteiro]

If you want to pass the result of the first ajax to the second, you should do something like:

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var firstResult = xmlhttp.responseText;
        document.getElementById("opcije").innerHTML = firstResult;
        //call the function that will make the next request
        ajaxIvestaj(firstResult);
    }
}

About the $table var, I couldn't fint it anywhere in your code.

[filipgothic]

I need only $tabela variable from firstResult to pass to next request ajaxIzvestaj which contains 6 variables function ajaxIzvestaj(broj, datum, serija, kutija, korisnik, tabela)

you can see $tabela variable in first content that goes into div opcije

$table depends on first select option which generates first ajax response inside div opcije than after chosing those options I need to create table from ajaxIzvestaj.php and that table also depends on variable $tabela

 if ($kupac == 'MAN') {
        $tabela = 'harnesi_man';
    } elseif ($kupac == 'MANB') {
        $tabela = 'harnesi_manb';
    } elseif ($kupac == 'DEUTZ') {
        $tabela = 'harnesi_deutz';
    } elseif ($kupac == 'VOLVO') {
        $tabela = 'harnesi_volvo';
    }

is it possible to call ajaxIzvestaj function with only one variable and pass it to ajaxIzvestaj.js which has 6 variables and I need last one to be sent from ajaxKupac.js which put content in div opcije and then calls ajaxIzvestaj function to execute next ajax request with 6 variables from content opcije and 6th variable is same as $tabela from content inside opcije

all I need to make it work is to make ajaxIzvestaj function execute onChange events in content div opcije which is generated by first request ajaxKupac

[AleMonteiro]

What happens when you change the selected value on izvestajSelect? Does it call the ajaxIzvestaj function?

[filipgothic]

which izvestajSelect, those are only classes, select with id kupac is first ajax request ajaxKupac, and it calls ok, I get displayed content in div opcije, then I am calling another ajaxIzvestaj request inside that content, which does not change second content

there is problem, it did no changed in my original code at all, and in your code, where I call ajaxIzvestaj function inside ajaxKupac function it calls instant after I change first select option on main page which calls ajaxKupac function but it returns error from mysql expecting 1 parameter

ajaxIzvestaj should be called by onChange events inside content opcije which is created by ajaxKupac

all I want is to select table from database based on first select options kupac on main page, and transfer it to second request inside that one, which then calls html and php content to display data from base based on those 6 options, and 6th is $tabela from ajaxKupac which is generated as first ajax

to simplify, first select kupac opens another few select options and those options dynamicly creates html table depending on inputs and selected values

here are some pictures for select option which executes ajax

first select

options inside and onChange event called ok

and then this doesnt work, second select or any input, it should call ajaxIzvestaj on change or keyup