Come posso ottenere jQuery per selezionare gli elementi con a. (punto) nel loro ID?

Question

Date le seguenti classi e il metodo di azione del controller:

public School
{
  public Int32 ID { get; set; }
  publig String Name { get; set; }
  public Address Address { get; set; }
}

public class Address
{
  public string Street1 { get; set; }
  public string City { get; set; }
  public String ZipCode { get; set; }
  public String State { get; set; }
  public String Country { get; set; }
}

[Authorize(Roles = "SchoolEditor")]
[AcceptVerbs(HttpVerbs.Post)]
public SchoolResponse Edit(Int32 id, FormCollection form)
{
  School school = GetSchoolFromRepository(id);

  UpdateModel(school, form);

  return new SchoolResponse() { School = school };
}

E il seguente modulo:

<form method="post">
  School: <%= Html.TextBox("Name") %><br />
  Street: <%= Html.TextBox("Address.Street") %><br />
  City:  <%= Html.TextBox("Address.City") %><br />
  Zip Code: <%= Html.TextBox("Address.ZipCode") %><br />
  Sate: <select id="Address.State"></select><br />
  Country: <select id="Address.Country"></select><br />
</form>

Sono in grado di aggiornare sia l'istanza della Scuola sia il membro Indirizzo della scuola. Questo è abbastanza carino! Grazie al team ASP.NET MVC!

Tuttavia, come posso usare jQuery per selezionare l'elenco a discesa in modo da poterlo pre-compilare? Mi rendo conto che potrei fare questo lato server ma ci saranno altri elementi dinamici sulla pagina che influenzano l'elenco.

Quanto segue è quello che ho finora e non funziona poiché i selettori non sembrano corrispondere agli ID:

$(function() {
  $.getJSON("/Location/GetCountryList", null, function(data) {
    $("#Address.Country").fillSelect(data);
  });
  $("#Address.Country").change(function() {
    $.getJSON("/Location/GetRegionsForCountry", { country: $(this).val() }, function(data) {
      $("#Address.State").fillSelect(data);
    });
  });
});

Answer 1

Da Google Gruppi :

  

Usa due barre rovesciate prima di ogni carattere speciale.

     

Una barra rovesciata in un selettore jQuery sfugge al carattere successivo. Ma tu hai bisogno   due perché la barra rovesciata è anche il carattere di escape per JavaScript   stringhe. La prima barra rovesciata sfugge alla seconda, dandone una reale   barra rovesciata nella stringa - che quindi sfugge al carattere successivo per jQuery.

Quindi, immagino che tu stia guardando

$(function() {
  $.getJSON("/Location/GetCountryList", null, function(data) {
    $("#Address\\.Country").fillSelect(data);
  });
  $("#Address\\.Country").change(function() {
    $.getJSON("/Location/GetRegionsForCountry", { country: $(this).val() }, function(data) {
      $("#Address\\.State").fillSelect(data);
    });
  });
});

Scopri anche Come faccio a selezionare un elemento da un ID che ha caratteri usati nella notazione CSS? nelle FAQ di jQuery.

Answer 2

Non è possibile utilizzare un selettore ID jQuery se l'id contiene spazi. Usa un selettore di attributi:

$('[id=foo bar]').show();

Se possibile, specificare anche il tipo di elemento:

$('div[id=foo bar]').show();

Answer 3

Fuga per Jquery:

function escapeSelector(s){
    return s.replace( /(:|\.|\[|\])/g, "\\$1" );
}

esempio di utilizzo:

e.find('option[value='+escapeSelector(val)+']')

maggiori informazioni qui .

Answer 4

Il Release Candidate di ASP.NET MVC appena rilasciato risolto questo problema, ora sostituisce i punti con caratteri di sottolineatura per l'attributo ID.

<%= Html.TextBox("Person.FirstName") %>

Rendering in

<input type="text" name="Person.FirstName" id="Person_FirstName" />

Per ulteriori informazioni, consultare le note di rilascio, a partire da pagina 14.

Answer 5

Questo è documentato in documenti jQuery Selectors :

  

