JavaScript не работает, без ошибок

Question

У меня есть следующий код javascript, который загружается без ошибок, однако функция обновления на самом деле не кажется функциональной, поскольку get_Records.php никогда не загружается. Я не могу проверить, загружен ли get_auction.php так, как он загружен из get_records.php

Одна из моих главных проблем заключается в том, что я поступаю неправильно, когда update () принимает параметры pk и query, так как когда-либо будет использоваться только один из них. Это похоже на плохой взлом и плохую логику, но я не знаю лучшего способа.

Вот код

var xmlHttp
var layername
var url

function update(layer, part, pk, query) {
    alert ("update");
    if (part=="1") {
        alert ("part 1");
        url = "get_auction.php?cmd=GetAuctionData&pk="+pk+"&sid="+Math.random()
    } else if (part=="2") {
        alert ("part 2");
        url = "get_records.php?cmd=GetRecordSet&query="+query+"&sid="+Math.random()
    }
    xmlHttp=GetXmlHttpObject()
    if(xmlHttp==null) {
        alert("Your browser is not supported?")
    }
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
            document.getElementById(layer).innerHTML=xmlHttp.responseText
        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            document.getElementById(layer).innerHTML="loading"
        }
    };
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
}

function GetXmlHttpObject() {
    var xmlHttp=null;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
    }
    return xmlHttp;
}

function makewindows() {
    child1 = window.open ("about:blank");
    child1.document.write(<?php echo htmlspecialchars(json_encode($row2["ARTICLE_DESC"]), ENT_QUOTES); ?>));
    child1.document.close(); 
}

Я поместил оповещения в функцию обновления, но она не отображается, указав, что функция обновления никогда не вызывается?

Я не хочу и не могу использовать фреймворк, и при этом у меня нет доступа к использованию firebug, поэтому, пожалуйста, не предлагайте эти вещи. Я знаю о них и использую их, когда могу.

Я также хотел бы знать, является ли предпочтительным вызов php из makewindows (), а не просто для того, чтобы makewindows просто принимала параметр ..., есть ли преимущество или недостаток в каждом подходе?

Кажется, я получаю сообщение об ошибке при попытке вызвать функцию, вот как я делаю это в PHP:

echo "<li><a href='#' onclick=update('Layer3','2','0','hello')'>Link 1</a></li>" . 

что делает этот HTML, что должно быть хорошо? "\ N";

<li><a href='#' onclick='update('Layer3','2','0','hello')'>Link 1</a></li>

edit: я принял совет tester101 и изменил его на:

echo '<li><a href="#" onclick="update(\'Layer3\',\'2\',\'0\',\'hello\')">Link 1</a></li>' . "\n"; 

Что все еще дает ошибку. Я, вероятно, в конечном итоге буду использовать ответ Томса, но хотел бы знать, почему это не работает.

Answer 1

