JQuery function for multiple button event with different Id

Question

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();
?>

$('button[id^="next"]').hide(); - should be $(this).hide() — Arun P Johny
– Arun P Johny, Commented Aug 26, 2015 at 7:02
Hi Arun, why my script append all rows even i did click on only page 2. — Amit Kushwaha
– Amit Kushwaha, Commented Aug 26, 2015 at 7:49

Sathish · Accepted Answer · 2015-08-26 07:25:43Z

1

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 :)

edited Aug 26, 2015 at 7:25

answered Aug 26, 2015 at 7:19

Sathish

2,4601 gold badge16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sathish Over a year ago

@Amit this is working on my side(: & you need to get id?

Danyal Sandeelo · Accepted Answer · 2015-08-26 07:01:53Z

0

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>

answered Aug 26, 2015 at 7:01

Danyal Sandeelo

12.4k10 gold badges57 silver badges90 bronze badges

2 Comments

Justin Johnson Over a year ago

I downvoted it. You should attach events in your code, not in your HTML (i.e. using the onclick property).

Danyal Sandeelo Over a year ago

may I know your priority behind this? @JustinJohnson

Akshay Chawla · Accepted Answer · 2015-08-26 07:44:23Z

0

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
    });
  });

answered Aug 26, 2015 at 7:44

Akshay Chawla

6131 gold badge8 silver badges17 bronze badges

4 Comments

Akshay Chawla Over a year ago

It is working on my side. With my code i am using 2.1.3/jquery.min.js version. Can you tell me which version of JQuery you are using?

Akshay Chawla Over a year ago

Hi Amit, Can you tell me what exactly Output you want with your JS code ? I mean like what you are trying to do and what output is coming.

Amit Kushwaha Over a year ago

Hi Akshay, thanks for your help. I posted my answer. check it. I gave you reputation for your nice help and care. Thanks a lot.

Amit Kushwaha Over a year ago

hey Akshay after my 15 reputation it will be added in your account Stackoverflow says that.

Amit Kushwaha · Accepted Answer · 2015-08-26 09:14:54Z

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();
    ?>

Collectives™ on Stack Overflow

JQuery function for multiple button event with different Id

4 Answers 4

1 Comment

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related