asked on

Open jquery dialog from another dialog and pass values between them via ajax

I have a jquery dialog that gets user input and passes values to another dialog, that when opened, is loading an aspx page.
Tha problem is that, in current code, the aspx page is loaded twice, and in second load the values passed in first load are lost.
What should I change in my code to load aspx page only once and pass the required values to it?
Thanks

$("#divPLVoiceInput").dialog(
                 {
                     bgiframe: true,
                     autoOpen: false,
                     draggable: true,
                     modal: true,
                     position: 'center',
                     width: 400,
                     height: 200,
                     title: 'Input P&L',
                     open: function(event, ui) {
                         $(this).load("PLVoceInput.aspx?customertype=ex");
                     },
                     buttons: 
                        [
                            {
                                text: "Ok",
                                click: function() {                                   
                                    var v1=$("#tbSubsidizeVal").val();
                                    var v2 = $("#tbSubsidizeSims").val();
                                    var v3 = $("#tbSimCost").val();
                                    var v4 = $("#tbOtherCostsSim").val();
                                    var v5 = $("#tbLPs").val();
                                    var v6 = $("#tbSalesComm").val();
                                    var v7 = $("#tbContractLength").val();
                                    var v8 = $("#tbPreTaxDiscountRate").val();
                                    $("#divPLVoiceOutput").css('display', 'block');
                                    $.ajax({
                                        url: "PLVoceOutput.aspx",
                                        type: "POST",
                                        data: { 
                                            valSubsidizeVal: v1,
                                            valSubsidizeSims: v2,
                                            valSimCosts: v3,
                                            valOtherCosts: v4,
                                            valLP: v5,
                                            valSalesComm: v6,
                                            valContractLength: v7,
                                            valPreTaxDiscountRate: v8
                                            }
                                        });
                                    $(this).dialog("close");
                                    $("#divPLVoiceOutput").dialog("open");
                                }
                            },
                             {
                                 text: "Cancel",
                                 click: function() {
                                     $(this).dialog("close");
                                 }
                             }
                         ]
                 });
            $("#divPLVoiceOutput").dialog(
                 {
                     bgiframe: true,
                     autoOpen: false,
                     draggable: true,
                     modal: true,
                     position: 'center',
                     width: 600,
                     height: 500,
                     title: 'Detalii P&L',
                     open: function(event, ui) {
                         $(this).load("PLVoceOutput.aspx");
                     },
                     buttons: [
                        {
                            text: "Ok",
                            click: function() { $(this).dialog("close"); }
                        }
                            ]
                 });

PLVoceOutput.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
--compute values and display them as labels text in PLVoceOutput.aspx page
}
}

Open in new window

Michel Plungjan

What is the intention of this?

$(this).dialog("close");
$("#divPLVoiceOutput").dialog("open");

Michel Plungjan

And what is the idea about this chunk of code?

$("#divPLVoiceOutput").dialog(
                 {
                     bgiframe: true,
                     autoOpen: false,
                     draggable: true,
                     modal: true,
                     position: 'center',
                     width: 600,
                     height: 500,
                     title: 'Detalii P&L',
                     open: function(event, ui) {
                         $(this).load("PLVoceOutput.aspx");
                     },
                     buttons: [
                        {
                            text: "Ok",
                            click: function() { $(this).dialog("close"); }
                        }
                            ]
                 });

Open in new window

Michel Plungjan

This can be consolidated

click: function() {                                   
                                    $("#divPLVoiceOutput").css('display', 'block');
                                    $.ajax({
                                        url: "PLVoceOutput.aspx",
                                        type: "POST",
                                        data: { 
                                            valSubsidizeVal: $("#tbSubsidizeVal").val(),
                                            valSubsidizeSims: $("#tbSubsidizeSims").val(),
                                            valSimCosts: $("#tbSimCost").val(),
                                            valOtherCosts: $("#tbOtherCostsSim").val(),
                                            valLP: $("#tbLPs").val(),
                                            valSalesComm: $("#tbSalesComm").val(),
                                            valContractLength: $("#tbContractLength").val(),
                                            valPreTaxDiscountRate: $("#tbPreTaxDiscountRate").val()
                                            }
                                        });
                                }