Per utilizzare uno qualsiasi dei meta-caratteri (come   !"#$%&'()*+,./:;<=>?@[\]^`{|}~) come parte letterale di un nome, deve   essere scappato con due barre rovesciate: \\. Ad esempio, un elemento con   id="foo.bar", può utilizzare il selettore $("#foo\\.bar").

In breve, aggiungere il prefisso . con $('#Address.Country') come segue:

$("#Address\\.Country")

Perché <div id="Address" class="Country"> non funziona nel mio ID?

Il problema è che \\. ha un significato speciale, la stringa seguente è interpretata come un selettore di classe. Quindi <div id="Address.Country"> corrisponderebbe a \.

Se sfuggito a "#Address\.Country", il punto verrà trattato come un testo normale senza alcun significato speciale, corrispondente all'ID desiderato $().

Questo vale per tutti i caratteri "#Address.Country" che altrimenti avrebbero un significato speciale come selettore in jQuery. Basta anteporre <=> per trattarli come testo normale.

Perché 2 <=>?

Come indicato nella risposta di bdukes, c'è un motivo per cui abbiamo bisogno di 2 <=> caratteri. <=> sfuggirà al seguente carattere in JavaScript. Se JavaScript interpreta la stringa <=>, vedrà <=>, interpretarla nel senso che prende letteralmente il seguente carattere e rimuovi quando la stringa viene passata come argomento per <=>. Ciò significa che jQuery vedrà comunque la stringa come <=>.

È qui che entra in gioco il secondo <=>. Il primo dice a JavaScript di interpretare il secondo come un carattere letterale (non speciale). Ciò significa che il secondo verrà visualizzato da jQuery e comprenderà che il seguente <=> carattere è un carattere letterale.

Accidenti! Forse possiamo visualizzarlo.

//    Javascript, the following \ is not special.
//         | 
//         |
//         v    
$("#Address\\.Country");
//          ^ 
//          |
//          |
//      jQuery, the following . is not special.

Answer 6

Usando due barre rovesciate & # 180; s ok, & # 180; s funziona. Ma se stai usando un nome dinamico, intendo un nome variabile, dovrai sostituire i caratteri.

Se non si & # 180; t wan & # 180; t per modificare i nomi delle variabili è possibile farlo:

var variable="namewith.andother";    
var jqueryObj = $(document.getElementById(variable));

e di quanto tu abbia il tuo oggetto jquery.

Answer 7

Solo informazioni aggiuntive: Controlla questo numero ASP.NET MVC # 2403 .

Fino a quando il problema non viene risolto, utilizzo i miei metodi di estensione come Html.TextBoxFixed, ecc. che sostituisce semplicemente i punti con caratteri di sottolineatura nell'attributo id (non nell'attributo name), in modo da usare jquery come $ ( quot; #Address_Street ") ma sul server è come Address.Street.

Segue il codice di esempio:

public static string TextBoxFixed(this HtmlHelper html, string name, string value)
{
    return html.TextBox(name, value, GetIdAttributeObject(name));
}

public static string TextBoxFixed(this HtmlHelper html, string name, string value, object htmlAttributes)
{
    return html.TextBox(name, value, GetIdAttributeObject(name, htmlAttributes));
}

private static IDictionary<string, object> GetIdAttributeObject(string name)
{
    Dictionary<string, object> list = new Dictionary<string, object>(1);
    list["id"] = name.Replace('.', '_');
    return list;
}

private static IDictionary<string, object> GetIdAttributeObject(string name, object baseObject)
{
    Dictionary<string, object> list = new Dictionary<string, object>();
    list.LoadFrom(baseObject);
    list["id"] = name.Replace('.', '_');
    return list;
}

Answer 8

Ho risolto il problema con la soluzione fornita da jquery docs

La mia funzione:

//funcion to replace special chars in ID of  HTML tag

function jq(myid){


//return "#" + myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" );
return myid.replace( /(:|\.|\[|\]|,)/g, "\\$1" );


}

Nota: rimuovo il " # " perché nel mio codice concedo l'ID con un altro testo

Tipo di carattere: Jquery Docs seleziona l'elemento con caratteri speciali