CODEWITHSUNDEEP
phpjquery
Amit Kushwaha
Amit Kushwaha

Reputation: 101

JQuery function for multiple button event with different Id

This below code create multiple page button.

<?php
for($i=1; $i<=$this->total_pages; $i++)
{
  echo "<button class='btn page' id='next".$i."' value='".$i."'>".$i."</button>";
}
?>

here below the view of page is show like 

1 2 3 4 5 6 ........//I dont know how many pages

Here in below code i want to catch only that id with value which is trigger by user. I don't know the id name.

<script>
    $( document ).ready(function() {
     $('button[id^="next"]').on('click', function() {
        var page = ($(this).attr('value'));
        $.ajax({
          type: "GET",
          url: 'index.php?act=product',
          data: ({page:page}),
          success: function(data) {
            var my_rows = $(data).find('tbody').html();
            $('tbody').append(my_rows);
          }
        });
        $(this).hide();
     });
    });
</script>

My question is that why my script is append rows wrong after click on any page. when i click on 2 it appends 10 rows. after then i click on 3 it appends 6 rows after then i click on 4 it appends 1 row. why?

My controller page is below

<?php
include "model/login_class.php";
include "view/template/product_class.php";
$tplLogin=new LoginTpl();
$sqlLogin=new sqlLogin();
//echo $_GET['page']; exit;
$total_results = $sqlLogin->totalproduct();
$per_page = 5;
$total_pages = ceil($total_results / $per_page);
$tplLogin->total_pages = $total_pages;
if (isset($_GET['page'])) {
    $show_page = $_GET['page']; //current page
    if ($show_page > 0 && $show_page <= $total_pages) {
        $start = ($show_page - 1) * $per_page;
        $end = $start + $per_page;
    } else {
        // error - show first set of results
        $start = 0;              
        $end = $per_page;
    }
} else {
    // if page isn't set, show first set of results
    $start = 0;
    $end = $per_page;
}
// display pagination
$sqlLogin->start = $start;
$sqlLogin->end = $end;
$tplLogin->products = $sqlLogin->product();
$tplLogin->product();
?>

Upvotes: 2

Views: 791

Answers (4)

Amit Kushwaha
Amit Kushwaha

Reputation: 101

line number 15 was wrong. 

<?php
    include "model/login_class.php";
    include "view/template/product_class.php";
    $tplLogin=new LoginTpl();
    $sqlLogin=new sqlLogin();
    //echo $_GET['page']; exit;
    $total_results = $sqlLogin->totalproduct();
    $per_page = 5;
    $total_pages = ceil($total_results / $per_page);
    $tplLogin->total_pages = $total_pages;
    if (isset($_GET['page'])) {
        $show_page = $_GET['page']; //current page
        if ($show_page > 0 && $show_page <= $total_pages) {
            $start = ($show_page - 1) * $per_page;
            $end = $per_page;
        } else {
            // error - show first set of results
            $start = 0;              
            $end = $per_page;
        }
    } else {
        // if page isn't set, show first set of results
        $start = 0;
        $end = $per_page;
    }
    // display pagination
    $sqlLogin->start = $start;
    $sqlLogin->end = $end;
    $tplLogin->products = $sqlLogin->product();
    $tplLogin->product();
    ?>

Upvotes: 0

Akshay Chawla
Akshay Chawla

Reputation: 613

Another easy way to perform any operation for multiple buttons with different id is by using one common class name(".page") for all buttons and using that class name in JS for click event.

Here is the example HTML and JS code:

<button class='btn page' id='next1' value='1'>1</button>
<button class='btn page' id='next2' value='2'>2</button>
<button class='btn page' id='next3' value='3'>3</button>

  $(document).ready(function() {
     $('.page').on('click', function() {
       alert($(this).val());//Getting value for clicked button
       alert($(this).attr("id"));//Getting id for clicked button

       $.ajax({
         ...//Ajax call
       });
       $('this').hide();/Hiding clicked button
    });
  });

Upvotes: 0

Sathish
Sathish

Reputation: 2460

No need to know id, use separate class for button

Just try this.,

$('button.page').on('click', function() {
/*your class */
        var page = $(this).attr('value');
        $.ajax({
          type: "GET",
          url: 'index.php?act=product',
          data: {page:page},
          success: function(data) {
            var my_rows = $(data).find('tbody').html();
            $('tbody').append(my_rows);
          }
        });
        $("button.page").show();
        $(this).hide();
     });

I hope this will help you :)

Upvotes: 1

Danyal Sandeelo
Danyal Sandeelo

Reputation: 12401

Another easy way to do this is to have a javascript onclick event

echo "<button class='btn page' id='next".$i."' value='".$i."' 
onclick='renderPage(".$i.")' >".$i."</button>";

put your ajax code in the JS like

<script>
   function renderPage(value){
   ...
   }
</script>

Upvotes: 0

Related Questions