Ottenere l'ID di un oggetto ASP incorporato usando JavaScript e jQuery

Question

Sto usando jQuery per provare ad attivare un metodo quando un ASP.NET (2.0) l'evento di modifica dell'elenco a discesa è gestito da jQuery. Il problema è che l'elenco a discesa si trova all'interno di una griglia e anche solo quando un utente ha deciso di modificare una riga all'interno di quella griglia.

Penso di aver raccolto l'oggetto usando un blocco di codice ASP, ma il problema è che quando la pagina carica per la prima volta l'indice di modifica della riga non esiste e genera un errore. Anche l'inserimento del blocco all'interno di un'istruzione IF non funziona.

$(document).ready(function() //when DOM is ready, run containing code
{
    <% if (grvTimeSheets.EditIndex > -1) {%>
        $(#<%=grvTimeSheets.Rows[grvTimeSheets.EditIndex].FindControl("ddlClients").ClientID %>).change(function() {
             $(#<%= grvTimeSheets.ClientID %>).block({ message: null }
        });
}
);
<% } %>

È un tentativo che ho fatto e ho anche provato a mettere il codice ASP dell'istruzione IF fuori dal blocco JavaScript. Non funziona neanche.

Come posso applicare l'evento jQuery alla casella di riepilogo a discesa? Idealmente il più conciso possibile.

---

Grazie per la risposta, ma no, non funziona :(. Il codice JavaScript sembra non essere emesso ... Confuso ...

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
<script type="text/javascript">
    $(document).ready(function() //When DOM is ready, run the containing code
    {

    }
    );
</script>

È l'output. Anche se questo è il codice:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
<script type="text/javascript">
    $(document).ready(function() //when DOM is ready, run containing code
    {<% if (grvTimeSheets.EditIndex > -1) {%>
        var id = '#<%=grvTimeSheets.Rows[grvTimeSheets.EditIndex].FindControl("ddlClients").ClientID %>';
        $(id).change(function() {
             $(id).block({ message: null }
        });
     <% } %>
    }
    );
</script>

Lo stava facendo anche prima, facendomi impazzire.

---

Mi dispiace, potresti renderlo leggermente più chiaro. Ho provato a definire l'intera cosa nel codice dietro così:

DropDownList ddl (DropDownList)grvTimeSheets.Rows[grvTimeSheets.EditIndex].FindControl("ddlClients");
if (ddl != null)
{
    ClientScriptManager csm = Page.ClientScript;
    Type cstype = this.GetType();
    String csname1 = "PopupScript";

    string script = @"
    <script language='javascript' type='text/javascript'>
    $(#" + ddl.ClientID + ").change(function() { $(" + grvTimeSheets.ClientID + ").blockUI({ message: null }});} </script>";
          csm.RegisterStartupScript(cstype, csname1, script, true);
}

È quello che intendevi?

A proposito, quanto sopra non ha funzionato. Nessun errore, solo nessun evento ha funzionato.

Answer 1

Un paio di cose qui.

1. Devi racchiudere i selettori tra virgolette quando li passi alla funzione $ () . Lo snippet di codice sopra genera qualcosa come $ (# some-generated-id) , che non funzionerà.
2. Il parentesi graffa di chiusura per il lato server se l'istruzione era al di fuori della funzione già. Deve essere nidificato allo stesso livello dell'apertura if.

Prova questo:

$(document).ready(function() //when DOM is ready, run containing code
{
  <% if (grvTimeSheets.EditIndex > -1) {%>
      var id = '#<%=grvTimeSheets.Rows[grvTimeSheets.EditIndex].FindControl("ddlClients").ClientID %>';
      $(id).change(function() { 
           $(id).block({ message: null }
        }); 
 <% } %>
}
);

Se non funziona, vai avanti e incolla anche il javascript generato.

Answer 2

Usa questo:

cs.RegisterClientScriptBlock(cstype, csname, cstext2.ToString(), False)

È falso non creare i tag di script poiché li si stanno includendo. La documentazione MSDN è errata nel modo in cui spiega il flag.

Inoltre, inserisci l'ID client dei tuoi controlli in variabili separate dal codice sottostante, non jQuery codice.

Quindi usa le variabili che contengono gli ID invece nel codice jQuery.

Answer 3

All'interno del blocco di script creato nel codice dietro:

string script = @"<script type=text/javascript> var myControlId = '" + ddl.ClientId  "';") + "</script>"

Non ho verificato questa sintassi, ma dovrebbe essere vicina. Puoi aggiungere tu la sintassi aggiuntiva per grvTimeSheets.ClientID . Se riesci a farlo funzionare, potresti volerlo modificare per creare un array JavaScript e archiviare ClientId in quel modo, quindi hai solo una variabile JavaScript globale con cui devi lavorare.

Answer 4

Un'altra opzione è dare semplicemente l'elemento che stai cercando un nome di classe che ne descriva il comportamento. Quindi il tuo codice jQuery diventa davvero chiaro:

$(function() {
    $("select.yourMarkerClass").change(....);
});

Se non c'è riga di modifica, questo codice non fa nulla. Se è presente un elemento corrispondente al selettore, otterrai il nuovo comportamento aggiunto.

Answer 5

Se non si utilizza lo stesso ID altrove nella pagina, è possibile contrastare ASP. UniqueID di NET con uno dei selettori avanzati di jQuery:

$('[id$=ddlClients]')

Corrisponde solo alla fine della stringa id anziché all'intero. Tieni presente che se il controllo è presente più volte all'interno di righe diverse, corrisponderà a tutte le istanze.

Vedi Selettori per altri esempi.

Answer 6

Ho usato Page.ClientScript proprietà per registrare un blocco di script per contenere tutti gli ID a cui devo accedere con jQuery.

Ecco un esempio del mio JavaScript in un file esterno:

var myFancySelector = '#' + myControlId;
selectedValue = $(myFancySelector).val();

myControlId è definito dal codice dietro e registerd in ClientScriptBlock.

Answer 7

La chiave può essere qualsiasi cosa tu voglia, tuttavia dovrebbe essere unica.

Answer 8

Proverò di più dopo il fine settimana. Questo era il codice, tuttavia:

DropDownList ddl = (DropDownList)grvTimeSheets.Rows[grvTimeSheets.EditIndex].FindControl("ddlClients");
if (ddl != null)
{
    ClientScriptManager csm = Page.ClientScript;
    Type cstype = this.GetType();
    String csname1 = "PopupScript";

    string script = @"
    <script language='javascript' type='text/javascript'>
    jQuery(#" + ddl.ClientID + ").change(function() { $(" + grvTimeSheets.ClientID + ").blockUI({ message: null }});} </script>";
    csm.RegisterStartupScript(cstype, csname1, script, false);

Answer 9

Perché hai un menu a discesa in ogni riga. Ogni menu a discesa avrà un ID client univoco, quindi suggerisco di fare ciò che Ben ha suggerito e utilizzare il selettore di classi poiché è la soluzione più semplice.

Oppure puoi creare una funzione JavaScript sul tuo clic di modifica e quindi ottenere l'ID client univoco del tuo menu a discesa in quella riga che viene modificata.

Mi dispiace, avrei dovuto leggere il tuo codice più da vicino.