Используйте метод сериализации jQuery UI .sortable, чтобы получить html отсортированных элементов в качестве значений

ProgramBox

Используйте метод сериализации jQuery UI .sortable, чтобы получить html отсортированных элементов в качестве значений

Post author:admin
Запись опубликована:18 февраля, 2023
Post category:Вопросы по программированию

#jquery #inline #jquery-ui-sortable #editing

#jquery #встроенный #jquery-ui-sortable #редактирование

Вопрос:

Я использую PHP, но проблема с Jquery — это проблема, с которой я сталкиваюсь. Не удается найти ответы после долгого поиска. Мои знания Ajax, Jquery ограничены. Это всего лишь тестовый скрипт, если он работает, я могу реализовать его в проекте.

Цель: изменить порядок списка с помощью автосохранения, но при этом его можно редактировать с помощью автосохранения.

Что работает: изменение порядка (без автосохранения), встроенное редактирование работает с автосохранением, но без скрипта «сортируемого списка»!

Проблема: при щелчке левой кнопкой мыши на элементе списка (li) его можно перетащить на новую позицию, но встроенное редактирование больше не работает!

Вопросы: Как решить проблему выше? Какие данные будут передаваться по ссылке $.post для новых позиций заказа? (Мне нужен идентификатор элемента и идентификатор из нового порядка). Будут ли оба передаваться по ссылке? Каждый

имеет идентификатор, который необходим, а не идентификатор из DIV.

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

Каждый маленький шаг — это шаг к великому решению. Кто мне поможет?

Сгенерированный HTML

 <html>
<head>
<script src="jquery-1.10.2.js"></script>
<script>
    function showEdit(editableObj) {
        $(editableObj).css("background","#FFF");
    } 

    function saveToDatabase(editableObj,column,id) {
        $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
        $.ajax({
            url: "saveedit.php",
            type: "POST",
            data:'column=' column 'amp;editval=' editableObj.innerHTML 'amp;id=' id,
            success: function(data){
                $(editableObj).css("background","#FDFDFD");
            }        
       });
    }
    </script>

<script type="text/javascript" src="inc_link_jquery-1.js"></script>
<script type="text/javascript" src="inc_link_jquery-ui-1.js"></script>  

<script type="text/javascript">
$(document).ready(function(){                  
    $(function() {
        $("#listorder ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
            var order = $(this).sortable("serialize")   'amp;action=orderlist'; 
                $.post("saveedit2.php", order); 
        }                                 
        });
    });
}); 
</script>   

</head>
<body>      
<br><br><br>

<div id="listorder">
<ul class="ui-sortable">
<li id=1><div contenteditable="true" onBlur="saveToDatabase(this,'question','1')" onClick="showEdit(this);">question 3</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','1')" onClick="showEdit(this);">answer 3<br></div></li>

<li id=2><div contenteditable="true" onBlur="saveToDatabase(this,'question','2')" onClick="showEdit(this);">question 1</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','2')" onClick="showEdit(this);">answer 1<br></div></li>

<li id=3><div contenteditable="true" onBlur="saveToDatabase(this,'question','3')" onClick="showEdit(this);">question 2</div>
<div contenteditable="true" onBlur="saveToDatabase(this,'answer','3')" onClick="showEdit(this);">answer 2<br></div></li>

</ul>
</div>


</body>
</html>

Ответ №1:

Проблема в том, что идентификаторы для ваших сортируемых lis должны быть отформатированы определенным образом, и вы не можете заполнить значения из html отсортированного элемента. Значение должно быть в id атрибуте.:

Из документации:

serialize( параметры)возвращает: Строка

Сериализует идентификаторы элементов сортируемого файла в строку формы / ajax для отправки. Вызов этого метода создает хэш, который можно добавить к любому URL-адресу, чтобы легко отправить новый заказ товара обратно на сервер.

Он работает по умолчанию, просматривая идентификатор каждого элемента в формате «setname_number» («key_value», возможно, было бы более уместно здесь, ИМХО), и он выдает хэш типа «setname [] = number amp; setname []= number».

Примечание: Если serialize возвращает пустую строку, убедитесь, что атрибуты id включают символ подчеркивания. Они должны быть в форме: «set_number»

Например, список из 3 элементов с атрибутами идентификаторов «foo_1», «foo_5», «foo_2» будет сериализован в «foo[] = 1 amp;foo[] = 5 amp;foo[] = 2».

Вы можете использовать подчеркивание, знак равенства или дефис для разделения набора и числа. Например, «foo = 1», «foo-1» и «foo_1» все сериализуются в «foo[] =1».

ПРИМЕЧАНИЕ:

Тем не менее, .sortable("serialize") действительно работает, только если у вас есть число или небольшой объем текста, который уже известен.

Вот пример того, как sortable("serialize") это работает:

Показать фрагмент кода

 $(".sortableList").sortable({
  scroll: true,
  axis: "y",
  containment: "parent",
  handle: $("div.sortableListTitleText").add("div.handle.move"),
  update: function() {
    var newList = $(".sortableList").sortable("serialize", {
      attribute: "itemid"
    });
  }
});

$("#listorder ul").sortable({
  opacity: 0.6,
  cursor: 'move',
  update: function(event, ui) {
    var incorrect = $(this).sortable("serialize");
    var correct = $(this).sortable("serialize",{attribute: "innerHTML"}); 
    console.log(incorrect);
    console.log(correct);
    
  }
});


function showEdit(editableObj) { 
  //....
}

function saveToDatabase(editableObj, column, id) { 
  //....
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div id="listorder">
  <ul class="ui-sortable">
    <li id="foo_1">
      <div contenteditable="true" onBlur="saveToDatabase(this,'question','1')" onClick="showEdit(this);">question 3</div>
      <div contenteditable="true" onBlur="saveToDatabase(this,'answer','1')" onClick="showEdit(this);">answer 3
        <br>
      </div>
    </li>

    <li id="foo_d">
      <div contenteditable="true" onBlur="saveToDatabase(this,'question','2')" onClick="showEdit(this);">question 1</div>
      <div contenteditable="true" onBlur="saveToDatabase(this,'answer','2')" onClick="showEdit(this);">answer 1
        <br>
      </div>
    </li>

    <li id="foo_5">
      <div contenteditable="true" onBlur="saveToDatabase(this,'question','3')" onClick="showEdit(this);">question 2</div>
      <div contenteditable="true" onBlur="saveToDatabase(this,'answer','3')" onClick="showEdit(this);">answer 2
        <br>
      </div>
    </li>

  </ul>
</div>

Поскольку вы используете настраиваемые div-файлы, которые являются динамическими и могут содержать любые символы, такие как = - _ и html, я бы посоветовал вам .sortable("serialize") вообще не использовать и instea перебирать элементы в сортируемом списке и вручную устанавливать пару ключей и значений для каждого элемента, а затем отправлять эту строку в свой ajax.

Вот как я бы это сделал:

 $("#listorder ul").sortable({
  opacity: 0.6,
  cursor: 'move',
  update: function(event, ui) {
       var params=['action=orderlist'];
      $(this).find(".ui-sortable-handle").each(function () {
            var $this=$(this);
            var key=$this.attr('id');
            var value=encodeURIComponent($this.html());  // you MUST encode this val since it may have chars thatll muck up the string
            var param = key '=' value;
            params.push(param); 
      });
      var paramsString=params.join('')
      console.log(paramsString);
    
    
		   $.ajax({
			  type: "POST",
			  url: "page.php",
			  data: paramsString,
			  success: function(response) { 
			   
			  },
			  error: function(xhr, status, error) { 
			  }
		   });
    
  }
});


function showEdit(editableObj) { 
  //....
}

function saveToDatabase(editableObj, column, id) { 
  //....
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div id="listorder">
  <ul class="ui-sortable">
    <li id="foo_1">
      <div contenteditable="true" onBlur="saveToDatabase(this,'question','1')" onClick="showEdit(this);">question 3</div>
      <div contenteditable="true" onBlur="saveToDatabase(this,'answer','1')" onClick="showEdit(this);">answer 3
        <br>
      </div>
    </li>

    <li id="foo_2">
      <div contenteditable="true" onBlur="saveToDatabase(this,'question','2')" onClick="showEdit(this);">question 1</div>
      <div contenteditable="true" onBlur="saveToDatabase(this,'answer','2')" onClick="showEdit(this);">answer 1
        <br>
      </div>
    </li>

    <li id="foo_3">
      <div contenteditable="true" onBlur="saveToDatabase(this,'question','3')" onClick="showEdit(this);">question 2</div>
      <div contenteditable="true" onBlur="saveToDatabase(this,'answer','3')" onClick="showEdit(this);">answer 2
        <br>
      </div>
    </li>

  </ul>
</div>

1. Мне нужен только идентификатор из <LI> . У <LI> есть идентификатор, div перемещаются, потому что они находятся внутри <LI> .

2. Смотрите мое обновление, я оговорился. Но ваши идентификаторы неправильно отформатированы для yes serialize. Идентификаторы должны содержать ключ и значение , подлежащие сериализации. Смотрите Пример из документов выше.

3. @FreeSpirit Я добавил пример, теперь вы понимаете, что я имею в виду?

4. На самом деле, я этого не вижу. Для меня это сложно. Я попробовал ваш код, и он перемещается, но отображается как второй список в одном из «основного» списка (LI). Я могу редактировать их, но цвет, который отображается после того, как я нажал для редактирования, остается, несмотря ни на что.

5. Поэтому, если я нажимаю на каждый элемент списка, он остается цветным. Также я не знаю, что это за console.log(paramsString); означает, это было для вашего теста? Но куда мне нужно поместить $.post(…); чем? Я вижу в вашем коде, что вы кодируете строку, поэтому я полагаю, что это предназначено для $.post(…); Верно?