Question

hi i need to pass the selected dropdown list value to the jqueryui dialog box , when the user clicks on the link, for instance ,
if the use user selects product one and click the link , the dialog box should popup displaying product 1 selected, I can display the dialog box:

<script>
    $(document).ready({
     $('a.login').click(function(){

        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#product" ).dialog({
            height: 140,
            modal: true
        });
    });
    </script>

 <div class="login-homepage">
    <asp:DropDownList ID="DropDownList1" runat="server">
    <asp:ListItem Text="product1" Value="product1">Camera</asp:ListItem>
    <asp:ListItem Text="product2" Value="product2">DVD</asp:ListItem>
    <asp:ListItem Text="product3" Value="product3">LCD</asp:ListItem>
    </asp:DropDownList>
 <a href="#" id="login">login</a>
<div id="product" title="product-container">
    //show the selected dropdownlist
</div> 

The issue is i am not able to
pass the selected value of dropdown list, I tried using ajax json to pass it with no success due to lack of knowledge,
Can anyone assist me or provide any suggestions on how to work this out.

Thanks

Answer 1

I guess you want to pass the selected value from the dropdown to another server page using ajax and get the response and show that in the Dialog. This is how i will do that.

$(function(){

 $('a.login').click(function(){

     var selectedVal=$("#DropDownList1").val();
     var url="myserverpage.aspx?product="+selectedVal;

        var dialog = $("#dialog");
        if ($("#dialog").length == 0) {
            dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
        }
        dialog.load(
            url,
            {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({                       
                    close: function (event, ui) {                            
                        dialog.remove();
                    },
                    modal: true,
                    width: 460
                });
            }
        );
    }); 

});

And In myserverpage.aspx, Read the value from querystring product and return the relevant HTML markup you want to show to the user in the dialog. It will work if you have jQuery and jQuery UI loaded to your page properly.

The script will create a div for the popup itself on the fly. You don’t need to add one page for that.