jquery is not working after ajax call

[piyush23424]

Hello..

jquery function is not working after the ajax call,

i am using jquery function to hide show the div and sorting the the divs(records div id is contentLeft ) in the listing and ajax is used to show the listing 'by order'()  (one drop down with options and two radio buttons for asc and desc order)

 

link name 'adjustments' is activating the hide/show div functionality

 

<script type="text/javascript">


$(document).ready(function(){ 
$(function() {
	$("#contentLeft").sortable({ opacity: 0.6, cursor: 'move', update: function() {
		var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
		$.post("http://localhost/CodeIgniter/index.php/cma/updateRecord", order, function(theResponse){
			$("#contentRight").html(theResponse);
		}); 															 
	}								  
	});
});

// hides the slickbox as soon as the DOM is ready
 // (a little sooner than page load)
  $('.slickbox1').hide('slow');
 // shows the slickbox on clicking the noted link
 // toggles the slickbox on clicking the noted link
  $('a.slick-toggle').click(function() {
	var id = $(this).attr('id');
 $('#slickbox'+id).toggle(400);
 return false;
  });
//ajax call from jquery


});	




function get_record_id(key)
{
    var xmlhttp = GetXmlHttpObject();
	var value;
    var key = key;
if(key=='ASC' || key=='DESC'){
	value = document.getElementById('sort_key').value;
	var param = "orderby="+key+"&value="+value;	
  }
else
  {
   value = key;
	  for(i=0; i<document.sortform.sort_order.length; i++)
	  {
	   if(document.sortform.sort_order[i].checked==true)
             { 
	      var orderby = document.sortform.sort_order[i].value;
		 }
		  }	
   var param = "orderby="+orderby+"&value="+value;
 }  
    if(xmlhttp==null)
	{
	  alert ("Your browser does not support XMLHTTP!");
	  return;
	}

var url="http://localhost/CodeIgniter/index.php/cma/sortacs";
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");       
xmlhttp.send(param);

function stateChanged()
	 {
	if (xmlhttp.readyState==4)
	   {
	  document.getElementById("contentLeft").innerHTML=unescape(xmlhttp.responseText);
	   }
	}

function GetXmlHttpObject()
	 {
	   if (window.XMLHttpRequest)
		{
		  // code for IE7+, Firefox, Chrome, Opera, Safari
		  return new XMLHttpRequest();
		}
	   if (window.ActiveXObject)
		 {
		  // code for IE6, IE5
		  return new ActiveXObject("Microsoft.XMLHTTP");
		 }
	  return null;
	} 


}




</script>

<form name="sortform"> 
    <span>
      <strong>Organize listings by:</strong> 
<select name="sort_key" id="sort_key" onchange="get_record_id(this.value)">
      <option value=""></option>
      <option value="status" selected="selected">Status</option>
      <option value="bedrooms">Beds</option>
      <option value="baths_total">Baths</option>
      <option value="price">List Price</option>
      <option value="price">Price</option>
      <option value="total_sq_ft">Square Feet</option>
  </select>
      </span>
<input id="record_id" type="radio" name="sort_order" value="ASC" onclick="get_record_id(this.value);"  />
      Ascending
      </span>
    <span>
      <input id="record_id" type="radio" name="sort_order" value="DESC" onclick="get_record_id(this.value);" />
</span> <span id="loading" style="display: none; margin-left: 20px;">
      <img alt="" src="assets/loading.gif" height="16" width="16"> Loading...
      </span>
  
      </form>
<?php



$i =1;
$active =0;
$pending=0;
$sold = 0;
$orderinfo = $this->session->userdata('orderinfo');
foreach($data as $row)
{
?>
  <div class="module" id="recordsArray_<?php echo $row['id']; ?>">
    <div class="listing"> 
      <?php 
        switch($row['status']){
         case 'Active':
           $a = 'A';
	   $active += 1; 
         ?>	
      <div class="list-status active">A</div>
      <?php
         break;
           case 'Pending':
	   $a= 'P';
          $pending += 1; 
         ?>
      <div class="list-status pending">p</div>
      <?php
         break;
           case 'Sold':
	   $a = 'S';
           $sold += 1;
          ?>
      <div class="list-status closed">S</div>
      <?php
         break;
          default:
          $a="";
        }
         ?>
      <div class="address">
        <p>
          <strong>
            <?php echo $row['address'] ?>
            </strong>
          </p>     
        </div> 
      <div class="sort-order">
        <p class="key">
	  <?php 
	   switch($orderinfo){
	     case 'status':
		  echo 'status';
		  $orderInfoValue = $a;
		  break;
		 case 'price':
		 echo "Price List";
		 $orderInfoValue = $row['price'];
		 break;
		 case 'total_sq_ft':
		  echo "Area";
		 $orderInfoValue = $row['total_sq_ft'];
		 break;
		 case 'bedrooms':
		  echo "Beds";
		  $orderInfoValue = (int)$row['bedrooms'];
		 break;
		 case 'baths_total':
		  echo "Baths";
		  $orderInfoValue = (int)$row['baths_total'];
		 break;
		 default:
		 $orderInfoValue = '';

	   }
	   ?>
           </p>
        <p class="value"><?=$orderInfoValue;?></p>
        </div>
      <div class="price">
        <p>
          <span title="<?php echo $row['price']; ?>">
            <?php echo "$".$row['price']; ?>
            </span>     
          </p>
        <p>
          <a id="<?=$i?>" class="slick-toggle"  href="#">Adjustments</a>
          </p>
        </div>     
      
      
      <div class="slickbox1" id="slickbox<?=$i?>" style="display:none; min-height:200px;">
        this is the toggle div
        </div>
      </div> 
  </div>
    
  <?php
$i++;

}
?>

[piyush23424]

Hi, this is solved by again calling the ready function(jquery function) after the ajax completes its request.

just added the function load after the xmlhttp response

<ajax code>

        document.getElementById("contentLeft").innerHTML=unescape(xmlhttp.responseText);

          load();

</ajax code>

 

here is the load function

 

function load()

{

// hides the slickbox as soon as the DOM is ready

 

    // toggles the slickbox on clicking the noted link

    $('a.slick-toggle').click(function() {

      var id = $(this).attr('id');

    $('#slickbox'+id).toggle(400);

    return false;

    });

 

}