How can i use ajax with javascript function

Question

I am very new with Ajax. i am using the following javascript function to get the value from the list those user select the li . but using this function each time the page is reloading. i am trying to use ajax using this function.how can i use ajax with this need syntax.

My function:

 <script type="text/javascript" language="javascript">
    function pagelim(index)
{
    var page_lim=$('#page_num li').get(index).id; 
    self.location="<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim ;
}
    </script>

    <script type="text/javascript" language="javascript">
    function dateby(index)
{
    var date_by=$('#sort-by-date a').get(index).id; 
    var cls=document.getElementById(date_by).className;
    if(date_by=="ASC")
    {
       date_by="DESC";

    }
    else
    {
       date_by="ASC";
    }
    self.location="<?php echo get_option('head'); ?>"+'?details&sort=' + date_by ;
}
    </script>

Value get from list:

  <div class="sort-links">
       <span class="by-date" id="sort-by-date">Sort by: <a  href="#" id='<?php _e($sort_by)?>' class='<?php _e($class)?>' onclick="dateby($(this).index())" >Date</a>
    </span> 

    //list to select value 
    <span id="view-on-page">View on Page: <a href="#" class="down-arrow"><?php if($lim=="") { _e($limit); } else { _e($lim); }  ?></a>
                  <ul id="page_num">
                      <li id="5" onclick="pagelim($(this).index())"><a href="#">5</a></li>
                      <li id="10" onclick="pagelim($(this).index())"><a href="#">10</a></li>
                      <li id="15" onclick="pagelim($(this).index())"><a href="#">15</a></li>
                  </ul>
                </span> 
             </div>

Answer 1

Welcome to the wonderful world of functional programming.

I'm assuming you are doing a "get" request based on "index" which is a url? If that's the case, then you need to provide a callback.

$('#page_num li').get(index. function(id) {
    var page_lim = id; // assuming that's what you sent back.
    self.location="<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim ;
});

Notice that you have to put everything in a function that is called after the ajax request is finished. I'm assuming that all you are sending back from the request is the id you need.

jQuery AJAX calls are asynchronous, meaning that the the function $(...).get(url, callback); returns a value BEFORE the AJAX call has finished. That callback function only happens after the AJAX call is completed. I'd advise some time spent with the jQuery API documentation.

You might also Google "javascript functional programming" and see if you can get an explanation of how JavaScript (and thus jQuery) does not always return the value you expect from functions. It's very different from other languages like PHP or ASP.NET in that regard.

Answer 2

Hi hope this will help you... Create a div (say "MyDiv") and put all the elements which you want to change dynamically(without page refresh)... Then try jQuery.load() method...Like

<div id = "MyDiv">
<div class="sort-links">
       <span class="by-date" id="sort-by-date">Sort by: <a  href="#" id='<?php _e($sort_by)?>' class='<?php _e($class)?>' onclick="dateby($(this).index())" >Date</a>
    </span> 

    //list to select value 
    <span id="view-on-page">View on Page: <a href="#" class="down-arrow"><?php if($lim=="") { _e($limit); } else { _e($lim); }  ?></a>
                  <ul id="page_num">
                      <li id="5" onclick="pagelim($(this).index())"><a href="#">5</a></li>
                      <li id="10" onclick="pagelim($(this).index())"><a href="#">10</a></li>
                      <li id="15" onclick="pagelim($(this).index())"><a href="#">15</a></li>
                  </ul>
                </span> 
             </div>
</div> //end of MyDiv

Then change your script like

<script type="text/javascript" language="javascript">
    function pagelim(index)
{
    var page_lim=$('#page_num li').get(index).id; 
    $("#MyDiv").load("<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim);
}
    </script>

    <script type="text/javascript" language="javascript">
    function dateby(index)
{
    var date_by=$('#sort-by-date a').get(index).id; 
    var cls=document.getElementById(date_by).className;
    if(date_by=="ASC")
    {
       date_by="DESC";

    }
    else
    {
       date_by="ASC";
    }
    $("#MyDiv").load("<?php echo get_option('head'); ?>"+'?details&sort=' + date_by);
}
    </script>

Please note that I havnt tested this...

Its very simple to use jQuery to perform AJAX requests... So pls refer this page

Answer 3

Try binding to the click event of your links. This way you can remove any inline javascript and its all neatly contained in your function.

$("li a").click(function() {
  //should alert the id of the parent li element
  alert($(this).parent.attr('id'));

  // your ajax call
  $.ajax({
    type: "POST",
    // post data to send to the server
    data: { id: $(this).parent.attr('id') }
    url: "your_url.php",
    // the function that is fired once data is returned from your url
    success: function(data){
      // div with id="my_div" used to display data
      $('#my_div').html(data);
    }
  });        
});

This method means your list elements would look something like,

<li id="5"><a href="#">5</a></li>

This doesn't look ideal though as id="5" is ambiguous.

Try something like,

<li class="select_me">5</li>

then your click event binding can look like this,

// bind to all li elements with class select_me
$("li.select_me").click(function() {
  // alert the text inside the li element
  alert($(this).text());
});