Если вы можете использовать Firefox и воспроизвести ошибку, я настоятельно рекомендую использовать Firebug , так как это действительно легко использовать и просматривать скрипты, устанавливать точки останова и т. Д. Кроме того, вместо использования «alert» заявления, вы можете использовать такие вещи, как console.info("unexpected value x=%o", some_object);, и он будет записывать значение на консоль (включая строку #), что вы можете проверить позже без прерывания вашего сценария.

edit: фактически, если вы используете PHP на сервере, вы можете использовать FirePHP , чтобы помочь отладке на клиенте.

Answer 2

Может быть, слишком много новых строк?

В большинстве языков у вас есть либо перевод строки в качестве разделителя команд, либо ";". В JavaScript у вас есть оба: новая строка иногда работает как ";"

Попробуйте вместо этого, посмотрите, поможет ли это:

function update(layer, part, pk, query) {
   alert ("update");
   if (part=="1") {
      alert ("part 1");
      url = "get_auction.php?cmd=GetAuctionData&pk="+pk+"&sid="+Math.random()
   } else if (part=="2") {
      alert ("part 2");
      url = "get_records.php?cmd=GetRecordSet&query="+query+"&sid="+Math.random()
   }
   // and so on...
}

Единственное, что отличается, это форматирование: открывающее фигурное число находится на той же строке, что и конструкция, которая его использует ('if', 'else', 'function', ...).

Answer 3

onclick=update('Layer3','2','0','hello')'>Link 1

Я не знаю, является ли это опечаткой, но эта строка должна быть

onclick="update('Layer3','2','0','hello')">Link 1

Этот код вызовет ошибки и никогда не вызовет update, потому что одинарная кавычка после onClick = заканчивается на ('. Используйте двойные кавычки.

onclick='update('Layer3','2','0','hello')'>Link 1

Answer 4

Несоответствующие скобки в

child1.document.write(<?php echo htmlspecialchars(json_encode($row2["ARTICLE_DESC"]), ENT_QUOTES); ?>));

Answer 5

Что касается ваших проблем, насколько я знаю, JavaScript не будет жаловаться, если вы не дадите ему все аргументы.

* 1003 например *

function myFunction(var1, var2, var3, var4){

вызывая эту функцию как:

myFunction('test1','test2');

не выдает ошибку.

Это похоже на установку по умолчанию рядом с аргументом, по умолчанию в javascript используется значение null или undefined.

Вы можете проверить это, проверив:

if(null != var3){

Может помочь вам немного очистить эту функцию; Также вы можете собрать небольшой класс AJAX из Интернета, который несколько улучшит ваш Javascript. Существует множество функций упаковки, которые инкапсулируют объект xmlHttpRequest, что позволяет использовать его в разных браузерах с одинаковыми результатами.

Дайте мне знать, если вам нужна помощь. Я уверен, что если вы найдете несколько готовых ajax-методов ( jQuery обладает отличной функциональностью!), Задача, которую вы пытаетесь достичь, будет намного проще.

Answer 6

Вы можете просто взять Url в качестве параметра для update (), тогда вам не нужно будет строить URL-адрес внутри, и вам не понадобятся «необязательные» параметры

Редактировать (ответ на комментарий)

Если у вас есть функция update (), которая просто берет url и id элемента (layer) и обновляет их на основе результата вызова AJAX, вы можете сделать что-то подобное, чтобы устранить необходимость в необязательных параметрах и использовать функцию делать две разные вещи.

function update(layer, url) {
    var xmlHttp=GetXmlHttpObject(); //you have this defined elsewhere

    if(xmlHttp==null) {
        alert("Your browser is not supported?");
    }

    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
            document.getElementById(layer).innerHTML=xmlHttp.responseText;
        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            document.getElementById(layer).innerHTML="loading";
        }

       //etc
    }

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


function updateByPk(layer, pk) {
   url = "get_auction.php?cmd=GetAuctionData&pk="+pk+"&sid="+Math.random();
   update(layer, url);
}


function updateByQuery(layer, query) {
   url = "get_records.php?cmd=GetRecordSet&query="+query+"&sid="+Math.random();
   update(layer, url);
}

Затем позвоните либо, в зависимости от того, что вы хотите сделать:

updateByPk('id_of_div', 2);

или

updateByQuery('id_of_div2', 'query');

например. в HTML

<a href="#" onclick="updateByQuery('Layer3', 'hello');">Link 1</a>

или сгенерировать это в PHP

<?php echo '<a href="#" onclick="updateByQuery(\'Layer3\', ' . json_encode($query) . ');">Link 1</a>';

Answer 7

Если вы можете открыть свою страницу в Firefox, я бы проверил консоль ошибок (c-s-J). Это помогло мне найти много-много опечаток.

Кроме того, в вашем коде пропущено много точек с запятой. Может быть, некоторые из них не являются обязательными, но ...

Answer 8

Вы убедились, что код PHP возвращает что-то разумное? (Я предполагаю, что вы можете просмотреть исходный код вашего HTML.)

Используйте хорошую отладку предупреждений: вставьте операторы предупреждений (например, windows.alert("GetXmlHttpObject started.");) в свой код, чтобы убедиться, что вы их достигли.

JSLint может помочь вам. Я попробовал это, однако, и не нашел ничего действительно неправильного.