Как правильно реализовать Ajax Передачу данных из ui-dialog в php обработчик?

Question

[Александр Соболев]

Здравствуйте!
Если можно, приведите пример js отправляющий данные на php обработку и из "условного div_а #dialog" c подгруженной в него ранее формой редактирования
Кусок примерного, не работающего правильно кода:

$('body').on('click','#edit_role', function(){ 
		
		$.ajax({
		  type: 'POST',
		  url: '/../../../functions.php',
		  data : { action : 'edit_role',role_id: this.getAttribute("role_id") },
		  success: function(response){
		  	$( "#ajax_result").html(response);
			$( "#edit_role_form" ).dialog({
		      resizable: false,
		      height: "auto",
		      width: 550,
		      modal: true,
		      buttons: {
		        "Сохранить изменения": function() {
		       console.log(role_id); //test_mode
		        },
		        "Отмена": function() {
		          $( this ).dialog( "close" );
		        }
		      }
		    });

		  } 
		});
	});

Простите, если вопрос покажется глуп.. форму редактирования без перезагрузок создать хочется. В JS не давно

Comments

[ThunderCat]

и что надо угадать?
Ни куска хтмл к этому коду, ни что работает не так...
Ошибки?
Не приходит ответ?
Не уходит запос?

[Александр Соболев]

ThunderCat:
div подгружается по клику

function edit_role(){
	if(isset($_POST['role_id'])){

		$role_id = $_POST['role_id']; $current_role = get_role_info($role_id);
		print '
		<div id="edit_role_form" style="display: none;" title="Редактирование роли">
		<p>Название роли: <input type="text" id="role_name" value="'.$current_role['name'].'"></p>
		<p>Право доступа: ';current_roles_list($role_id); echo'</p>
		<p>Описание роли:<br><textarea rows="5" cols="45" id="role_description">'.$current_role['description'].'</textarea></p>';
		
		
		echo'</div>';
	}
}

Я не понимаю как в success собрать с этого diva данные чтоб отправить их на обработку.
В консоль выходит такая штука:
[select#role_id, select#role_id, select#role_id, select#role_id, select#role_id, role_id: select#role_id]

Answer 1

[Юрий Есин]

$(document).on("submit", "#your_form", function (e) {
    var id = $("#your_form input[name='id']").val() >> 0;
    var login = $("#your_form input[name='login']").val();
    var request = {};

    if (id > 0) {
        request["id"] = id;
    }

    if (login) {
        request["login"] = login;
    }

    $.post("/handler.php", request).done(function (response) {
        if (response) {
             alert(response);
             return;
        }

        window.location.href = "/new/address/";
    });

    return false;
});

if (!isset($_POST["id"]) || !isset($_POST["login"])) {
    echo "ID и логин обязательны для заполнения";
    exit;
}

// Обработать $_POST["id"] и $_POST["login"], предусмотреть валидацию и экранирование спецсимволов

exit;

Используйте метод $.ajax лишь в случае, если вам важна тонкая настройка взаимодействия с сервером или, например, для добавления файлов в форму после их превалидации на клиенте. Для всех остальных случаев методов $.post и $.get более чем достаточно.

В данном примере я вешаю на событие onsubmit обработчик через $(document).on(), для того, чтобы событие отработало даже если форма была добавлена в DOM уже после загрузки документа. Затем я получаю два поля формы, первый привожу к int с помощью >> 0 (это самый простой и самый производительный способ привести переменную к типу int в JavaScript), а второе поле у меня string. Далее я формирую параметры запроса к серверному обработчику (скрипт /handler.php), предварительно проверив данные на присутствие в форме и корректность int (по моим условиям, он должен быть unsigned), после чего я отправляю данные на обработчик и жду ответа, ответ я получаю в коллбэке done(response), где обрабатываю его. Если ответ пришел - значит ошибка и вывожу в алерте на экран, иначе все валидно и делаю редирект на другой адрес. В конце обработчика формы я прописал return false, если этого не сделать, то форма автоматически перейдет по адресу, указанному в атрибуте action, что нарушит задуманную логику и браузер даже не успеет вывести алерт в случае ошибки.

С серверным скриптом обработки думаю все и так ясно и объяснять не стоит.

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