I am stuck on this jquery

[James_Hibbard]

@jemz

Hi pullo, what is do you mean “lump”

Chunk, mass, something like that.

@jemz

$datacount[“datatable”]=$msg; //name/value (am i wrong ?)

No, but it’s intended more for a situation where it makes sense to have a number of name/value pairs, such as:

{
  "employees": [
    { "firstName":"John" , "lastName":"Doe" }, 
    { "firstName":"Anna" , "lastName":"Smith" }, 
    { "firstName":"Peter" , "lastName":"Jones" }
  ]
}

@jemz

I am querying the table to other page, and i would like to pass in json,and then display or load in content div like you’re example but you already put the table in the body…

I want to request the data in other page via ajax and then load it in div.and then it form to a table just like what your demo.

I would have the PHP script query the database, then echo the table (as you are doing).

Catch this in your AJAX call, then insert the table as required.
E.g.

$.ajax({
  type: POST,
  dataType: 'html',
  url: "yourScript.php",
  success: function(data){
    $("#tableContainer").html(data);
  }
});

[jemz]

Hi pullo, I already did this

 $.ajax({
  type: POST,
  dataType: 'html',
  url: "yourScript.php",
  success: function(data){
    $("#tableContainer").html(data);
  }
});

but the pagination is not functioning.

[James_Hibbard]

How is it not functioning?
What is data returning?

[jemz]

I put this code in the head tag

$(document).ready(function() {
$(‘.myTable tr’).hide().filter(‘:lt(2)’).show();
$(‘.pagination’).jqPagination({
max_page : $(‘.myTable tr’).length -1,
paged : function(page) {
$(‘.myTable tr:not(:first)’).hide();
$($(‘.myTable tr’)[page]).show();
}
});
});

[James_Hibbard]

That’s nice, but doesn’t answer my question

[jemz]

Hi, this is the data returned by ajax,it is printed in log

<table width='200' border='1' class='myTable'>  <tr class='sticky'><th>ID</th><th>studname</th><th>age</th></tr><tr>
          <td>91</td>
          <td>james</td>
          <td>24</td>
        </tr><tr>
          <td>92</td>
          <td>carl</td>
          <td>44</td>
        </tr><tr>
          <td>93</td>
          <td>fred</td>
          <td>33</td>
        </tr><tr>
          <td>94</td>
          <td>mark</td>
          <td>33</td>
        </tr><tr>
          <td>95</td>
          <td>shane</td>
          <td>49</td>
        </tr><tr>
          <td>96</td>
          <td>harry</td>
          <td>30</td>
        </tr><tr>
          <td>102</td>
          <td>jack</td>
          <td>55</td>
        </tr></table> 

[James_Hibbard]

Ok, well that’s good.
Can you insert it into the page ok?

[jemz]

@James_Hibbard

That’s nice, but doesn’t answer my question

Hi pullo, sorry for that post it did not answer your question, i am just asking you that i put that code in the head tag, i posted the result data in my next post which will answer your question.

[jemz]

Can you insert it into the page ok?

you mean you want to see the html result ?

[James_Hibbard]

As long as it is within document.ready it doesn’t matter where on the page it is.
Can you get the result of your ajax call to display?

[jemz]

Can you get the result of your ajax call to display?

I posted already in post#26

this is the result in html tab of firebug after the ajax loaded.

<table class="myTable" width="200" border="1">
<tbody>
        <tr class="sticky">
			<th>ID</th>
			<th>studname</th>
			<th>age</th>
		</tr>
		<tr>
		<td>91</td>
          <td>james</td>
          <td>24</td>
        </tr>
		<tr>
          <td>92</td>
          <td>carl</td>
          <td>44</td>
        </tr>
		<tr>
          <td>93</td>
          <td>fred</td>
          <td>33</td>
        </tr>
		<tr>
          <td>94</td>
          <td>mark</td>
          <td>33</td>
        </tr>
		<tr>
          <td>95</td>
          <td>shane</td>
          <td>49</td>
        </tr>
		<tr>
          <td>96</td>
          <td>harry</td>
          <td>30</td>
        </tr>
		<tr>
          <td>102</td>
          <td>jack</td>
          <td>55</td>
        </tr></table>
		

