web-dev-qa-db-fra.com

L'accès à l'attribut de données à l'aide de jquery renvoie undefined?

À l'intérieur de ma vue, j'ai un bouton comme suit:

<button data-assigned-id="@IdUser" onclick="updateClick()" type="button" class="btn btn-sm btn-default"></button>

Ma div

<div id="partial_load_div">

</div>

Scénario

function updateClick() {
    var id = $(this).data('assigned-id');
    $('#partial_load_div').show();
    $('#partial_load_div').load('/Users/UpdatePartial?id=' + id);
}

L'identifiant est toujours affiché comme indéfini, j'ai vérifié et @IdUser a toujours une valeur

puis dans chrome dev j'ai eu l'erreur

GET http: // localhost: 19058/Users/UpdatePartial? Id = undefined 400 (Bad Request)

Une idée de comment résoudre ce problème?

jquerycustom-data-attribute
13
Maro

Dans votre script actuel, $(this) fait référence à l'objet Window (pas votre bouton) qui n'a pas de data- attribut donc son undefined.

Vous pouvez résoudre ce problème en passant l'élément à la fonction

<button data-assigned-id="@IdUser" onclick="updateClick(this)" type="button" ... ></button>

function updateClick(element) {
    var id = $(element).data('assigned-id');
    ....

Cependant, une meilleure approche consiste à utiliser Javascript discret plutôt que de polluer votre balisage par son comportement.

<button data-assigned-id="@IdUser" id="mybutton" type="button" class="btn btn-sm btn-default"></button>

$('#mybutton').click(function() {
    var id = $(this).data('assigned-id'); // $(this) refers to the button
    ....
});
6
user3559349

Lors de la lecture des attributs de données à l'aide de data(), vous devez supprimer le - Et cas de chameau la valeur . Alors tu veux:

var id = $(this).data('assignedId');

les docs on data () montrent ceci:

À partir de jQuery 1.4.3, les attributs de données HTML 5 seront automatiquement extraits dans l'objet de données de jQuery. Le traitement des attributs avec des tirets intégrés a été modifié dans jQuery 1.6 pour se conformer à la spécification HTML5 du W3C.

Par exemple, étant donné le code HTML suivant:

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

Tout le code jQuery suivant fonctionnera.

$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

La deuxième instruction du code ci-dessus fait correctement référence à l'attribut data-last-value de l'élément. Dans le cas où aucune donnée n'est stockée avec la clé transmise, jQuery recherche parmi les attributs de l'élément, convertissant une chaîne encadrée par un chameau en une chaîne en pointillés puis ajoutant des données au résultat. Ainsi, la chaîne lastValue est convertie en data-last-value.

Je n'ai pas remarqué comment vous liez l'événement click. Si vous souhaitez utiliser $(this) vous devez lier l'événement à l'aide de jquery. Il vous faut donc:

<button data-assigned-id="works" id="button">
clickme</button>

$(window).ready(function() {
     //bind the event using jquery not the onclick attribute of the button
     $('#button').on('click', updateClick);

});


function updateClick() {
    alert($(this).data('assignedId'));
}

Violon de travail

8
Liam