2013-05-09 7 views
2

Я пытаюсь получить доступ к неупорядоченным элементам списка в php, чтобы я мог вставлять их в базу данных, мне нужно иметь доступ к ним через позицию, но я не уверен, как это сделать в PHP. Я использую jQuery, чтобы список сортировался на стороне клиента. В Javascript он будет доступен сДоступ к элементам неупорядоченного списка HTML в PHP

alert($("#sortable li:first").text() + ' is first ' + $("#sortable li:eq(1)").text() + ' is second ' + $("#sortable li:eq(11)").text() + ' is last'); 

В списке я использую на http://jsfiddle.net/mMTtc/

Я просто в поисках помощи, как о том, как хранить эти элементы списка в переменной PHP т.е. позволяет говорить Мне нужен 6-й элемент, основанный на том, как пользователь заказал список. Как мне это сделать?

Благодаря

+0

Если вы сохраняете способ сортировки, почему бы не использовать что-то вроде 'data-index'? Вы можете изменить значение по мере их изменения с помощью '.data()' jQuery, сохранить его целочисленное значение, а затем, когда вы вытащите из БД для создания списка в будущих загрузках страницы, вы можете «ЗАКАЗАТЬ» этот элемент, чтобы порядок списка остается. – PlantTheIdea

+0

То, как они сортируются, я считаю неуместным, потому что это изменило бы DOM перед обработкой PHP, я не уверен. Я просто ищу способ доступа к неупорядоченному списку в элементе PHP по элементу для хранения каждого в переменной. – user1628206

+0

@ user1628206: Если один из ответов помог вам решить вашу проблему, отметьте ее как «принятую», поэтому пользователи, столкнувшиеся с подобной проблемой в будущем, смогут легко ее обнаружить. – gkalpak

ответ

1

Вы можете использовать DomDocument разобрать ваш HTML. Это можно сделать либо с помощью строки с использованием loadHTML(), либо путем загрузки внешнего HTML-файла с помощью loadHTMLFile().

В этом примере используется loadHTML():

<?php 

    $html = '<html> 
    <body> 
    <ul id="sortable"> 
     <li class="ui-state-default">1</li> 
     <li class="ui-state-default">2</li> 
     <li class="ui-state-default">3</li> 
     <li class="ui-state-default">4</li> 
     <li class="ui-state-default">5</li> 
     <li class="ui-state-default">6</li> 
     <li class="ui-state-default">7</li> 
     <li class="ui-state-default">8</li> 
     <li class="ui-state-default">9</li> 
     <li class="ui-state-default">10</li> 
     <li class="ui-state-default">11</li> 
     <li class="ui-state-default">12</li> 
    </ul> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
    </body> 
    </html>'; 

$dom = new DomDocument; 
$dom->loadHTML($html); 

$li = $dom->getElementsByTagName('li'); 

// Print first item value 
echo $li->item(0)->nodeValue; 

// Print third item value 
echo $li->item(2)->nodeValue; 
+0

Я специально для текстовых значений из каждого элемента списка i.e номер, это то, что возвращается от nodeValue или это просто элемент списка сам? – user1628206

+2

