Comment faire en sorte que jQuery sélectionne les éléments dont l'ID contient un . (point) ?

Question

Étant donné les classes suivantes et la méthode d'action du contrôleur :

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

Et le formulaire suivant :

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

Je suis en mesure de mettre à jour à la fois l'instance de l'école et l'adresse de l'école. C'est très bien ! Merci à l'équipe ASP.NET MVC !

Cependant, comment puis-je utiliser jQuery pour sélectionner la liste déroulante afin de la pré-remplir ? Je me rends compte que je pourrais le faire côté serveur, mais il y aura d'autres éléments dynamiques sur la page qui affecteront la liste.

Voici ce que j'ai fait jusqu'à présent, et cela ne fonctionne pas car les sélecteurs ne semblent pas correspondre aux 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 Groupes Google :

Utilisez deux antislashes avant chaque caractère spécial.

Une barre oblique inversée dans un sélecteur jQuery permet d'échapper au caractère suivant. Mais vous avez besoin de deux, car la barre oblique inverse est également le caractère d'échappement des chaînes de caractères pour les chaînes de caractères. La première barre oblique inversée permet d'échapper à la seconde, ce qui vous donne une seule barre oblique inversée réelle dans votre chaîne. dans votre chaîne, ce qui permet d'échapper au caractère suivant pour jQuery.

Donc, je suppose que vous regardez

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

Consultez également Comment sélectionner un élément par un ID qui comporte des caractères utilisés dans la notation CSS ? sur la FAQ de jQuery.

Answer 2

Vous ne pouvez pas utiliser un sélecteur d'id jQuery si l'id contient des espaces. Utilisez un sélecteur d'attribut :

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

Si possible, précisez également le type d'élément :

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

Answer 3

Échappez-vous pour Jquery :

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

exemple d'utilisation :

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

plus d'infos ici .

Answer 4

La version candidate d'ASP.NET MVC qui vient d'être publiée a corrigé ce problème. Elle remplace désormais les points par des caractères de soulignement pour l'attribut ID.

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

Rendu à

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

Pour plus d'informations, consultez les notes de mise à jour, à partir de la page 14.

Answer 5

Si vous utilisez deux barres obliques inversées, c'est correct, c'est du travail. Mais si vous utilisez un nom dynamique, je veux dire, un nom de variable, vous devrez remplacer les caractères.

Si vous ne voulez pas changer les noms de vos variables, vous pouvez le faire :

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

et vous avez votre objet jquery.