2017-02-28 1 views
0

J'ai un champ enum lié à une source distante et lorsque vous tapez dans le champ, la source distante fournit des correspondances, qui apparaissent comme vous le souhaitez. Cela fonctionne très bien. Mais j'ai besoin que ce champ soit dans un formulaire. Le problème est que lorsqu'il est dans la forme, il ne fonctionne plus. J'ai dépouillé le code et l'ai énuméré ci-dessous. Espérons que le code ci-dessous est suffisant, mais vous pouvez cliquer sur les liens fournis pour l'essayer et voir la source pour les deux prochaines semaines. Quelqu'un peut-il expliquer comment le faire fonctionner dans le Formulaire?w2ui champ source enum distant dans un formulaire

Ce code fonctionne (try it here):

<html> 
<head> 
    <title>Remote Source Enum</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" /> 
</head> 
<body> 
<div class="w2ui-field"><label>Name Picker:</label><div> <input id="tcidPicker"></div></div> 
<script> 
$('#tcidPicker').w2field('enum', { 
    url: '/v1/transactantstd/ISO', 
    renderItem: function (item) {return item.FirstName + ' ' + item.LastName; }, 
    renderDrop: function (item) {return item.FirstName + ' ' + item.LastName; }, 
    compare: function (item, search) { 
     // ... lines removed for brevity ... 
    } 
}); 
</script> 
</body> 
</html> 

Ce code ne fonctionne pas (try it here):

<html> 
<head> 
    <title>Remote Source Enum in a Form</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" /> 
</head> 
<body> 
<div id="form"> 
    <div class="w2ui-field"> 
    <label>Name Picker:</label><input id="tcidPicker" name="tcidPicker"> 
    </div> 
</div> 
<script type="text/javascript"> 
$(function() { 
    $('#form').w2form({ 
     name : 'form', 
     fields: [ 
      { field: 'tcidPicker', 
       type: 'enum', 
       url: '/v1/transactantstd/ISO', 
       renderItem: function (item) {return item.FirstName + ' ' + item.LastName; }, 
       renderDrop: function (item) {return item.FirstName + ' ' + item.LastName; }, 
       compare: function (item, search) { 
        // ... lines removed for brevity 
       }, 
      }, 
     ], 
    }); 
}); 
</script> 
</body> 
</html> 

Répondre

0

Vous devez envelopper les options dans une propriété options.

Voir: http://w2ui.com/web/docs/1.5/w2form.fields

Dans votre cas:

fields: [ 
     { field: 'tcidPicker', 
      type: 'enum', 
      options: { 
       url: '/v1/transactantstd/ISO', 
       renderItem: function (item) {return item.FirstName + ' ' + item.LastName; }, 
       renderDrop: function (item) {return item.FirstName + ' ' + item.LastName; }, 
       compare: function (item, search) { 
        // ... lines removed for brevity 
       }, 
      }, 
     }, 
    ], 
+0

vient de faire ce changement. Fonctionne comme un champion maintenant. Merci mpf82! – sman