Передача параметров в диалоговое окно jqueryui

Question

hi Мне нужно передать выбранное значение раскрывающегося списка в диалоговое окно jqueryui, когда пользователь нажимает на ссылку, например, , если пользователь выбирает продукт один и щелкает по ссылке, диалоговое окно должно всплывающее окно отображения продукта 1 выбран, можно отобразить диалоговое окно:

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

Этот вопрос я не в состоянии передать выбранное значение списка, я попытался с помощью AJAX JSON, чтобы передать его нет успех из-за недостатка знаний, Может ли кто-нибудь помочь мне или предоставить какие-либо предложения о том, как это сделать.

Благодаря

Answer 1

Я предполагаю, что вы хотите передать выбранное значение из выпадающего меню на другую страницу сервера с помощью Ajax и получить ответ и показать, что в диалоговом окне. Вот как я это сделаю.

$(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 
       }); 
      } 
     ); 
    }); 

}); 

И В myserverpage.aspx, Считайте значение из строки запроса продукта и возвращают соответствующий HTML-код, который вы хотите показать пользователю в диалоговом окне. Он будет работать, если вы правильно загрузили jQuery и jQuery UI на свою страницу.

Сценарий создаст div для всплывающего окна на лету. Вам не нужно добавлять одну страницу для этого.

Answer 2

Ваше выпадающий является частью вашей страницы будь то отображается или нет. Таким образом, вы можете манипулировать им так же, как и любой раскрывающийся список. Что-то вроде:

Установите значение так:

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

заселить текст #product, как это, на основе значения, выбранного из раскрывающегося списка:

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

Answer 3

Вы пробовали использовать метод .html()? Вы могли бы сделать что-то вроде:

$(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

Так как ваш на той же странице, вы можете получить доступ к DOM без необходимости 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

Во-первых, есть проблемы со сценарием в вашем вопросе.

• Документ подготовлен неправильно сформирован.
• Селектор входа в систему использует класс, и он должен быть идентификатором «a # login», но лучше, поскольку просто «#login» в качестве селектора id будет быстрее, чем тег.
• Я не понимаю, почему вы нарушаете диалог, и этот идентификатор даже не находится в вашей разметке.
• Я думаю, вам не нужно автоматически открывать диалоговое окно сначала, а затем после ввода новых значений выбора откройте его.

Вы хотите выбрать из списка, а затем динамически заполнить другой список в диалоговом окне.

Все это не так сложно, но требует некоторой доработки, чтобы заставить ее делать то, что вы пожелаете. Таким образом, я представляю этот образец с вашими заявленными желаниями.

Вы хотите улучшить это, чтобы удовлетворить свое окончательное предложение, вероятно, некоторые вещи ajax, чтобы заполнить список продуктов в диалоговом окне и т. Д., Но он должен вас начать.

См рабочей копии ниже здесь: 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"); 
    }); 
}); 

и разметка для моего «образца»:

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