Javascript две функции на один клик

Question

Я пытаюсь загрузить два разных файла в 2 разных DIV.Вот код, который я использую

var please_wait = null;
function open_url(url, target) {
    if (!document.getElementById) {
        return false;
    }
    if (please_wait != null) {
        document.getElementById("target").innerHTML = please_wait;
    }
    if (window.ActiveXObject) {
        link = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        link = new XMLHttpRequest();
    }
    if (link == undefined) {
        return false;
    }
    link.onreadystatechange = function () {
        response(url, target);
    }
    link.open("GET", url, true);
    link.send(null);
}
function response(url, target) {
    if (link.readyState == 4) {
        document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website  and give him the following errorcode: " + link.status;
    }
}
function set_loading_message(msg) {
    please_wait = Loding;
}

, и для вызова по ссылке я использую этот код ...

<a href="javascript:void(0)" onclick="open_url('firstpage.php','containerA');open_url('secondpage.php','containerB')">  Click Here </a>

Он просто загружает последний код в случае WHATSOEVER,Я перепробовал разные вещи, сделал абсолютно два разных метода, например open_url2, но безрезультатно.Он загружает только один запрос за один раз в DIV.Любые решения.

Answer 1

Вы используете link в качестве глобальной переменной.Поэтому второй вызов open_url() перезаписывает значение link, созданное из первого.

Вы должны сделать его локальным для функции open_url() и передать его функции response().

var please_wait = null;
function open_url(url, target) {

      // v----declare the variable
    var link;
    if (!document.getElementById) {
        return false;
    }
    if (please_wait != null) {
          // ----------------------v---"target" is a String???
        document.getElementById("target").innerHTML = please_wait;
    }
    if (window.ActiveXObject) {
        link = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        link = new XMLHttpRequest();
    }
    if (link == undefined) {
        return false;
    }
    link.onreadystatechange = function () {
        response(url, target, link); // <-- pass "link" to the response
    }
    link.open("GET", url, true);
    link.send(null);
}

  // receive "link"-------------v----so that you have the correct xhr object
function response(url, target, link) {
    if (link.readyState == 4) {
        document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website  and give him the following errorcode: " + link.status;
    }
}
function set_loading_message(msg) {
    please_wait = Loding;
}

Answer 2

Как уже говорилось, у вас есть конфликт на AJAX.

Вот как ваш код может выглядеть в jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"</script>

<script type="text/javascript">
$(document).ready(function() {
  $("#link1").click(function() {
    $("#containerA').load("firstpage.php",function() {
      $("#containerB').load("secondpage.php");
    });
  });
});
</script>

<a id="link1" href="#">  Click Here </a>

В качестве альтернативы используйте плагин администратора очередей для jQuery

Answer 3

Вы выполняете много дополнительной работы, используя Ajax-вызовы старой школы.Я думаю, вам больше повезет с jQuery ajax-методами.

Что касается того, почему последний загружается, вы проверяли firebug или другие сетевые инструменты, чтобы увидеть, загружаются ли оба файла? Если они оба загружаются, я думаю, что, вероятно, происходит то, что последний перезаписывает первое той функцией .innerHTML, которую вы используете .Вы хотите добавить.Проверьте эти ссылки, сделать это с помощью jQuery будет гораздо проще:

Выполнение Ajax-вызовов

Присоединение к элементу