Qu'est-ce qui provoquerait un bouton de sélection JQM Custom chargé dynamiquement (liste longue) pour recharger la page?

J'ai un menu de sélection jQM personnalisé. Quand la page se charge, il y a une option "placeholder".Qu'est-ce qui provoquerait un bouton de sélection JQM Custom chargé dynamiquement (liste longue) pour recharger la page?

<select id="rfa-select-issues" data-native-menu="false" data-mini="true"> 
    <option data-mini="true">Select one or more</option> 
</select>

Cliquer sur le bouton SELECT provoque un comportement attendu lorsqu'une liste contextuelle est affichée. J'ai un script qui charge dynamiquement des informations lorsque l'utilisateur entre des données dans un champ de texte.

$("#bws-bipad").on("change", function() { 
    var value = $("#bws-bipad").val(); 
    if (value) { 
     value = value.trim(); 
     $.ajax({ 
      url: "<c:url value="/issues/bipad/" />" + value, 
     }) 
     .then(function (response) { 
      if (response.status == 200) { 
       $("#rfa-select-issues").empty(); 
       var html = "<option data-mini='true'>Select one or more</option>"; 
       $(html).appendTo("#rfa-select-issues"); 
       $.each(response.message, function (i, issue) { 
        var year = ("0000" + issue.year).slice(-4); 
        var addon = ("00" + issue.addon).slice(-2); 
        html = "<option id=" + issue.id + " data-mini='true'>" + year + " - " + addon + "</option>"; 
        $(html).appendTo("#rfa-select-issues"); 
       }); 
       $("#rfa-select-issues").selectmenu('refresh', true); 
      } else { 
       $("#rfa-select-issues").empty(); 
       var html = ""; 
       $.each(response.errors, function (code, message) { 
        html = "<option id=" + code + " data-mini='true'>" + code + " - " + message + "</option>"; 
        $(html).appendTo("#rfa-select-issues"); 
       }); 
       $("#rfa-select-issues").selectmenu('refresh', true); 
      } 
      $.mobile.loading('hide'); 
     }); 
    } 
});

Quand il frappe un Response.Status! = 200, il y a un message d'erreur chargé dans le sélectionnez Menu, puis en cliquant sur les bouton fonctionne comme prévu. Quand il obtient une bonne réponse en retour (response.status == 200), il y aura une longue liste d'éléments mis en. J'ai vérifié que les s sont chargés dans la dom. Le problème est que maintenant, quand je clique sur le bouton, il apparaît au milieu de la page pendant une seconde puis recharge la page entière. Que puis-je faire pour ne pas recharger la page?

Source

2017-10-20 Brian bcr666 Ray

Ce comportement est intentionnellement: si le résultat listview est supérieur à la taille de la fenêtre, alors JQM ajoute automatiquement une nouvelle page qui agit comme conteneur de cette longue liste.

Les gens IMHO de JQM ont fait un excellent travail en essayant de maintenir la compatibilité et un comportement cohérent sur tous les navigateurs, donc je crois que je devrais juste faire confiance au comportement JQM par défaut qui a été prévu pour une bonne compatibilité arrière globale. , et l'utilisabilité également avec des tailles d'écran plus petites dans les appareils mobiles.

Si vous ne voulez pas le comportement par défaut de JQM, vous pouvez remplacer la fonction interne _decideFormat et expérimenter la convivialité de cette fenêtre forcée, très longue.

Voici un extrait:

$.widget("mobile.selectmenu", $.mobile.selectmenu, { 
 
    _decideFormat: function() { 
 
    var self = this; 
 
    self.menuType = "overlay"; 
 

 
    self.listbox.one({ 
 
     popupafteropen: $.proxy(this, "_focusMenuItem") 
 
    }); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div data-role="page" id="page-list"> 
 
    <div data-theme="a" data-role="header" data-position="fixed"> 
 
     <h3>List Page</h3> 
 
    </div> 
 
    <div data-role="content"> 
 
     <div class="ui-field-contain"> 
 
     <label for="select-custom-24">Multiple, icon left, long list:</label> 
 
     <select name="select-custom-24" id="select-custom-24" data-native-menu="false" multiple="multiple" data-iconpos="left"> 
 
      <option>Choose options</option> 
 
      <option value="AL">Alabama</option> 
 
      <option value="AK">Alaska</option> 
 
      <option value="AZ">Arizona</option> 
 
      <option value="AR">Arkansas</option> 
 
      <option value="CA" selected="selected">California</option> 
 
      <option value="CO">Colorado</option> 
 
      <option value="CT">Connecticut</option> 
 
      <option value="DE">Delaware</option> 
 
      <option value="FL" selected="selected">Florida</option> 
 
      <option value="GA">Georgia</option> 
 
      <option value="HI">Hawaii</option> 
 
      <option value="ID">Idaho</option> 
 
      <option value="IL">Illinois</option> 
 
      <option value="IN">Indiana</option> 
 
      <option value="IA">Iowa</option> 
 
      <option value="KS">Kansas</option> 
 
      <option value="KY">Kentucky</option> 
 
      <option value="LA">Louisiana</option> 
 
      <option value="ME">Maine</option> 
 
      <option value="MD">Maryland</option> 
 
      <option value="MA" selected="selected">Massachusetts</option> 
 
      <option value="MI">Michigan</option> 
 
      <option value="MN">Minnesota</option> 
 
      <option value="MS">Mississippi</option> 
 
      <option value="MO">Missouri</option> 
 
      <option value="MT">Montana</option> 
 
      <option value="NE">Nebraska</option> 
 
      <option value="NV">Nevada</option> 
 
      <option value="NH">New Hampshire</option> 
 
      <option value="NJ">New Jersey</option> 
 
      <option value="NM">New Mexico</option> 
 
      <option value="NY">New York</option> 
 
      <option value="NC">North Carolina</option> 
 
      <option value="ND">North Dakota</option> 
 
      <option value="OH">Ohio</option> 
 
      <option value="OK">Oklahoma</option> 
 
      <option value="OR">Oregon</option> 
 
      <option value="PA">Pennsylvania</option> 
 
      <option value="RI">Rhode Island</option> 
 
      <option value="SC">South Carolina</option> 
 
      <option value="SD">South Dakota</option> 
 
      <option value="TN">Tennessee</option> 
 
      <option value="TX">Texas</option> 
 
      <option value="UT">Utah</option> 
 
      <option value="VT">Vermont</option> 
 
      <option value="VA">Virginia</option> 
 
      <option value="WA">Washington</option> 
 
      <option value="WV">West Virginia</option> 
 
      <option value="WI">Wisconsin</option> 
 
      <option value="WY">Wyoming</option> 
 
     </select> 
 
     </div> 
 
     </ul> 
 
    </div> 
 
    <div data-theme="a" data-role="footer" data-position="fixed"> 
 
     <h3>Footer</h3> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Comme vous le voyez, la page entière au-delà du popup est redimensionnée, et le défilement. En ce qui concerne le redimensionnement de la fenêtre contextuelle, il n'existe pas de solution prête à l'emploi, car vous actualisez le contenu de manière asynchrone: ....then(function (response) ... .selectmenu('refresh'.... Il s'agit donc plus d'un problème de workflow que d'un problème de codage.

Source

2017-10-20 07:08:40 deblocker

Qu'est-ce qui provoquerait un bouton de sélection JQM Custom chargé dynamiquement (liste longue) pour recharger la page?

Répondre

Questions connexes