passing parameters to jqueryui dialog box

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.

Answer 2

Your drop-down is part of your page whether it's displayed or not. So you can manipulate it the same way you would any drop-down box. Something like:

Set the value like this:

$("#DropDownList1").val("product2");

Populate the text of #product like this, based on the value selected from the drop-down:

$("#product").text( $("#DropDownList1").val() );

Answer 3

Have you tried using the .html() method? You could do something like:

$(document).ready({

    $("a#login").click(function(e) {

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

        $("#product").dialog({

            height: 140,
            modal: true

        }).html($("#DropDownList1 option:selected").attr("Text"));

        e.preventDefault();

    });

});

See jsFiddle Demo

Answer 4

Since your on the same page you can access the DOM without the need of Ajax.

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

        $( "#dialog:ui-dialog" ).dialog( "destroy" );
        $( "#product .product-info" ).html('You have selected product ' +  $("#DropDownList1").val() + ' from the list.');
        $( "#product" ).dialog({
            height: 140,
            modal: true
     });
});


<div id="product" title="product-container">
    <div class="product-info"></div>
</div> 

Answer 5

First off, there are issues with the script in your question.

• The document ready is improperly formed.
• The login selector uses a class and it should be an id "a#login" but better as simply "#login" as an id selector will be faster than the tag.
• I cannot see why you do the dialog destroy, and that id is not even in your markup.
• I think you need to NOT auto open the dialog at first, then, after injecting in your new select values, open it.

You wish to pick from a list, then dynamically populate another list, inside a dialog.

None of this is too difficult, but requires some rework to make it do what you wish. Thus I present this sample with your stated desires.

You will want to enhance this to meet your final offering, likely some ajax stuff to populate the product list in the dialog etc., but it should get you started.

See a working copy of the below here: http://jsfiddle.net/MarkSchultheiss/u8TMh/1/

$(document).ready(function() {
    $("#productdialog").dialog({
        height: 140,
        modal: true,
        autoOpen: false
    });

    $('a#login').click(function() {
        var pick = $('#DropDownList1 option:selected').text();
        var pickVal = $('#DropDownList1 option:selected').val()
        $('#showem').text($('#DropDownList1 option:selected').text());
        var insertCount = 4;
        var optionList = '';
        while (insertCount--) {
            optionList = optionList + '<option value="' + pickVal + insertCount + '">' + pick + insertCount + '</option>';
        };
        $('#DialogList').html(optionList);
        $("#productdialog").dialog("open");
    });
});

and the markup for my "sample":

<select id="DropDownList1">
     <option value="product1">Camera</option>
     <option value="product2">DVD</option> 
     <option value="product3">LCD</option> 
 </select> 
 <a href="#" id="login">login</a> 
 <div id="product" title="product-container">show the selected dropdownlist </div>  
</div>
<div title='showproducts' id='productdialog' style="display:none"><div id='showem'></div>
 <select id="DialogList">
 </select> 
</div>