我是如何弄乱我的Javascript的?

时间:2016-04-06 18:30:55

标签: javascript php debugging unobtrusive-javascript

我的代码非常糟糕,所以我需要一些帮助。

我收到以下错误:

  

SyntaxError:期望表达式,得到脚本结束

这个错误似乎在告诉我,我有一个大括号或分号,因为今天的疯狂本质,我似乎无法找到它。我正在尝试通过在UserInterface.js中的window.onload函数处理程序下移动事件侦听器功能来使我的Javascript不那么突兀;但是,我需要在PHP和onload事件之间传递一个“Fields”数组,所以我想将onload事件保存在: <body onload="OnLoad('.$EncodedFields . ');">';,除非有人能告诉我传递此变量的更好方法。

不知怎的,在我的插手中,我已经触发了这个错误。有谁知道如何解决这个错误?我应该如何正确地将php变量传递给Javascript以用于onload事件?

UserInterface.php

class UserInterface {
    var $ParentAppInstance;
    function __construct($AppInstance){
        $this->ParentAppInstance = $AppInstance;
        $this->DrawPageHTML();
        $this->DrawDBSetDropdown();
        $this->DrawQueryForm();
    }


    //Override thjis function to change the HTML and PHP of the UI page.
    protected function DrawPageHTML(){
        $DBSet_Num = filter_var($this->ParentAppInstance->CurrentDBSet_Str, FILTER_SANITIZE_NUMBER_INT);
        $CurrDBSet_Obj = $this->ParentAppInstance->DBSets_Arr[$DBSet_Num];
        $EncodedFields = json_encode($CurrDBSet_Obj->GetDBSetFields());
        echo '<body onload="OnLoad('. $EncodedFields .');">';
        echo '
            <div id="DebugOutput"></div>
        </body>


        ';
        //json_encode($CurrDBSet_Obj->GetDBSetFields())
        echo '$AppInstanceData: ' . '<br>';
        echo '--CurrentDBSet_Str: ' . $this->ParentAppInstance->CurrentDBSet_Str;
    }

    protected function DrawDBSetDropdown(){
        echo '<div align="right">';
            echo '<select onchange="SwitchDatabaseSet();" name="DBSetList" form="DBSetSelector" id="DBSetSelector">';
            $i = 0;
            foreach ($this->ParentAppInstance->DBSets_Arr as $DBSet){
                if ($DBSet->DBSetName == $this->ParentAppInstance->CurrentDBSet_Str){
                    echo '<option value="' . $DBSet->DBSetName . '">' . $DBSet->DBSetName . '</option>';
                }
            }

            foreach ($this->ParentAppInstance->DBSets_Arr as $DBSet){
                if ($DBSet->DBSetName == $this->ParentAppInstance->CurrentDBSet_Str){/* DO NOTHING. IE. IGNORE IT*/}
                else if ($DBSet->DBSetName == 'DBSet0'){/* DO NOTHING. IE. IGNORE IT*/}
                else{
                    //Add the DBSet to the dropdown list.
                    $i++;
                    echo '<option value="' . $DBSet->DBSetName . '">' . $DBSet->DBSetName . '</option>';
                }
            }
            echo '</select>';
        echo '</div>';

    }

    protected function DrawQueryForm(){
        echo '<form action="search.php" method="post">';
            echo '<div id="QFormBody">';
            $NumActiveQBoxes = $this->ParentAppInstance->Config['ApplicationSettings']['NumberDefaultQueryOptions'];
            for ($i = 0; $i < $NumActiveQBoxes; $i++){
                echo '<div class="QueryBox" name="QBox_' . $i . '">';
                    echo '<select name=Field_' . $i . '">';
                        $DBSet_Num = filter_var($this->ParentAppInstance->CurrentDBSet_Str, FILTER_SANITIZE_NUMBER_INT);
                        $CurrDBSet_Obj = $this->ParentAppInstance->DBSets_Arr[$DBSet_Num];
                        foreach($CurrDBSet_Obj->GetDBSetFields() as $Field){
                            echo '<option>' . $Field . '</option>';
                        }
                    echo '</select>';
                    echo '<input type="text"></input>';
                    echo '<button class= "RMButton" type="button">-</button>';
                echo '</div>';
            }
            echo '<button type="button" id="add" onclick="AddQueryBox();">+</button>';
            echo '<button type="submit" id="submit">SEARCH</button>';
        echo '</Form>';
        $EncodedFields = json_encode($CurrDBSet_Obj->GetDBSetFields());

        echo '<script src=/GLS_DBSearchProject/JavaScript/UserInterface.js></script>';
    }
}

UserInterface.js

var DBSetFields = [];
var NumQBoxes = 3;

function OnLoad(Fields){
    console.log("Alpha");
    console.log(Fields);
    CloneDBSetFields(Fields);

    var RMNodeList = document.getElementsByClassName('RMButton');
    for (var i = 0; i < RMNodeList.length; ++i) {
        console.log(RMNodeList[i]);
        RMNodeList[i].onclick = RemoveQBox;  // Calling myNodeList.item(i) isn't necessary in JavaScript
    }
}

function Fields_FOREACH(ELEMENT, INDEX, ARRAY){
    var FieldOption = document.createElement('option');
    FieldOption.setAttribute('value', ARRAY[INDEX]);
    FieldOption.innerHTML = ARRAY[INDEX];
    this.appendChild(FieldOption);
}

function CloneDBSetFields(Fields){
    console.log("CloneDBSetFields");
    DBSetFields = Fields;


}

function AddQueryBox(){
    NumQBoxes += 1;
    var NewQBox = document.createElement('div');
    NewQBox.setAttribute('class', 'QueryBox');

    //Create and fill Field Selector dropdown "select" element
    var FieldSelector = document.createElement('select');
    FieldSelector.setAttribute('name', 'Field_' + NumQBoxes);
    //foreach element in Fields
    console.log(DBSetFields);
    DBSetFields.forEach(Fields_FOREACH, FieldSelector);
    //Create and fill 
    var QueryText = document.createElement('input');
    QueryText.setAttribute('type', 'text');
    QueryText.setAttribute('name', 'Query_' + NumQBoxes);

    //Create "-" Remove button for removing query lines.
    var RemoveButton = document.createElement('button');
    RemoveButton.innerHTML = "-";
    RemoveButton.setAttribute('type', 'button');
    RemoveButton.setAttribute('class', 'RMButton');
    RemoveButton.addEventListener("click", RemoveQBox);

    //Combine the individual elements into a new query box and insert the new query box into the HTML Document
    NewQBox.appendChild(FieldSelector);
    NewQBox.appendChild(QueryText);
    NewQBox.appendChild(RemoveButton);
    document.getElementById("QFormBody").insertBefore(NewQBox, document.getElementById("add"));

}

function RemoveQBox(e){
    console.log("Remove");
    var RemoveButton = this; //this == e.currentTarget
    console.log(RemoveButton);
    var QBox = RemoveButton.parentNode;
    QBox.remove();
    NumQBoxes -= 1;
}

1 个答案:

答案 0 :(得分:1)

显然:

  

body onload =&#34; OnLoad(&#39;。$ EncodedFields。&#39;);&#34;

究竟是什么导致了这个问题。出于某种原因,我还没有弄明白为什么,php连接运算符在这种情况下不起作用。

将此行更改为body onload="OnLoad{$EncodedFields};"或交换单引号和双引号(同时删除句点)也修复此问题。