All geek questions in one place

How to prevent onreadystatechange integer change

I have a problem with my Ajax. At the moment, I have 5 pairs of elements: drop-down (tags span) and the contents of drop-down lists (tags ul). The tags spanhave an event listener, for onclick, where when clicked drop-downsappear, and when clicked elsewhere, the drop-down lists disappear. With hardcoded, lidropdown menus work fine. However, I am trying to populate <ul>dynamically generated <li>using ajax. However, Ajax is behaving badly.

On spanI also have one more event-listener for onchangethat causes js function calloptions();, which is my Ajax. I'm trying to achieve, if you select an option, the options in the other drop-down lists change depending on what you have selected. What I have is a onchangeloop from the drop down list 0 to the drop down list 5, changing the value <li>based on the values ​​of all selected.

However, when I debug, [k]does my value change by 5the moment readyStateit comes to [4]in the first loop? I am not sure if the increase in value [k]in loop 1 occurs as a result of onreadystatechangeor something else that I do not see. This leads to the fact that the function cannot overwrite the values <ul>, because it searches span[5], while there are only 5, and then printsCannot read property 'parentElement' of undefined (...)

HTML

    <div id="filters">
        <div class="i_drop col column-2">
            <span class="i_drop_select"></span>
            <img class="i_drop_select_function drop" src="./assets/drop_input.png">
            <ul class="i_drop_content"></ul>
        </div>
        <div class="i_drop col column-2">
            <span class="i_drop_select"></span>
            <img class="i_drop_select_function drop" src="./assets/drop_input.png">
            <ul class="i_drop_content"></ul>
        </div>
        <div class="i_drop col column-2">
            <span class="i_drop_select"></span>
            <img class="i_drop_select_function drop" src="./assets/drop_input.png">
            <ul class="i_drop_content"></ul>
        </div>
        <div class="i_drop col column-2">
            <span class="i_drop_select"></span>
            <img class="i_drop_select_function drop" src="./assets/drop_input.png">
            <ul class="i_drop_content"></ul>
        </div>
        <div class="i_drop col column-2">
            <span class="i_drop_select"></span>
            <img class="i_drop_select_function drop" src="./assets/drop_input.png">
            <ul class="i_drop_content"></ul>
        </div>
    </div>

AJAKS

function calloptions() { 
var toselect = ["class", "topic", "subtopic", "year", "marks"];
for (var k = 0; k < toselect.length; k++) {

    var filters = document.getElementById("filters"); 
    var span = filters.getElementsByTagName("span");
    var execute = "select";
    var myclass= span[0].innerHTML;
    var topic =span[1].innerHTML;
    var subtopic = span[2].innerHTML;
    var year = span[3].innerHTML;
    var marks =span[4].innerHTML;

    makeRequest('test.php', toselect[k],  myclass, topic, subtopic, year, marks, execute); 

    function makeRequest(url, select, myclass, topic, subtopic, year, marks, execute) {

    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
    }

    httpRequest.open('POST', url);
    httpRequest.onreadystatechange = alertContents;
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    httpRequest.send("function="+ execute+ "&toselect="+ select+ "&class=" + encodeURIComponent(myclass) + "&topic=" + encodeURIComponent(topic) + "&subtopic=" + encodeURIComponent(subtopic) + "&year=" + encodeURIComponent(year) + "&marks=" + encodeURIComponent(marks));
    }

    function alertContents() {
        if (this.readyState == 4 && this.status == 200) {
            var response = this.responseText;
            var container = span[k].parentElement || span[k].parentNode ;
            var ul =container.getElementsByTagName("ul")[0];
            ul.innerHTML = response;
        }
    }
}
}

Php

if(!empty($_POST['function']) && !empty($_POST['toselect']))
{
    $toselect = $_POST['toselect'];
    $_POST['function']($toselect);

}

function select($toselect) {
    global $link;

    $variables = "";

    $select_options = array("class", "topic", "subtopic", "year", "marks");     

    $unset_options= array(); $set_options= array(); $set_values= array();

    for ($i=0; $i < count($select_options) ; $i++) { 
        if(isset($_POST[$select_options[$i]]) && $_POST[$select_options[$i]] != ''){
            array_push($set_options, $select_options[$i]);
        } else {
            array_push($unset_options, $select_options[$i]);
        }
    }

    for ($i=0; $i < count($set_options) ; $i++) { 
        array_push($set_values, $_POST{$set_options[$i]});
    }

    for ($i=0; $i < count($unset_options); $i++) { 
        $key = array_search ( $unset_options ,  $select_options);

        unset($select_options[$key]);
    }

    $select_options = array_values($select_options);

    for ($i=0; $i < count($set_options) ; $i++) { 
        if ($i<1) {
            $variables .= " $set_options[$i]='$set_values[$i]'";
        } else {
            $variables .= " AND $set_options[$i]='$set_values[$i]'";
        }
    }

    if ($variables != "") {
        $variables = "WHERE" . $variables;
    }

    $sql="SELECT DISTINCT $toselect FROM `questions` $variables";

    $result=mysqli_query($link, $sql);

    $test_array = array();

    $i = 0;

    while ($row =mysqli_fetch_array($result)) {
        $test_array[$i] = "<li>$row[0]</li>";
        $i++;
    }

    $test_array = implode("", $test_array);

    echo $test_array;       
}

I printed the parameters passed to the PHP file in httpRequest.send()and ran them as $_GETin the file and it works, so I know that this is not a problem with PHP, but rather a failure on my Ajax.

/ , . Ajax, javascript, , . !

+4
2

, " " [k], , for Ajax. :

function externalFunction() {

    var toselect = ["class", "topic", "subtopic", "year", "marks"];
    for (var i = 0; i < toselect.length; i++) {
        calloptions(i, toselect[i]);
    }
}


function calloptions(x, toselect) { 

    var form = document.getElementById("filters"); 
    var span = form.getElementsByTagName("span");
    var execute = "select";
    var myclass= span[0].innerHTML;
    var topic =span[1].innerHTML;
    var subtopic = span[2].innerHTML;
    var year = span[3].innerHTML;
    var marks =span[4].innerHTML;

    makeRequest('test.php', toselect,  myclass, topic, subtopic, year, marks, execute); 

    function makeRequest(url, toselect, myclass, topic, subtopic, year, marks, execute) {

        httpRequest = new XMLHttpRequest();

        if (!httpRequest) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }

        httpRequest.onreadystatechange = alertContents;
        httpRequest.open('POST', url);
        httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
        httpRequest.send("function="+ execute+ "&toselect="+ toselect+ "&class=" + encodeURIComponent(myclass) + "&topic=" + encodeURIComponent(topic) + "&subtopic=" + encodeURIComponent(subtopic) + "&year=" + encodeURIComponent(year) + "&marks=" + encodeURIComponent(marks));
}

    function alertContents() {
        if (this.readyState == 4 && this.status == 200) {
            var response = this.responseText;
            var container = span[x].parentElement || span[x].parentNode ;
            var ul =container.getElementsByTagName("ul")[0];
            ul.innerHTML = response;
    }
}

- , , ...

+1

k - ajax/scope, for. k , ! , , . k 5, , atm. . , k, 5,

for (var k = 0; k < toselect.length; k++) {
//....
//
}

console.log(k); //5

? , k-1 - , , , , , k <span>. async. , , , - , .

+1

Source: https://habr.com/ru/post/1664059/

More articles:


All Articles