Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Call function after ajax div refresh

    Hi there,

    Sorry I am quite a novice at javascript and all its lingo so this is probably just a matter of me not using the right word or what have you. What I am trying to do is make a series of sortable lists.

    On the left hand side is a list of categories which can be order, and on the right are boxes with the articles (that are also sortable) for each category, in the order that they are found as on the left hand side.



    When the categories list has been modified then the right hand side is updated from an external file via AJAX Request function.

    The only problem that I have run into is that once updated, the <li> tags are no longer transformed into sortable lists.

    This is my Javascript code:

    Code:
    function ajaxUpdater(id,url) {  
     			new Ajax.Updater(id,url,{asynchronous:true});  
    		}  
    		/* when the DOM is ready */
    		window.addEvent('domready', function() {
    		/* create sortables */
    		var sb = new Sortables('tags-list', {
    			/* set options */
    			clone:true,
    			revert: true,
    			/* initialization stuff here */
    			initialize: function() { 
    				
    			},
    			/* once an item is selected */
    			onStart: function(el) { 
    				el.setStyle('background','#add8e6');
    			},
    			/* when a drag is complete */
    			onComplete: function(el) {
    				el.setStyle('background','#ddd');
    				//build a string of the order
    				var sort_order = '';
    				$$('#tags-list li').each(function(li) { sort_order = sort_order +  li.get('alt')  + '|'; });
    				$('sort_order').value = sort_order;
    				
    					//do an ajax request
    					var req = new Request({
    						url:'updater.php',
    						method:'post',
    						autoCancel:true,
    						data:'sort_order=' + sort_order + '&tags_do_submit=1&byajax=1&action=tags',
    						onRequest: function() {
    							document.getElementById('thinking').style.visibility = '';
    						},
    						onSuccess: function() {
    							var request = new Request({
       							 	url: 'updater.php',
        							method: 'post',
        							update: 'entries',
    								data:'action=entries',
        							onComplete: function(response) {
            							$('entries').set('html',response);
        							}	
    							}).send();
    							document.getElementById('thinking').style.visibility = 'hidden';
    							$($'#tags-list li').each(function(li) { sortmylist(''+li.get('alt')+''); });
    						}
    					}).send();
    			}
    		});
    		});
    		
    		function sortmylist(div){
    			var sb = new Sortables(div+'-list', {
    			  /* set options */
    			  clone:true,
    			  revert: true,
    			  /* initialization stuff here */
    			  initialize: function() { 
    				  
    			  },
    			  /* once an item is selected */
    			  onStart: function(el) { 
    				  el.setStyle('background','#add8e6');
    			  },
    			  /* when a drag is complete */
    			  onComplete: function(el) {
    				  el.setStyle('background','#ddd');
    				  //build a string of the order
    				  var sort_order = '';
    				  $$('#'+div+'-list li').each(function(li) { sort_order = sort_order +  li.get('alt')  + ','; });
    				  $(div+'_sort_order').value = sort_order;
    				  
    					  //do an ajax request
    					  var req = new Request({
    						  url:'updater.php',
    						  method:'post',
    						  autoCancel:true,
    						  data:'sort_order=' + sort_order + '&entry_do_submit=1&byajax=1&action=update&tag='+div,
    						  onRequest: function() {
    							  document.getElementById('thinking').style.visibility = '';
    						  },
    						  onSuccess: function() {
    							  document.getElementById('thinking').style.visibility = 'hidden';
    						  }
    					  }).send();
    			  }
    		  });	
    		}
    And this is an example of the HTML code used for the area:

    Code:
    <h1>Sort portfolio
          </h1>
          <div id="categories">
            <h2>Sort tags</h2>
    
              <form id="tags_form" action="updater.php?action=tags" method="post">
              
              <ul id="tags-list">
                  <li class="sortme" alt="37">Fashion</li>
    					  <li class="sortme" alt="39">Personal</li>
    					  <li class="sortme" alt="43">Commercial</li>
    					            </ul>
              <input type="hidden" name="sort_order" id="sort_order" value="0|1|2" />
    
              </form>
          </div>
          <div id="entries">
          	<div id="thinking" style="display:none;">
            </div>
            <h2>Sort entries</h2>
                  	<div id="37" class="entry">
            <h3>Fashion</h3>
    
            	<form id="37_form" action="updater.php?action=tags" method="post">
              <ul id="37-list">
                  <li class="sortme" alt="100105">d_luxe jewellery</li>
    					  <li class="sortme" alt="100110">Area 51</li>
    					  <li class="sortme" alt="100104">twenty-seven names</li>
    					            </ul>
              <input type="hidden" name="sort_order" id="37_sort_order" value="0,1,2" />
    
              </form>
              </div>
              <script language="javascript" type="text/javascript">
    				sortmylist('37');
    			</script>
                    	<div id="39" class="entry">
            <h3>Personal</h3>
            	<form id="39_form" action="updater.php?action=tags" method="post">
              <ul id="39-list">
                  <li class="sortme" alt="100117">Nina’s ABC</li>
    
    					  <li class="sortme" alt="100118">Cohybosis</li>
    					  <li class="sortme" alt="100119">Expressive Typography</li>
    					            </ul>
              <input type="hidden" name="sort_order" id="39_sort_order" value="0,1,2" />
              </form>
              </div>
              <script language="javascript" type="text/javascript">
    				sortmylist('39');
    			</script>
    
                    	<div id="43" class="entry">
            <h3>Commercial</h3>
            	<form id="43_form" action="updater.php?action=tags" method="post">
              <ul id="43-list">
                  <li class="sortme" alt="100109">NZTA</li>
    					  <li class="sortme" alt="100111">Marbecks</li>
    					  <li class="sortme" alt="100112">Renovator</li>
    
    					  <li class="sortme" alt="100114">YouDo</li>
    					  <li class="sortme" alt="100108">Dulux</li>
    					  <li class="sortme" alt="100115">Revive Espresso</li>
    					  <li class="sortme" alt="100106">Axiom Hydraulics</li>
    					  <li class="sortme" alt="100107">Milford Dart</li>
    					  <li class="sortme" alt="100116">Wedding Invites</li>
    
    					            </ul>
              <input type="hidden" name="sort_order" id="43_sort_order" value="0,1,2,3,4,5,6,7,8" />
              </form>
              </div>
              <script language="javascript" type="text/javascript">
    				sortmylist('43');
    			</script>
                    
         </div>

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    You've posted this in the Javascript Frameworks sub-forum; you should try to get the moderators to move it to the Ajax or Javascript forum.

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're quite right. I thought it was under this category for it used mootools.

    Moderater: Could you please move this to the appropriate forum.

    Many thanks, M.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •