У меня есть таблица, которая выводит все мои контакты через цикл while из моей базы данных.
мой синтаксис выглядит следующим образом:
SELECT * FROM contacts WHERE id = $_SESSION['user_id'] ORDER BY name ASC LIMIT 5 который извлекает все мои данные и дает мне 5 результатов.
Теперь моя цель состоит в том, чтобы иметь небольшую кнопку, которая открывает окно модели с jquery (это я могу самостоятельно управлять) с формой, запрашивающей у пользователя ввод числа, после чего этот номер будет отправлен через сообщение или получить значение $ PHP_SELF и обновить локальную переменную с номером, введенным пользователем, то эта переменная будет использоваться для обновления базы данных для увеличения или уменьшения значения LIMIT.
Я просмотрел всю сеть (с помощью google), чтобы искать отправку формы с использованием AJAX, но все примеры, которые я нашел, не работают для меня.
Когда пользователь отправляет номер, а запрос sql выполняется и обновляется, чтобы отображаемая таблица динамически обновлялась в соответствии с новым значением LIMIT, не обновляя страницу для пользователя.
мой код jquery:
(document).ready(function(){ $("form#form").submit(function() { // we want to store the values from the form input box, then send via ajax below var val = $('input[name=new_value]').attr('value'); $.ajax({ type: "post", url: "process.php", data: "val="+ val, cache: false, success: function(){ $('form#form').hide(function(){$('.success').fadeIn();}); } }); return false; }); }); $(document).ready(function(){ $("form#form").submit(function() { // we want to store the values from the form input box, then send via ajax below var val = $('input[name=new_value]').attr('value'); $.ajax({ type: "post", url: "process.php", data: "val="+ val, cache: false, success: function(){ $('form#form').hide(function(){$('.success').fadeIn();}); } }); return false; }); });
то мой php-код:
$new_val = $_POST['new_val']; $_val = "UPDATE `settings` SET `display_limit` = {$new_val} WHERE `user_id` = {$_SESSION['user_id']}"; mysql_query($_val) or die(mysql_error());
и моя форма проста:
какие-либо предложения? Я еще не пришел к тому, как динамически обновлять мою отображаемую таблицу, поэтому, если кто-нибудь может указать мне в правильном направлении или предоставить некоторую помощь, которая была бы потрясающей.
благодаря
РЕДАКТИРОВАТЬ:
Вот обновленный сценарий jquery, над которым я работал, я могу отправить форму успешно! но моя единственная проблема заключается в том, что я не вижу изменений до тех пор, пока страница не будет обновлена с поражениями в целях использования AJAX … вздох
как теперь я могу обновить и обновить свой #results div с содержимым отправки формы?
$(document).ready(function() { var options = { url: 'process.php', type: 'post', //dataType: 'json', target: '#last_five_sellers', success: success }; // bind to the form's submit event $('#form').submit(function() { // inside event callbacks 'this' is the DOM element so we first // wrap it in a jQuery object and then invoke ajaxSubmit $(this).ajaxSubmit(options); // !!! Important !!! // always return false to prevent standard browser submit and page navigation return false; }); function success(responseText, $form) { $("form#form").hide(); $(".success").fadeIn(); } });
В вашем php-коде, где вы выполняете обновление, вы можете эхом отослать свои контакты в html-формате. Тогда это вернет вашу функцию успеха в jquery.
success: function(){ $('form#form').hide(function(){$('.success').fadeIn();}); }
Функция имеет данные параметров, которые html-формат вы эхом в php. пример
success: function(data){ $('form#form').hide(function(){$('.success').fadeIn();}); $(data).appendTo('#result'); }
Вам нужно понять поток запроса. Как только скрипт php запускается, то есть он выполняется. Если вы планируете отправить обратно на ту же страницу, это будет новый запрос и новое исполнение этого скрипта. Теперь вы можете добавить к этому сценарию специальный случай, чтобы вернуть необходимые данные в код jQuery, но это грязная IMO. Я бы предпочел иметь отдельный скрипт для обработки этой функциональности. Это можно рассматривать как веб-сервис.
Итак, когда вы переходите на эту страницу в браузере, она будет отображать 5 контактов (или w / e по умолчанию у вас в предложении LIMIT). Когда вы нажимаете значок, чтобы отображать больше контактов, вы используете jQuery для отправки запроса GET на эту страницу «веб-службы» (это действительно должно быть GET, поскольку вы извлекаете данные, а не отправляете новые данные). Тогда это будет список контактов, которые вы используете для обновления отображения на странице, используя jQuery / JavaScript.
Как отметил Кодлер, выход из этой «веб-службы» может быть HTML, который вы просто используете для замены существующего HTML, который отображает контакты. (Это было бы предпочтительным способом. Вы почти всегда хотите делать столько на сервере, сколько сможете.)
Похоже, ваш код jQuery дублируется – нет необходимости связывать событие submit формы дважды. Кроме того, в первом блоке jQuery отсутствует начальный знак доллара («$»). И, насколько я знаю, .hide() не поддерживает передачу обратного вызова через первый параметр. В документации API jQuery она написана как .hide( duration, [ callback ] ) .
Я бы написал:
$(function(){ $("form#form").submit(function(){ // we want to store the values from the form input box, then send via ajax below $.ajax({ type: "post", url: "process.php", data: "val=" + $("input[name=new_value]").val(), cache: false, success: function(){ $("form#form").hide(); $('.success').fadeIn(); } }); return false; }); });
Теперь, если вы хотите динамически обновлять таблицу результатов, самый простой способ – просто заменить всю вещь обновленным HTML. Например, если вы изменили свой PHP-скрипт (process.php), чтобы после обновления display_limit он выводил новую таблицу результатов, вы могли бы написать что-то вроде (при условии, что ваша таблица результатов является table#results ):
$(function(){ $("form#form").submit(function(){ // we want to store the values from the form input box, then send via ajax below $.ajax({ type: "post", url: "process.php", data: "val=" + $("input[name=new_value]").val(), cache: false, success: function(data){ $("form#form").hide(); $(".success").fadeIn(); $("#results").replaceWith(data); } }); return false; }); });
Вам просто нужно убедиться, что ваш скрипт выводит только HTML.
Вопреки тому, что говорит Джордж выше, HTML определенно будет работать для этой цели, но я думаю, что идеальным методом является отправка только данных (минус структура / презентация) в формате JSON или XML, а затем использование JavaScript для построения HTML; вы можете сэкономить много полосы пропускания таким образом и в конечном итоге создать гораздо более гибкое приложение.
РЕДАКТИРОВАТЬ
Вот пример мини-JSON.
JavaScript:
$(function(){ $("#form").submit(function(){ var val = $("input[name=new_value]").val(); $.getJSON("process.php?val=" + val, function(data){ $("#results").empty(); $(data.rows).each(function(){ $("#results").append('<tr><td>' + this.column_a + '</td><td>' + this.columbn_b + '</td></tr>'); }); }); return false; }); });
PHP (process.php):
[assuming you already have a result/rows called $result] $json = array('rows' => array()); while ($row = mysql_fetch_assoc($result)) { $json['rows'][] = $row; } echo json_encode($json);
Теперь, предоставленный, я не тестировал этот код вообще, но он должен дать вам суть этого.