We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

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

Medium Priority
861 Views
Last Modified: 2012-05-11
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

Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
What is the intention of this?

$(this).dialog("close");
$("#divPLVoiceOutput").dialog("open");
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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 PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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

Author

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()
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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

Author

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

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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 PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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,

Author

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
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
found my own solution
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.