¿Cómo consigo jQuery para seleccionar elementos con a. (punto) en su identificación?

Question

Dadas las siguientes clases y método de acción del controlador:

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

Y la siguiente forma:

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

Puedo actualizar tanto la instancia de la escuela como el miembro de la dirección de la escuela. ¡Esto es bastante bueno! ¡Gracias al equipo ASP.NET MVC!

Sin embargo, ¿cómo uso jQuery para seleccionar la lista desplegable para poder rellenarla previamente? Me doy cuenta de que podría hacer este lado del servidor, pero habrá otros elementos dinámicos en la página que afectarán la lista.

Lo siguiente es lo que tengo hasta ahora, y no funciona ya que los selectores no parecen coincidir con los 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

De Grupos de Google :

  

Use dos barras invertidas antes de cada carácter especial.

     

Una barra invertida en un selector jQuery escapa al siguiente carácter. Pero tu necesitas   dos de ellos porque la barra diagonal inversa también es el carácter de escape para JavaScript   instrumentos de cuerda. La primera barra diagonal inversa escapa a la segunda, dándole una real   barra invertida en su cadena, que luego escapa al siguiente carácter para jQuery.

Entonces, supongo que estás mirando

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

También consulte ¿Cómo selecciono un elemento mediante una ID que tiene caracteres utilizados en la notación CSS? en las preguntas frecuentes de jQuery.

Answer 2

No puede usar un selector de id jQuery si el id contiene espacios. Use un selector de atributos:

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

Si es posible, especifique también el tipo de elemento:

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

Answer 3

Escápelo por Jquery:

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

ejemplo de uso:

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

más información aquí .

Answer 4

El Release Candidate de ASP.NET MVC que se acaba de lanzar solucionó este problema, ahora reemplaza los puntos con guiones bajos para el atributo ID.

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

Renders a

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

Para obtener más información, vea las notas de la versión, comenzando en la página 14.

Answer 5

Esto está documentado en jQuery Selectors docs :

  

Para usar cualquiera de los metacaracteres (como   !"#$%&'()*+,./:;<=>?@[\]^`{|}~) como parte literal de un nombre, debe   escapar con dos barras invertidas: \\. Por ejemplo, un elemento con   id="foo.bar", puede usar el selector $("#foo\\.bar").

En resumen, prefije el . con $('#Address.Country') de la siguiente manera:

$("#Address\\.Country")

¿Por qué <div id="Address" class="Country"> no funciona en mi ID?

El problema es que \\. tiene un significado especial, la siguiente cadena se interpreta como un selector de clase. Entonces <div id="Address.Country"> coincidiría con \.

Cuando se escapó como "#Address\.Country", el punto se tratará como texto normal sin importancia especial, coincidiendo con la ID que desee $().

Esto se aplica a todos los caracteres "#Address.Country" que de otro modo tendrían un significado especial como selector en jQuery. Simplemente anteponga <=> para tratarlos como texto normal.

¿Por qué 2 <=>?

Como se señaló en la respuesta de bdukes, hay una razón por la que necesitamos 2 <=> caracteres. <=> escapará al siguiente carácter en JavaScript. Cuando JavaScript interprete la cadena <=>, verá el <=>, interprete que significa tomar literalmente el siguiente carácter y eliminar cuando se pasa la cadena como argumento para <=>. Eso significa que jQuery seguirá viendo la cadena como <=>.

Ahí es donde entra el segundo <=> para jugar. El primero le dice a JavaScript que interprete el segundo como un carácter literal (no especial). Esto significa que jQuery verá el segundo y comprenderá que el siguiente <=> carácter es un carácter literal.

¡Uf! Tal vez podamos visualizar eso.

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

Answer 6

Usando dos barras invertidas, & # 180; está bien, & # 180; s funciona. Pero si está utilizando un nombre dinámico, es decir, un nombre variable, deberá reemplazar los caracteres.

Si no & # 180; t wan & # 180; t para cambiar los nombres de sus variables, puede hacer esto:

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

y que tienes tu objeto jquery.

Answer 7

Solo información adicional: Compruebe esto ASP.NET MVC número # 2403 .

Hasta que se solucione el problema, uso mis propios métodos de extensión como Html.TextBoxFixed, etc., que simplemente reemplaza los puntos con guiones bajos en el atributo id (no en el atributo de nombre), de modo que use jquery como $ ( quot; #Address_Street ") pero en el servidor, es como Address.Street.

Sigue el código de muestra:

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

Resolví el problema con la solución dada por jquery docs

Mi función:

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

function jq(myid){


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


}

Nota: elimino el " # " porque en mi código concaté la ID con otro texto

Fuente: Elemento de selección de Jquery Docs con caracteres especiales