• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 846
  • Last Modified:

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

0
danielivanov2
Asked:
danielivanov2
  • 6
  • 5
1 Solution
 
Michel PlungjanIT ExpertCommented:
What is the intention of this?

$(this).dialog("close");
$("#divPLVoiceOutput").dialog("open");
0
 
Michel PlungjanIT ExpertCommented:
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

0
 
Michel PlungjanIT ExpertCommented:
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

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
danielivanov2Author Commented:
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()
0
 
Michel PlungjanIT ExpertCommented:
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
0
 
danielivanov2Author Commented:
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

0
 
Michel PlungjanIT ExpertCommented:
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
0
 
Michel PlungjanIT ExpertCommented:
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,
0
 
danielivanov2Author Commented:
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 firebug pic
0
 
danielivanov2Author Commented:
I have finally found the solution, in code attached for future references
thanks anyway mpulungjan for your kindness!
best regards
$("#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');
                                    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").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?" + inputData);
                                        },
                                        buttons: [
                                            {
                                                text: "Ok",
                                                click: function() { $(this).dialog("close"); }
                                            }
                                                ]
                                    });
                                    $("#divPLVoiceOutput").dialog("open");
                                    $("#divPLVoiceInput").dialog("close");
                                }
                            },
                             {
                                 text: "Cancel",
                                 click: function() {
                                     $(this).dialog("close");
                                 }
                             }
                         ]
                 });

Open in new window

0
 
danielivanov2Author Commented:
found my own solution
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now