Open in new window

danielivanov2

ASKER

to answer to all questions, on click "Ok" I need first dialog to close and in the same time to open the second dialog with data gathered by ajax method, with parameters passed in from first dialog

your last solution is not working -the second dialog is not defined in your code) - $("#divPLVoiceOutput").dialog()

Michel Plungjan

I am sorry.

Your code does not make sense (to me at least)

I suggest you split it up in functions an pass objects between them

danielivanov2

ASKER

last version, working from your code, but now there is nothing displayed when opening divPLVoiceOutput dialog :(, despite that in Firebug the both GET requests are ok (code attached)

$("#divPLVoiceInput").dialog(
                 {
                     bgiframe: true,
                     autoOpen: false,
                     draggable: true,
                     modal: true,
                     position: 'center',
                     width: 400,
                     height: 200,
                     title: 'Input P&L',
                     open: function(event, ui) {
                         $(this).load("PLVoceInput.aspx?customertype=ex");
                     },
                     buttons:
                        [
                            {
                                text: "Ok",
                                click: function() {                                    
                                    $("#divPLVoiceOutput").css('display', 'block');
                                    $("#divPLVoiceOutput").dialog({
                                        bgiframe: true,
                                        autoOpen: false,
                                        draggable: true,
                                        modal: true,
                                        position: 'center',
                                        width: 600,
                                        height: 500,
                                        title: 'Detalii P&L',
                                        open: function(event, ui) {
                                            $.ajax({
                                                url: "PLVoceOutput.aspx",
                                                //type: "POST",
                                                data: {
                                                    valSubsidizeVal: $("#tbSubsidizeVal").val(),
                                                    valSubsidizeSims: $("#tbSubsidizeSims").val(),
                                                    valSimCosts: $("#tbSimCost").val(),
                                                    valOtherCosts: $("#tbOtherCostsSim").val(),
                                                    valLP: $("#tbLPs").val(),
                                                    valSalesComm: $("#tbSalesComm").val(),
                                                    valContractLength: $("#tbContractLength").val(),
                                                    valPreTaxDiscountRate: $("#tbPreTaxDiscountRate").val()
                                                }
                                            });
                                        },
                                        buttons: [
                                            {
                                                text: "Ok",
                                                click: function() { $(this).dialog("close"); }
                                            }
                                                ]
                                        });
                                    $("#divPLVoiceInput").dialog("close");
                                    $("#divPLVoiceOutput").dialog("open");                           
                            }
                        },
                             {
                                 text: "Cancel",
                                 click: function() {
                                     $(this).dialog("close");
                                 }
                             }
                         ]
                 });

Open in new window

Michel Plungjan

Ok, I had a look at .dialog and I think I understand what you are trying

can you please swap

$("#divPLVoiceInput").dialog("close");
$("#divPLVoiceOutput").dialog("open");

so they are

$("#divPLVoiceOutput").dialog("open");
$("#divPLVoiceInput").dialog("close");

since that might be where you lose the data

Michel Plungjan

You might even want to do return to getting the data before the ajax:

text: "Ok",
click: function() {
var inputData: {
valSubsidizeVal: $("#tbSubsidizeVal").val(),
valSubsidizeSims: $("#tbSubsidizeSims").val(),
valSimCosts: $("#tbSimCost").val(),
valOtherCosts: $("#tbOtherCostsSim").val(),
valLP: $("#tbLPs").val(),
valSalesComm: $("#tbSalesComm").val(),
valContractLength: $("#tbContractLength").val(),
valPreTaxDiscountRate: $("#tbPreTaxDiscountRate").val()
}
$("#divPLVoiceOutput").css('display', 'block');
$("#divPLVoiceOutput").dialog({
open: function(event, ui) {
$.ajax({
url: "PLVoceOutput.aspx",
data: inputData,

danielivanov2

ASKER

I have already done it, no change
the problem is not losing the data (attached from Firebug), but the PLVoceOutput.aspx content is not loaded by ajax in my second dialog

ASKER CERTIFIED SOLUTION

danielivanov2

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

danielivanov2

ASKER

found my own solution