Выполнить AJAX запрос в ui dialog box

[Asew]

Результат выполнения AJAX запроса - открытие диалогового окна с наполненным содержимым внешней страницы.

На внешней странице по клику на кнопку происходит формирование другого AJAX запроса. Как переписать это нажатие на кнопку, которая определена самим диалоговым окном.

Сам код,

$.ajax({
            url: 'test.php',
            method:"POST",
            data: {
               val_1:val_1

            },
            success: function (data){  
            $('#my_dialog').html(data).dialog('open');
   } 
	});

На странице test.php происходит сохранение по по кнопке:

$(".my_button").click(function () {
 
        $.ajax({
        url: 'save_new_val.php',
        type: 'POST',
        data: {val_2:val_2},
        success: function (data)
        {
         
}
    });
});

Сам диалог "my_dialog":

$("div#my-dialog").dialog({
         	modal: true,
            autoOpen: false,
            height: "auto",
   			width: "auto",
   			position: {
		  		my: "center",
		   		at: "center",
		   		of: window
	   		},
            buttons: [
        	{
	            text: "Сохранить",
	            click: function() {           

		    	}
          	},
        	{
	            text: "Отменить",
	            click: function() {
	            $(this).dialog("close");
	            
            }
        }]
        });

Я хочу чтоб по кнопке "Сохранить" диалогового окна происходило сохранение, а не по кнопке "my_button".

Загуглив нашел, что вроде надо как-то найти кнопку сохранить на внешней странице (в моем случае test.php) и на ней же прописать скрипт

var okBtn = $('#my-dialog.ui-dialog-buttonpane').children("button:contains('Сохранить')");

и дальше прописать сам ajax запрос (точнее фактически переписать). Но это не работает, возможно я делаю что-то не так. Просьба помочь.

[laimas]

Я хочу чтоб по кнопке "Сохранить" диалогового окна происходило сохранение, а не по кнопке "my_button".

Ну так оно и работает - первый запрос возвращает диалог, которым что-то сохраняется. Как без его получения можно что-то нажать в нем?

[Asew]

В том-то и дело, что я хочу задействовать кнопку, которая на стороне самого диалогового окна, а не кнопку, которую я могу сформировать и определить на нее, например, sav-инг параметров на стороне вызываемой ajax страницы. По коду, что я приложил видно, что я показываю ВСЕ что есть на странице в диалоговом окне. А вот как сделать sav-инг через кнопку диалогового окна возникает вопрос?!

p.s. прошу прощения за столь поздний ответ на сообщение, были проблемы со связью

[laimas]

Это $('#my_dialog').html(data).dialog('open'); помещает нечто в диалог, где data возвращенное сервером. Даже если исключить этот запрос, поместив в my_dialog сразу все необходимое, то прежде чем щелкнуть на "Сохранить" этот диалог нужно открыть. Фактически то, чего вы просите реализуемо только в случае постоянного открытого диалога. Либо я ничего не понял.

[Asew]

Диалог открывается по кнопке, т.е.

$('tr').on('click', 'tr .my_call_dialog', function(event) {
      $.ajax({
            url: 'test.php',
            method:"POST",
            data: {
                 
            },
            success: function (data){  
            $('#my-dialog').html(data).dialog('open'); 
        } 
	});
});

Потом идет приамбула в виде описания диалога:

$("div#my-dialog").dialog({

            modal: true,
            autoOpen: false,
            height: "auto",
            width: "auto",
            position: {
                my: "center",
                at: "center",
                of: window
            },
            buttons: [
            {
                text: "Сохранить",
                click: function() {          
                }
            },
            {
                text: "Отменить",
                click: function() {
                $(this).dialog("close");
            }
        }]
        });

Фактически нажали кнопку>вызвали диалог>в диалог положили ВСЕ, что есть на серверной странице>Хочу сохранить данные через кнопку "Сохранить" диалога самого, а не кнопки (если создать на серверной странице), через которую я могу сохранить данные на стороне серверной страницы. Это возможно сделать ?

[laimas]

Потом идет приамбула в виде описания диалога

Это не преамбула, а параметры диалога, которые определяются плагином. Открыли диалог, в нем кнопка Сохранить, сохраняйте, в чем проблема?

Вы либо не полностью задачу описываете, либо неверно ее описываете, либо просите невозможного. Если выбросить весь этот код и представить все проще, то можно сказать так:

На странице есть форма и она скрыта с кнопкой отправки "Отправить". Чтобы ее заполнить и отправить есть кнопка "Показать". То есть, пока форма скрыта нельзя нажать на кнопку "Отправить". Показали форму кнопкой "Показать" и только затем можно отправить ее кнопкой "Отправить". Тоже самое происходит и у вас в вашем коде.

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

[Asew]

Сам диалог позволяет создавать кнопки ЛЮБЫЕ в пределах своего окна, как раз цель состоит в том, чтобы программно использовать их для сохранения данных на серверной странице избегая собственно любые другие возможности. Если бы сам div был описан не на серверной странице, достаточно все просто - взять значения с любого поля и записать на кнопку "Сохранить" ajax запрос с сохранением в БД всех данных, здесь ситуация сложнее, из-за использования сторонней страницы.

[laimas]

взять значения с любого поля и записать на кнопку "Сохранить" ajax запрос с сохранением в БД всех данных

Берите, сохраняйте в чем проблема?

[Asew]

Проблема достать значение со сторонней страницы,т.е. если написать

$("div#my-dialog").dialog({
            modal: true,
            autoOpen: false,
            height: "auto",
            width: "auto",
            position: {
                my: "center",
                at: "center",
                of: window
            },
            buttons: [
            {
                text: "Сохранить",
                click: function() {         
                var val_2 = $('#get_val').val();
               }
            },
            {
                text: "Отменить",
                click: function() {
                $(this).dialog("close");
            }
        }]
        });

get_val - это id input поля на странице test.php. Так вот , значение не возьмется потому что не видит его диалог. Как к нему обратиться вот в чем проблема......

[laimas]

get_val - это id input поля на странице test.php

Тогда что такое $('#my-dialog').html(data), если data, это ответ сервера как раз со страницы test.php? Если среди ответа сервера будет и этот ID и помещен в поле get_val, и это поле гарантированно доступно в обработчике события var val_2 = $('#get_val').val();, значит все будет ОК. Правда что может дать обработчик если он кроме как присваивания значения этого поля переменной ничего не делает, а переменная то локальная.