CODEWITHSUNDEEP
javascriptjquery
user1477886
user1477886

Reputation: 263

How to change class of the div container?

I have a new problem with pagination:

<br><b>Page:</b><br/>
<?php
  for($i=0; $i<$count; $i++)
  {
    if ($i==0)
    {
      echo "<div class='selected_page_button'>".($i+1)." "."</div>";
    }
    else
    {
      echo "<div class='page_button'>".($i+1)." "."</div>";
    }
  }
?>

CSS code:

.page_button {
  height:20px;
  width:15px;
  padding-left:4px;
  padding-right:4px;
  display:block;
  float:left;
  border:2px solid #000000;
  margin-right:4px;
  text-decoration:none;
  text-align:center;
  cursor: pointer;
}

.selected_page_button {
  color : #FFFFFF;
  height:20px;
  width:15px;
  padding-left:4px;
  padding-right:4px;
  display:block;
  float:left;
  margin-right:4px;
  text-decoration:none;
  text-align:center;
  background:#0088cc;
  border:2px solid #000000;
}

And code for changing class of container:

$(".page_button").click(function () {
  $(".selected_page_button").attr("class", "page_button");
  $(this).attr("class", "selected_page_button");
});

It works correctly for all containers without first. When my page is created the first page is selected. When I click by "2", then "1" is simple and "2" is selected. The same thing is with all containers without "1": if I click by "2" (or other one) then I can't click by first! "1" changes it's view but doesn't change behavior, because simple container is clickable and selected container is not clickable!

Upvotes: 1

Views: 305

Answers (4)

jcubic
jcubic

Reputation: 66490

It's because you select only those $(".page_button") that have this class at the beginning and because you set .page_button later, the handler will not be executed.

You'll want to use 'live', or in the newer jQuery versions, the 'on' function

$(".page_button").on("click", function(event){
    $(".selected_page_button").attr("class", "page_button");
    $(this).attr("class", "selected_page_button");
});

Upvotes: 1

Tooraj Jam
Tooraj Jam

Reputation: 1612

Here is my code for better solution:

<br><b>Page:</b><br/>
<?php
  for($i=0; $i<$count; $i++)
  {
    if ($i==0)
    {
      echo "<div class='page_button selected'>".($i+1)." "."</div>";
    }
    else
    {
      echo "<div class='page_button'>".($i+1)." "."</div>";
    }
  }
?>

CSS code:

.page_button {
  height:20px;
  width:15px;
  padding-left:4px;
  padding-right:4px;
  display:block;
  float:left;
  border:2px solid #000000;
  margin-right:4px;
  text-decoration:none;
  text-align:center;
  cursor: pointer;
}

.selected {
  color : #FFFFFF;
}

And code for changing class of container:

$(".page_button").click(function () {
  $(".page_button").removeClass("selected");
  $(this).addClass("selected");
});

Upvotes: 0

Will Reese
Will Reese

Reputation: 2841

jcubic is correct with his solution but not his implementation. You need to make sure that the event is bound to all page_buttons, the ones that exist on page load and the ones that come into existence later.

jQuery's 'on' and 'live' functions can accomplish that. These functions bind listeners to container elements and wait for the event to bubble up to them, so that even if a page_button is added later, the event will still hit the listening container.

Here is the correct implementation of these functions:

$('#paginationLinkContainer').on('click','.page_button',function() {
    $('.selected_page_button').attr('class','page_button');
    $(this).attr('class','selected_page_button');
});

In this block, the listener is bound to the container (which you may need to add to your markup) and filters so that it executes only when the events source has bubbled from a '.page_button'.

And for older versions of jQuery

$('.page_button').live('click',function() {
    $('.selected_page_button').attr('class','page_button');
    $(this).attr('class','selected_page_button');
});

Upvotes: 0

idodev
idodev

Reputation: 334

How about:

$(".page_button").live("click",function () {
    $(".selected_page_button").removeClass("selected_page_button").addClass("page_button");
    $(this).removeClass("page_button").addClass("selected_page_button");
});

However, I would suggest a slight rewrite such that you have two classes of .page_button and .selected or some other naming wherein the div always has class .page_button and the selected has both classes .page_button.selected. The following could then be applied.

$(".page_button").live("click",function(){
    $(".page_button").removeClass("selected");
    $(this).addClass("selected");
});

Upvotes: 0

Related Questions