Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello Experts,

I have page1.aspx in which I declared a div like below
XML
<div id="modal_PrdCddialog">
        </div>


In the same page of Update Panel, I have a textbox like below
<asp:TextBox ID="txtProdcode" runat="server" Width="100%"  onKeyPress="getfoc()"  MaxLength="15"  />


Then On Key Press event I have a Jquery function which Opens a new ASPX page

C#
function getfoc() {
           debugger;
           $("#modal_PrdCddialog").load("ProductCode.aspx", function () {
               $(this).dialog({
                   title: "Select the Product Code to fill the Tire size",
                   css:{border:'Yellow'},
                  autoOpen: true,
                   modal: true,
                   height: 350,
                   width: 450,
                   buttons: {
                            Close: function () {
                           $(this).dialog("close");
                       }
                   }
               }).prev(".ui-dialog-titlebar").css("background", "blue");

               });

       }



And the New ASPX page
ProductCode.aspx
has a three drop downs in which one value is based on the other.

Autopostback is True for all the Three dropdowns but selectedindexchanged event is not firing in Modal popup for NewASPX.
Instead if I open just the ProductCode.ASPX alone separately all the events are working perfectly.

I am not sure what I am missing.

Could someone help me with this please?
Posted
Updated 10-Aug-15 2:24am
v2

1 solution

The load method[^] will insert the loaded HTML into the current page. Any form submission would be sent to the current page, not the loaded page. You would likely receive an "invalid postback or callback argument" error, since the current page doesn't know about the controls from the product code page.

Try using an <iframe> to load the product code page instead:
HTML
<div id="modal_PrdCddialog">
    <!-- TODO: Set the width and height as required: -->
    <iframe frameborder="0" marginwidth="0" marginheight="0" width="450" height="300"></iframe>
</div>

JavaScript
function getfoc() {
    $("#modal_PrdCddialog iframe").attr({ src: "ProductCode.aspx" });
    $("#modal_PrdCddialog").dialog({
        title: "Select the Product Code to fill the Tire size",
        css: { border: 'Yellow' },
        autoOpen: true,
        modal: true,
        height: 350,
        width: 450,
        buttons: {
            Save: function(){
                debugger;
                var value = $(this).find("iframe").contents().find("#ddlProductCd").val();
                $("#txtProdcode").val(value);
                $(this).dialog("close");
                $(this).find("iframe").attr({ src: "" });
            },
            Close: function () {
                $(this).dialog("close")
                $(this).find("iframe").attr({ src: "" });
            }
        }
    }).prev(".ui-dialog-titlebar").css("background", "blue");
}
 
Share this answer
 
v2
Comments
sudevsu 10-Aug-15 11:37am    
I can definitely see that this is working. But my submit on Modal popup is not returning the value selected from dropdown after I added this code. Can you please suggest?
Richard Deeming 10-Aug-15 11:39am    
What does the javascript "submit" code look like?
Richard Deeming 10-Aug-15 12:18pm    
No, that's the code from the parent page to display the dialog. You presumably have some code in the popup page to send the selected value to the parent page?
sudevsu 10-Aug-15 12:22pm    
When I click on Save button on Pop up, I want the selected value to assign to the Textbox.
Richard Deeming 10-Aug-15 12:23pm    
OK, so what code have you written to do that?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900