Да. См. [Здесь] (http://www.php.net/manual/en/class.domnode.php#domnode.props.nodevalue). –

+0

Не всегда ли это возвращало статическое значение исходного html, а не того, что сейчас находится в DOM? то есть независимо от того, что пользователь делает с этим списком, элемент (0) всегда будет равен 1? – user1628206

1

Используя следующий код, который вы можете отправить обновление в PHP бэкэнд как пользователь изменяет порядок элементов в переднем конце:

$("#sortable").on("sortupdate", function() { 
    var dataArr = []; 
    $("#sortable li").each(function(idx, elem) { 
     dataArr[idx] = $(elem).html(); 
    }); 
    var dataStr = '{"newOrder":' + JSON.stringify(dataArr) + '}'; 
    $.ajax({ 
     url: "<url_to_php_file>", 
     data: dataStr 
    }); 
    // alert(dataStr); 
}); 

Пример в реальном времени (внешняя часть): here

Вам необходимо заменить <url_to_php_file> на путь ваш PHP-файл, который обрабатывает порядок элементов (т. сохраняя их в БД). Файл будет иметь доступ к определенному пользователю порядок в обычном PHP Array, используя json_decode($_POST["newOrder"]), т.е.

... 
$newOrder = json_decode($_POST["newOrder"]); 
for ($i = 0; $i < count($newOrder); $i++) { 
    echo("The item labeled '" . $newOrder[$i] . "' is placed by the user at index " . $i . ".\n"; 
    /* 1st item: index 0 */ 
    /* 2st item: index 1 */ 
    /* ... */ 
} 

Пример: Вы представить Сортируемый список для пользователя, содержащие элементы: item1, item2, item3 (в этом порядке).
Пользователь размещает item2 до item1, после чего на сервер отправляется вызов AJAX, массив ["item2", "item1", "item3"] (обратите внимание на порядок). Выше фрагмент кода будет эхо:

The item labeled 'item2' is placed by the user at index 0. 
The item labeled 'item1' is placed by the user at index 1. 
The item labeled 'item3' is placed by the user at index 2. 

(Конечно, вместо того, вторя ничего, вы бы обновить значение индекса поля в БД для каждого элемента или сделать что-то полезное.)

+0

Как получить доступ к элементам данных, которые были переданы через json? Скажем, попытаться вывести первый элемент массива после объявления $ value = json_decode ($ _ POST ["newOrder"]); – user1628206

+1

@ user1628206 Я обновил свой ответ на примере того, как получить доступ к данным на стороне сервера. Кроме того, обратите внимание, что мое предлагаемое решение является лишь иллюстрацией техники, и вы должны настроить его в соответствии с вашими конкретными требованиями. Например. вы можете не захотеть сделать вызов AJAX после каждого переупорядочения (который может быть отменен позже), но вместо этого пользователь может изменить порядок элементов, а затем нажать кнопку «Сохранить», которая вызывает вызов AJAX и т. д. – gkalpak

1

Вот что бы я сделал, и это, конечно, не самый чистый способ, но он должен работать.

Предполагается, что вы работаете со своими собственными страницами, а не с сценарием, в котором вы получаете страницу html через http-запрос на какой-либо внешний сайт (например, через CURL) и нуждаетесь в его анализе. DOMDocument отлично подходит для последнего случая. Это решение для первого, поскольку я предполагаю, что, поскольку вы работаете с javascript на стороне клиента, это, вероятно, ваша собственная страница (если вы не введете этот javascript на страницу после ее загрузки).

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

<form method="POST"> 
    <ul id="sortable"> 
    <li class="ui-state-default">1 
     <input id="the_list_item_1" name="the_list_item[]" type="text" value="1_0" style="display: none;"> 
    </li> 
    ... 
    </ul> 
</form> 

Значение фактическое значение этого элемента (пример имел их в диапазоне 1 - 12), и это положение разделенных подчеркивания (значение + «_» + позиция);

Список должен находиться внутри переменной формы, если вам нужно отправить список на сервер для обработки, когда пользователь выполнен. Однако, если вы намерены использовать Ajax для получения этих данных на сервере, это решение не обязательно (так как вы просто просто используете jquery для получения каждой пары позиций и значений и отправляете их непосредственно в свой вызов ajax).

Вам нужно будет обрабатывать эти входные теги, когда пользователь перетаскивает элементы и изменяет порядок списка. См. here, если вам нужно знать, как работать с сортируемыми событиями. Возможно, на обновление, для каждого элемента списка вызвать эту функцию с новым положением:

function update_pos(value,pos) 
{ 
    $("#the_list_item_"+value).val(value+"_"+pos); 
} 

Так на подчиненной формы, мы теперь на стороне PHP.

$list_items = $_POST["the_list_item"]; // This is basically an array of all the list_items, thanks to naming all the list items with "the_list_item[]", note the empty subscript (square braces). 

$ordered_list_items = array(); // Let's push them into an associative array. 

foreach($list_items as $li) 
{ 
    $li_split = explode("_",$li); 
    if(count($li_split) <= 0) 
    continue; // maybe you'd want to handle this situation differently, it really shouldn't happen at all though. Here, I'm just ignoring nonsensical values. 
    $item_id = $li_split[0]; 
    $pos = $li_split[1]; 
    $ordered_list_items[$item_id] = $pos; 
} 

// Then later you can shoot through this list and do whatever with them. 
foreach($ordered_list_items as $item_id => $pos) 
{ 
    // postgres perhaps. Insert if not already there, update regardless. 
    pg_query("insert into the_list_item (item_id,position) select '$item_id','$pos' where '$item_id' not in (select item_id from the_list_item where '$item_id' = item_id limit 1)); 
    pg_query("update the_list_item set position = '$pos' where item_id = '$item_id'"); 
} 

Конечно, все, что было сказано, в зависимости от ваших потребностей, возможно, потребуется перегрузить эти данные на страницу. Итак, зацикливаясь на результатах вашего db (возможно, для этого пользователя), вы должны вывести каждый list_item на место.

$list_items = pg_fetch_all(pg_query($sql)); // $sql needs to be the query to get the results. Probably should order by position ascending. 

$lic = count($list_items); 
?> 
<html> and stuff 

<form method="POST"> 
    <ul id="sortable"> 
<?php 
for($i = 0; $i < $lic; $i++) 
{ 
    $li = $list_items[$i]; 
    echo "<li class=\"ui-state-default\">".$li["item_id"]."<input id=\"the_list_item_".$li["item_id"]."\" name=\"the_list_item[]\" type=\"text\" value=\"".$li["item_id"]."_".$li["position"]."\" style=\"display: none;\"></li>"; 
} 
?> 
</ul> 
</form> 

 Смежные вопросы

  • Нет связанных вопросов^_^