Проблема с таргетингом контента на div (контент показывается на новой странице) - PullRequest
Новая
       10

Проблема с таргетингом контента на div (контент показывается на новой странице)

1 голос
/ 03 марта 2011

У меня есть веб-страница, на которой у меня есть div, который я хотел бы заполнить. На данный момент содержимое этого div генерируется с помощью Javascript следующим образом: 

function foo(array){
    for(i=1;i<=maxIndex;i+=1){
        document.write ("<label><input type='checkbox'/>" + array[i] + "\n </label><br />")
    }
}

и я заполняю div следующим образом: 

        <div class="bla">
        blablabla
        </div>

        <div class="myDiv" id="myDiv">
            <form name="myForm">
            <script type="text/javascript">
                foo(myArray);
            </script>
            </form>
        </div>

        <div class="blah">
             blahblahblah
             <form>
             <select onchange="updateDiv(myArray)">
                          <option value="1"> Test1 </option>
                          <option value="2"> Test2 </option>
                          <option value="3"> Test3 </option> 
             </select>
             </form>
        </div>

Причина, по которой я хотел бы заселить div, заключается в том, что я хотел бы пользователь может выбрать расположение содержимого div (т. е. когда пользователь выбирает определенный элемент из выпадающего списка, «myArray» выполняется повторная сортировка, а затем заполняется myDiv, поэтому содержимое теперь отображается в другом порядке). 

function updateDiv(array){
     array.sort();
     document.getElementById('myDiv').innerHTML = '<form name="myForm"><script type="text/javascript"> foo(myArray); </script></form>';

}

Проблема, с которой я сталкиваюсь, заключается в том, что мне не удается нацелиться на новый содержимое в myDiv, когда пользователь выбирает комбинированный список.

Я пытался использовать innerhtml, но новый контент, который выводится правильно, отображается на совершенно новой странице, а не в myDiv из-за JavaScript.

РЕДАКТИРОВАТЬ: Кажется, что теперь проблема в том, что innerhtml обновляет код в правильном div (по крайней мере, когда я проверяю его с помощью firebug), но текст не отображается (JavaScript не был запущен ...?).

Я посмотрел в Интернете и, похоже, не нашел подходящего решения.

Было бы очень признательно, если бы кто-то мог указать мне правильное направление или позволить мне знать, если я подхожу к этому совершенно неправильно.

Спасибо

Ответы [ 3 ]

0 голосов
/ 03 марта 2011

Существует несколько синтаксических проблем, но работает следующее: 

<html>
<head>
<script type="text/javascript">
function foo(arr){
    for(i=0; i<arr.length; i++){
        document.write ("<label><input type='checkbox'/>" + arr[i] + "\n </label><br />")
    }
}
</script>
</head>
<body>
        <div class="bla">
        blablabla
        </div>

        <div class="myDiv" id="myDiv">
            <form name="myForm">
            <script type="text/javascript">
              myArray = ["A","B","C"];
                foo(myArray);
            </script>
            </form>
        </div>

        <div class="blah">
        blahblahblah
        </div>
</body>
</html>
0 голосов
/ 04 марта 2011

Хорошо. Наконец-то я выяснил, в чем проблема: мне не следовало использовать так много document.write (), который выводит на новую страницу.

Вместо этого я сохраняю все в строку, а затем использую document.write () только на последнем шаге, следующим образом: 

var astring;

function foo(array){
    for(i=1;i<array.length;i+=1){
        astring += "<label><input type='checkbox'/>" + array[i] + "\n </label><br />";
    }

function updateDiv(array){
     array.sort();
     document.getElementById('myDiv').innerHTML = astring;
    }
0 голосов
/ 03 марта 2011

Ваш foo() не выглядит правильно ... это работает для меня: - 

<script>
function foo(array){
    for(i=0;i<array.length;i++){
        document.write ("<label><input type='checkbox'/>" + array[i] + "\n </label><br />")
    }
}
</script>

HTML код: 

<div class="bla">
blablabla
</div>

<div class="myDiv" id="myDiv">
    <form name="myForm">
    <script type="text/javascript">
        // test code
        var myArray = ["a", "b"];
        foo(myArray);
    </script>
    </form>
</div>

<div class="blah">
blahblahblah
</div>

Вот как это выглядит: -

enter image description here

...