web-dev-qa-db-fra.com

Modification de la valeur d'un bouton mobile jQuery à l'aide de jQuery

Vous vous demandez si vous pouvez m'aider. Je semble avoir un problème pour changer le texte de mes boutons jQuery Mobile avec jQuery.

$("#myButton .ui-btn-text").text("New text");

Le code ci-dessus recommandé pour une question connexe ne semble pas fonctionner.

Ni: 

$("#myButton").attr(value,"New Test");

Le code de mon bouton est le suivant: 

<input type="button" name="answer" id="myButton" data-theme="b" data-answer="4" value="next"></button>

Je vais apprécier les commentaires les gars. Merci

jqueryjquery-mobile
25
L-Samuels

Mise à jour 2
Je travaillais sur un violon pour une autre question et j'ai remarqué que le balisage avec jQuery Mobile 1.0b2 était un peu différent:

<div data-theme="b" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-down-b ui-btn-hover-b" aria-disabled="false">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Show Submit Button</span>
    </span>

    <input type="button" name="answer" id="myButton" data-theme="b" data-answer="4" value="next" class="ui-btn-hidden" aria-disabled="false">
</div>

Avec ce balisage, vous devez procéder comme suit pour modifier le texte du bouton:

$('#myButton').prev('span').find('span.ui-btn-text').text("Next Text");

Mise à jour
Crédit pour lequel le crédit est dû - En fin de compte, la réponse de @ naugtur à cette question, qui présentait exactement le même argument que mon montage, a été publiée avant J'ai reçu autour de corriger ma réponse originale.

Je ne connais pas très bien jQuery Mobile et le fait que vous utilisiez un <input> pour le bouton ne s’est pas enregistré lorsque j’ai répondu pour la première fois. Voici ma réponse mise à jour avec un exemple de travail montrant comment vous pouvez le faire.

Dans le cas d'un <input type="button" />, jQuery Mobile semble masquer l'élément <input> et crée un nouvel élément <a> stylé de manière à ressembler au bouton. C'est pourquoi, lorsque vous essayez d'obtenir et de définir le texte en utilisant l'identifiant du <input> comme sélecteur, cela ne fonctionne pas car ce <span> ne contient pas le texte que vous voyez à l'écran. Le balisage généré ressemble à ceci

<!-- This 'a' button is added dynamically by jQuery Mobile, for the input element that follows it -->
<a role="button" href="#" data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">My Value</span>
    </span>
</a>

<input type="button" data-role="button" value="My Value" id="myButton" name="answer" class="ui-btn-hidden ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" tabindex="-1" data-theme="c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text"></span>
    </span>
</input>

Je n'ai pas essayé suffisamment d'exemples pour être totalement confiant, mais cela devrait marcher

$("#myButton").prev('a').find('span.ui-btn-text').text("New Text")

Voiciun exemple de travail montrant comment changer le texte pour les deux types de boutons(<a> et <input type="button">).

Je ne recommanderais pas d'utiliser ces boutons <a> si vous pouvez y remédier, car il n'y a pas de variable id et que mon approche, du moins, repose sur le fait que le <a> correspondant au <input type="button" /> apparaît juste avant l'élément <input>.

12
no.good.at.coding

Puisque jQuery mobile génère du HTML autour de votre input type = "button" element, et le texte que vous voyez n’est pas réellement une valeur du bouton, mais un texte à l’intérieur d’un span généré. Vous pouvez soit parcourir le DOM à la recherche de l'étendue réelle, OR demander à jQuery de régénérer le code HTML du bouton en appelant .button ("refresh"), comme suit:

$("#MyButton").val("changed value");
$("#MyButton").button("refresh");

Ce dernier est recommandé, car il restera compatible avec les futures versions de jQuery mobile, mais la traversée du DOM pourrait échouer si l'équipe jQuery choisit de modifier la structure du code HTML généré pour le bouton.

32
kovač

[obsolète]

L'utilisation des entrées de bouton présente l'inconvénient de ne pas pouvoir modifier les attributs d'une entrée de manière à se propager au bouton de jquerymobile. Alors il n'y a qu'un seul moyen:

$('#myButton').parent().find('.ui-btn-text').text('zzzzz');

Si le bouton input n'est pas nécessaire pour utiliser l'application sans javascript (ou si vous ne voulez pas que cela fonctionne sans javascript), vous devez toujours utiliser les balises <a>, car elles peuvent être des conteneurs.

6
naugtur

Avec jquery.mobile-1.1.0, je vivais quelque chose de légèrement différent et j’ai eu du mal à parcourir les réponses pour trouver une réponse viable. J'ai documenté les problèmes rencontrés et la solution trouvée ci-dessous.

Extrait 1 

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').html("Check-in to receive points");
  });
</script>

Avec cela, je peux changer le texte, mais la méthode efface les étendues et les classes ajoutées, compressant ainsi le bouton. 

button image

HTML

<div id="task_button">
 <a data-role="button" id="checkin_button" data-transition="slide" data-theme="b" href="#task-success" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-b">
 Check-in to receive points
 </a>
 </div>

Extrait 2 

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').val("Check-in to receive points");
  });
</script>

Cela n'a eu aucun effet sur le texte du bouton.

button image

HTML 

<div id="task_button">
  <a data-role="button" id="checkin_button" data-transition="slide" data-theme="b" href="#task-success" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-b">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">
      Original Text.
      </span>
    <span class="ui-icon ui-icon-check ui-icon-shadow ui-iconsize-18">&nbsp;
 </span>
</span>
</a>
</div>

Extrait 3 

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').val("Check-in to receive points").button("refresh");
  });
</script>

Cela a généré le message d'erreur suivant:

ne peut pas appeler les méthodes sur le bouton avant l'initialisation; a tenté d'appeler la méthode 'refresh'

Ce qui me déroutait parce que cette fonction est appelée uniquement après l’initialisation de la page. En lisant plus loin, j'ai alors remarqué la référence de Priyank à une réponse qui marche sur stackoverflow.com/a/7279843/61821

Snippet 4 - Travailler 

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button .ui-btn-text').val("Check-in to receive points");
  });
</script>

Un meilleur sélecteur jQuery fonctionne à merveille.

0
cluther

Cela fonctionne pour moi:

$('#idOfOriginalButton').prev('.ui-btn-inner').children('.ui-btn-text').html('new text');

solution de: http://forum.jquery.com/topic/changing-text-works-except-for-buttons

0
Yuval A.

c'est très facile, il existe une méthode pour cela, bouton ('actualiser')

$('#mybutton').val('new Value').button('refresh');

bonne chance!

0
josue alvarez