सर्वर-साइड से jQuery ड्रॉपडाउन चेकलिस्ट को कैसे अपडेट करें?

Question

मैं एक एएसपी.Net वेबपृष्ठ पर काम कर रहा हूं जो jQuery ड्रॉपडाउन चेकलिस्ट (http://code.google.com/p/dropdown-check-list/) का उपयोग करेगा। मैं जावास्क्रिप्ट के साथ काफी अनुभवहीन हूं और पूरी तरह से jQuery के लिए नया हूं।

असल में, मेरा प्रश्न है: सर्वर-साइड से jQuery ड्रॉपडाउन चेकलिस्ट में चयनित आइटम को आप कैसे अपडेट करते हैं?

---

नोट: समाधान पर जानकारी के लिए प्रश्न के नीचे स्क्रॉल।

---

यहाँ कुछ पृष्ठभूमि आप मैं क्या कर रहा हूँ का एक बेहतर विचार देने के लिए ...

मैं एक jQuery DropdownChecklist जो डाला जा रहा है पृष्ठ लोड होने राशि है। जब कोई उपयोगकर्ता ड्रॉपडाउन चेकलिस्ट में कोई आइटम चुनता है, तो चयनित मान एकत्र किए जाते हैं और एक छिपे हुए इनपुट फ़ील्ड में संग्रहीत होते हैं, फिर एक पोस्टबैक किया जाता है, जो सर्वर को सर्वर नियंत्रण को अपडेट करने की अनुमति देता है। यह हिस्सा काम कर रहा है।

अब, मेरी समस्या यहां है। यह सर्वर नियंत्रण, जो वास्तव में उपयोगकर्ता नियंत्रण है ड्रॉपडाउन चेकलिस्ट में प्रत्येक चयनित आइटम के लिए "निकालें" बटन है। जब एक "निकालें" बटन क्लिक किया जाता है, तो उसे jQuery ड्रॉपडाउन चेकलिस्ट में संबंधित आइटम को चयनित नहीं किया जाना चाहिए। तो, अब तक मुझे यह नहीं पता है कि ऐसा कैसे किया जाए।

यहाँ कुछ प्रासंगिक कोड के टुकड़े है:

यहाँ मार्कअप है ...

<asp:ScriptManager ID="smScriptMgr" runat="server" /> 
<table> 
    <tr> 
      <td> 
       <select id="s1" multiple="true" runat="server" /> 
      </td> 
    </tr> 
    <tr> 
      <td> 
       <asp:UpdatePanel ID="UP1" runat="server"> 
        <ContentTemplate> 
         <input id="inpHide" type="hidden" runat="server" /> 
         <uc1:SelectedFilterBox ID="sfbFilters" runat="server" Width="200" /> 
        </ContentTemplate> 
       </asp:UpdatePanel> 
      </td> 
    </tr> 
</table> 

यहाँ जावास्क्रिप्ट ...

function DoPostback() { 
__doPostBack('UP1', ''); 
}; 

$(function() { 
$("#s1").dropdownchecklist({ forceMultiple: true, width: 200, textFormatFunction: function() { 
     return "Filters:"; 
     } 
}); 

$('#s1').change(function() { 
    var values = $(this).val(); 
    document.getElementById("inpHide").value = values; 
    DoPostback(); 
}); 
}); 

यहाँ usercontrol की मार्कअप है है ...

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="SelectedFilterBox.ascx.vb" 
    Inherits="SelectedFilterBox.SelectedFilterBox" %> 

<div> 
    <asp:Table ID="tblFilters" runat="server" Width="200"> 
     <asp:TableRow> 
      <asp:TableCell> 
       <asp:Repeater ID="rpFilters" runat="server" Visible="false"> 
        <ItemTemplate> 
         <table class="selectedFilter"> 
          <tr> 
           <td class="selectedFilterLeft"> 
            <%# Eval("filterName")%> 
           </td> 
           <td class="selectedFilterRight" align="right"> 
            <asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" /> 
           </td> 
          </tr> 
         </table> 
        </ItemTemplate> 
       </asp:Repeater> 
      </asp:TableCell> 
     </asp:TableRow> 
    </asp:Table> 
</div> 

यहाँ, का कोड-पीछे कुछ प्रासंगिक अंश है ...

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 

    If Not IsPostBack Then 
     'populate dropdown checklist 
     s1.Items.Add("Filter A") 
     s1.Items.Add("Filter B") 
     s1.Items.Add("Filter C") 
    Else 
     'update filters based on contents of hidden input field 
     UpdateFilters(inpHide.Value) 
    End If 

End Sub 

Private Sub UpdateFilters(ByVal filters As String) 
    Dim Filter() As String = Split(filters, ",") 
    Dim Index As Integer = 0 

    'clear existing filters 
    sfbFilters.Clear() 

    'loop through adding filters based on supplied string 
    For Each str As String In Filter 
     sfbFilters.Add(str, Index.ToString()) 
     Index += 1 
    Next str 
End Sub 

'this event occurs when a Remove button is clicked 
Protected Sub sfbFilters_FilterChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles sfbFilters.FilterChanged 
    'update hidden input field 
    inpHide.Value = UpdateHiddenField() 

    'update label, listing (filter, value) pairs 
    UpdateFilterValueSets() 
End Sub 

यहाँ एक JavaScript फ़ंक्शन करता है कि मैं क्या चाहते हो ...

function DeselectFilter(targetString){ 
    $("#s1 option").each(function(){ 
     if($(this).text() === targetString) $(this).attr("selected", ""); 
    }); 
    $("#s1").dropdownchecklist("refresh"); 
}; 

हालांकि मुझे यकीन है कि मैं फोन कर रहा हूँ नहीं कर रहा हूँ यह onClientClick घटना से ठीक है। क्या यह सही दिखता है?

<asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" OnClientClick='DeselectFilter("<%#Eval("filterName") %>");' /> 

टिप्पणी में कुछ पीछे और आगे के बाद, यहाँ समाधान है कि काम किया ...

<a onclick='DeselectFilter("<%#Eval("filterName") %>");'> 
    <asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' OnCommand="ibRemove_Click" /> 
</a> 

हम सरल समाधान निर्धारित है क्लाइंट साइड से जावास्क्रिप्ट समारोह कॉल करने के लिए था बल्कि इसे सर्वर-साइड से करने की कोशिश करने से पहले। ImageButton में ऑन क्लाइंटक्लिक ईवेंट है, लेकिन किसी कारण से यह काम नहीं करता है। हालांकि, क्लाइंट-साइड एंकर टैग में इमेजबटन को लपेटकर और इसके ऑनक्लिक ईवेंट का उपयोग करके आकर्षण हुआ।

आपकी सभी मदद के लिए, Coding Gorilla धन्यवाद।

Answer 1

इसलिए टिप्पणियों के माध्यम से लंबे समय से आगे के माध्यम से, समाधान क्लाइंट पक्ष में अचयन प्रक्रिया को स्थानांतरित करने के लिए निकला, और नियंत्रण पर क्लिक होने पर आइटम को अचयनित करने के लिए जावास्क्रिप्ट और jquery का उपयोग करें।