login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Chosen werkt niet na ajax request

Offline mebcat - 20/07/2012 12:13 (laatste wijziging 20/07/2012 12:15)
Avatar van mebcatNieuw lid Hallo

Ik ben niet zeker of dit in dit forum gedeelte past of beter in bij javascript, maar dan moet het maar verplaatst worden.
Mijn vraag:

Ik gebruik chosen om de multiselect wat dynamischer te maken, zie :http://harvesthq.github.com/chosen/.
Het werkt allemaal heel goed, maar als ik dit oproep via ajax dan werkt het niet meer. IK ben geen javascripter en weet dus niet dadelijk hoe dit op te lossen.
Ik werk met cakephp en dit zijn de twee broncodes
van de view met de ajax request:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="searchField">
  2. <?php 
  3. echo $this->Form->create('SearchForQuestions');
  4. ?>
  5. <fieldset>
  6. 		<legend><?php __('Zoeken'); ?></legend>
  7. <?php 	echo $this->Form->input('mainTopic',array('label' => 'Vak:','empty' => true));  ?>
  8. <div id="loader" style="display:none"><?php echo $this->Html->image('loader.gif'); ?></div>
  9. <div id="childTopics"></div>	
  10. </fieldset>
  11. <?php	
  12. 	echo $ajax->observeField('SearchForQuestionsMainTopic',array('url' => array( 'action' => 'get_children' ),'frequency' => 0.2,'indicator' => loader',
  13. 'update' => 'childTopics' )); 
  14. echo $this->Form->end();
  15. ?>

De view welke wordt opgeroepen met ajax
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php echo $this->Html->css(array('chosen'),'stylesheet', array('inline' => false ) ); ?>
  2.      <h1>Chosen</h1>
  3.        <div class="side-by-side clearfix">
  4.  
  5.       <div>
  6.         <em>Multiple Select with Groups</em>
  7.         <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
  8.           <option value=""></option>
  9.  
  10.             <option>Dallas Cowboys</option>
  11.             <option>New York Giants</option>
  12.             <option>Philadelphia Eagles</option>
  13.             <option>Washington Redskins</option>
  14.  
  15.           <optgroup label="NFC NORTH">
  16.             <option>Chicago Bears</option>
  17.             <option>Detroit Lions</option>
  18.             <option>Green Bay Packers</option>
  19.             <option>Minnesota Vikings</option>
  20.           </optgroup>   
  21.         </select>
  22.       </div>
  23.     </div>
  24.  
  25.  <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
  26.  <script src="/experimenten/js/chosen.proto.js" type="text/javascript"></script>
  27.  
  28.   <script type="text/javascript">
  29. 	  document.observe('dom:loaded', function(evt) {
  30. 	    var select, selects, _i, _len, _results;
  31. 	    if (Prototype.Browser.IE && (Prototype.BrowserFeatures['Version'] === 6 || Prototype.BrowserFeatures['Version'] === 7)) {
  32. 	      return;
  33. 	    }
  34. 	    selects = $$(".chzn-select");
  35. 	    _results = [];
  36. 	    for (_i = 0, _len = selects.length; _i < _len; _i++) {
  37. 	      select = selects[_i];
  38. 	      _results.push(new Chosen(select));
  39. 	    }
  40. 	    deselects = $$(".chzn-select-deselect");
  41. 	    for (_i = 0, _len = deselects.length; _i < _len; _i++) {
  42. 	      select = deselects[_i];
  43. 	      _results.push(new Chosen(select,{allow_single_deselect:true}));
  44. 	    }
  45. 	    return _results;
  46. 	  });
  47. 	</script>

3 antwoorden

Gesponsorde links
Offline Koen - 20/07/2012 12:57
Avatar van Koen PHP expert Kan je je javascript code even laten zien? 
Offline mebcat - 20/07/2012 13:48
Avatar van mebcat Nieuw lid Dag Koen

Als ik even naar de broncode kijk dan maakt cakephp volgende javascript code voor de ajax:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. //<![CDATA[
  3. new Form.Element.EventObserver('SearchForQuestionsMainTopic', function(element, value) {new Ajax.Updater('childTopics','/experimenten/questions/get_children', {asynchronous:true, evalScripts:true, onComplete:function(request, json) {Element.hide('loader');}, onLoading:function(request) {Element.show('loader');}, parameters:Form.Element.serialize('SearchForQuestionsMainTopic'), requestHeaders:['X-Update', 'childTopics']})})
  4. //]]>
  5. </script></form>


De code die de chosen doet werken staat in mijn vorige post onderaan.
Offline Koen - 26/07/2012 13:59
Avatar van Koen PHP expert Volgens mij snap je het principe niet helemaal van Chosen. In je view retourneer je het eindresultaat dat de javascript zou moeten genereren. Het is voldoende om een selectbox (want die heb je nu niet) te gebruiken en daar Chosen op toe te passen.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.289s