[James_Hibbard]

Hi jemz,

We’re getting our wires slightly crossed.
I’ve got to go out now. I’ll pick this up tomorrow.

[jemz]

Okay…see you tomorrow thanks

[James_Hibbard]

Hi jemz,

I made you a new demo using AJAX to pull in the table, then initialize the pagination.
It all worked pretty much as expected, although I had to wrap the initialization of the pagination in a function, which was then called after the AJAX query had completed successfully.

To be complete, here’s the code:

<!DOCTYPE HTML>
<html>
  <head>
    <!--http://www.sitepoint.com/forums/showthread.php?989241-I-am-stuck-on-this-jquery-->
    <title>jqPagination example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="https://raw.github.com/beneverard/jqPagination/master/js/jquery.jqpagination.js"></script>
    <link rel="stylesheet" type="text/css" href="https://raw.github.com/beneverard/jqPagination/master/css/jqpagination.css" />
  </head>

  <body>
    <div class="pagination">
      <a href="#" class="first" data-action="first">&laquo;</a>
      <a href="#" class="previous" data-action="previous">&lsaquo;</a>               
      <input type="text" readonly="readonly" />
      <a href="#" class="next" data-action="next">&rsaquo;</a>
      <a href="#" class="last" data-action="last">&raquo;</a>
    </div>
    
    <script>
      $(document).ready(function() {
        function sortPagination(){
          $('.myTable tr').hide().filter(':lt(2)').show();
          $('.pagination').jqPagination({
            max_page : $('.myTable tr').length -1,
            paged : function(page) {
              $('.myTable tr:not(:first)').hide();
              $($('.myTable tr')[page]).show();
            }
          });
        }
        
        $.ajax({
          type: "POST",
          dataType: 'html',
          url: "ajax.php",
          success: function(data){
            $("body").prepend(data);
            sortPagination();
          }
        });        
      });
    </script>
  </body>
</html>

ajax.php

<?php
echo("
<table width=\\"200\\" border=\\"1\\" class=\\"myTable\\">
      <tr class=\\"sticky\\">
        <th>ID</th>
        <th>Studname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>91</td>
        <td>shane</td>
        <td>20</td>
      </tr>
      <tr>
        <td>92</td>
        <td>charlie</td>
        <td>20</td>
      </tr>
      <tr>
        <td>93</td>
        <td>melli</td>
        <td>25</td>
      </tr>
      <tr>
        <td>94</td>
        <td>mike</td>
        <td>26</td>
      </tr>
      <tr>
        <td>95</td>
        <td>harry</td>
        <td>29</td>
      </tr>
      <tr>
        <td>96</td>
        <td>tom</td>
        <td>20</td>
      </tr>
      <tr>
        <td>97</td>
        <td>jack</td>
        <td>20</td>
      </tr>
      <tr>
        <td>98</td>
        <td>feld</td>
        <td>27</td>
      </tr>
      <tr>
        <td>99</td>
        <td>marie</td>
        <td>26</td>
      </tr>
      <tr>
        <td>100</td>
        <td>tora</td>
        <td>24</td>
      </tr>
      <tr>
        <td>101</td>
        <td>jammy</td>
        <td>30</td>
      </tr>
    </table>
");		
?>

HTH

[jemz]

Hi pullo, before i am going to test the new demo, i have something to say because i am confuse on the scenario,

In your first demo inside the body there is a table and i tried to test if i can alert when i am going to click the row of the table

$(document).ready(function() {
$(‘.myTable tr’).click(function(){
alert(“you click the row”);
});

    });

and it is working that i expected to alert…but when i tried my version that the table is requested via ajax and loaded to the div when i click the row it will not alert

   <script>

            $(document).ready(function() {
                $('.myTable tr').click(function(){
                    alert("you clicked the row");
                });


            });

  $(function(){
  $.ajax({
                type: 'post',
                url: 'loadmytablepage.php',
                success: function(data){
                    $('#tablecontainer').html(data);

                }

            });

        });

    </script>

this will not alert…i don’t know why.

[James_Hibbard]

That’s because you are adding elements to the DOM dynamically (i.e. via AJAX).

Use .on() and a parent element that is present on page load.

E.g.

$(document).on("click", ".myTable tr", function(){
  alert("you clicked the row");
});

[jemz]

Hi pullo, Thank you for the quick reply and for enlighten my mind :nanaman: it’s working so this what the .on used for…i can now clicked the row requested via ajax.

so let me explain as what i have understand so if we going to click any element that was requested via ajax we should use .on function ?

Thank you so much okay i will try now your new demo .i’ll be back

[James_Hibbard]

@jemz

so let me explain as what i have understand so if we going to click any element that was requested via ajax we should use .on function ?

Yes.
You see, when the code that is within document.ready fires after the page has loaded, the table you are trying to attach an event handler to, doesn’t exist in the DOM.
To get around this, you select an element that does exist and using .on(), and attach the required behaviour to that.

It can also be used when you are creating elements dynamically (not only loading them via ajax).

[jemz]

Hi pullo, Is it okay to load in a div,not to prepend in the body?what is the purpose for putting the function shortpagination() in the success ?

[jemz]

@James_Hibbard

Hi jemz,

I made you a new demo using AJAX to pull in the table, then initialize the pagination.
It all worked pretty much as expected, although I had to wrap the initialization of the pagination in a function, which was then called after the AJAX query had completed successfully.

To be complete, here’s the code:

<!DOCTYPE HTML>
<html>
  <head>
    <!--http://www.sitepoint.com/forums/showthread.php?989241-I-am-stuck-on-this-jquery-->
    <title>jqPagination example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="https://raw.github.com/beneverard/jqPagination/master/js/jquery.jqpagination.js"></script>
    <link rel="stylesheet" type="text/css" href="https://raw.github.com/beneverard/jqPagination/master/css/jqpagination.css" />
  </head>

  <body>
    <div class="pagination">
      <a href="#" class="first" data-action="first">«</a>
      <a href="#" class="previous" data-action="previous">‹</a>               
      <input type="text" readonly="readonly" />
      <a href="#" class="next" data-action="next">›</a>
      <a href="#" class="last" data-action="last">»</a>
    </div>
    
    <script>
      $(document).ready(function() {
        function sortPagination(){
          $('.myTable tr').hide().filter(':lt(2)').show();
          $('.pagination').jqPagination({
            max_page : $('.myTable tr').length -1,
            paged : function(page) {
              $('.myTable tr:not(:first)').hide();
              $($('.myTable tr')[page]).show();
            }
          });
        }
        
        $.ajax({
          type: "POST",
          dataType: 'html',
          url: "ajax.php",
          success: function(data){
            $("body").prepend(data);
            sortPagination();
          }
        });        
      });
    </script>
  </body>
</html>

ajax.php

<?php
echo("
<table width=\\"200\\" border=\\"1\\" class=\\"myTable\\">
      <tr class=\\"sticky\\">
        <th>ID</th>
        <th>Studname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>91</td>
        <td>shane</td>
        <td>20</td>
      </tr>
      <tr>
        <td>92</td>
        <td>charlie</td>
        <td>20</td>
      </tr>
      <tr>
        <td>93</td>
        <td>melli</td>
        <td>25</td>
      </tr>
      <tr>
        <td>94</td>
        <td>mike</td>
        <td>26</td>
      </tr>
      <tr>
        <td>95</td>
        <td>harry</td>
        <td>29</td>
      </tr>
      <tr>
        <td>96</td>
        <td>tom</td>
        <td>20</td>
      </tr>
      <tr>
        <td>97</td>
        <td>jack</td>
        <td>20</td>
      </tr>
      <tr>
        <td>98</td>
        <td>feld</td>
        <td>27</td>
      </tr>
      <tr>
        <td>99</td>
        <td>marie</td>
        <td>26</td>
      </tr>
      <tr>
        <td>100</td>
        <td>tora</td>
        <td>24</td>
      </tr>
      <tr>
        <td>101</td>
        <td>jammy</td>
        <td>30</td>
      </tr>
    </table>
");		
?>

HTH

Hi pullo, it’s working now great!!! i can request via ajax and i can now paginate I also tried your new demo

Thank you so much pullo.