In my application there is a page where I generate dynamic links based on the data from mysql DB. My task is to set a class="active" for the selected link. If the links where static I can give active class using page name like this. But what to do in my case? Is there any way to get this done?
Here is my code:
<div class="select-region clearfix">
<input type="hidden" id="rgnId" name="rgnId">
<input type="hidden" id="hltypId" name="hltypId">
<ul class="nav">
<li>Select your region</li>
<li value="0"><a class="active" id="show_0" onClick="UAEHolydayDetails(0)">All<span class="badge"><?php echo $uaedetailscount?></span></a></li>
<?php
$i=0;
while($rowrgn = $rsltrgn->fetchAssoc())
{
?>
<li><a id="show_<?php echo $rowrgn['rgnId']; ?>" onClick="UAEHolydayDetails(<?php echo $rowrgn['rgnId']; ?>)"><?php echo $rowrgn['rgnName']; ?><span class="badge">
<?php echo $rowrgn['regioncount'];?></span></a></li>
<?php } ?>
</ul>
</div>
can anyone please help me
Edit 1
when I click any of these dynamic links it passes an id to the same page through js and the page will be filled with data from DB based on this paseed id like this:
onClick="UAEHolydayDetails(<?php echo $rowrgn['rgnId']; ?>)"
js:
<script>
function HolytypeDetails(id){
$('#hltypId').val(id);
window.location='uae-holidays.php?hltypId='+id;
}
</script>
in script the page in window.location is the page where the links are generated itself
Of course. It's the same thing. You need to know your active item id and based on this information just chose the item you want.
<?php
$activePageId = 5;
$i=0;
while($rowrgn = $rsltrgn->fetchAssoc())
{
?>
<li <?php if($rowrgn['rgnId'] === $activePageId){ ?>class="active"<?php } ?>><a id="show_<?php echo $rowrgn['rgnId']; ?>" onClick="UAEHolydayDetails(<?php echo $rowrgn['rgnId']; ?>)"><?php echo $rowrgn['rgnName']; ?><span class="badge">
<?php echo $rowrgn['regioncount'];?></span></a></li>
<?php } ?>
You may just use a selector to grab it via the href
Example with jquery:
$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
Related
I need to know How to pass variable between two web pages with PHP without using session , have a DIV link in which inside there is id i want to pass to another page when a link is clicked but i fail to do it. please help me:
firstpage.php ( where there is a link) :
......
<?php
$identity = $_POST['book_id'];
while($ResultsRow=mysql_fetch_array($res)) {
?>
<div class="col-md-2 offset-md-2">
<div class='thumbnail'>
<a href="shopping.php?<?php echo $identity?>" target="blank">
<input type="text" name="book_id" value="<?php echo
$ResultsRow['id'] ?>">
</div>
</div>
</a> <!-- end of link -->
..........
Secondpage.php (where i want to retrieve book id):
....
<p> <?php $myvarC = $_POST['identity'];
echo $myvarC;
?> </p>
....
I think you should try something like below:
firstpage.php
<a href="shopping.php?identity=<?php echo $identity?>" target="blank">
secondpage.php
<p> <?php $myvarC = $_GET['identity'];
echo $myvarC;
?> </p>
You can include it in the urlquery like
shopping.php?id=1234
and then read it on the other side.
You can do this by $_GET;
First Page
<a href="shopping.php?id=<?php echo $identity?>" target="blank">
Second Page
<?php $myvarC = $_GET['id'];
echo $myvarC;
?>
Create a correct url with parameters
<a href="shopping.php?id=<?php echo $identity?>" target="_blank">
And get that value using
<?php
$myVarC = $_GET['id'];
echo $myVarC
?>
First Page
<a href="shopping.php?identity=<?php echo $identity?>" target="blank">
Second Page
<p> <?php $myvarC = $_REQUEST['identity'];
echo $myvarC;
?> </p>
<div class="priceStruct" id="priceStruct">
<h3>Pallet Cost Structure</h3>
<?php $i=1;
foreach($price_structure as $price_structure_list) {
$palletDetails = $price_structure_list['min']." - ".$price_structure_list['max'];
?>
<div class="display_content" id="price<?php echo $i; ?>">
<span class="first price" id="first<?php echo $i; ?>" ><?php echo $palletDetails." Pallets";?></span>
<span class="second price" id="second<?php echo $i; ?>">£<?php echo $price_structure_list['price'];?></span>
<span class="third price"><a href="#" class="breakDown" >Click Here for Break Down</a></span>
</div>
<?php $i++; } ?>
</div>
Try this. Class should be second_price instead of second price.
Dont forget to include jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
$(function(){
$(".breakDown").click(function(){
spanValue = $('.second_price').text();
alert(spanValue);// just to check
});
});
Solution 1:
Add this to your a tag:
onclick="alert($('#second<?php echo $i; ?>').text());"
So that it will result in:
Click Here for Break Down
Solution 2:
You can also use jQuery's parent and siblings to find the correct span tag:
$(document).ready(function() {
$('.breakDown').click(function() {
alert($(this).parent().siblings('.second').text());
});
});
The disadvantage of solution 2 is that you'll run in problems when the structure of your HTML code is changed (the a tag is no longer not a child of span etc.)
I have a div that includes shoutbox posts. I'm using jQuery and ajax to change the pages within the div. However, when the page changes, it loses the link to the javascript file so that the next time I try to change the page it actually continues with the link action instead of doing the ajax in the background. Then after that it's back to normal and it alternates back and forth between being linked to the file and not.
Also before, it was rendering the whole page so that my layout was being displayed on the refresh instead of just the shoutbox posts. I'm guessing that finally getting it to refresh without re displaying the whole layout again is what's causing it to lose the connection to the javascript file.
This is the code for the posts. The shoutbox_arrows contains the links to change the page. refresh_me is what I'm loading into my div to refresh the content.
<div id="shoutbox_arrows">
<?php $current_page=s tr_replace( '?', '#', getURI(fullURL())); ?>
<ul class="no_dots">
<li id="first_page"><<
</li>
<li id="previous_page"><
</li>
<li><strong>Pg#<?php if ($page > $last_page) {echo $last_page;} else {echo $_SESSION['shoutbox_page'];} ?></strong>
</li>
<li id="next_page">>
</li>
<li id="last_page">>>
</li>
</ul>
</div>
<div id="shoutbox" class="custom_scrollbar">
<div id="refresh_me">
<?php if (sizeof($shouts)==0 ) { ?>
<p>There are no posts.</p>
<?php } foreach ($shouts as $shout) { foreach ($shout as $k=>$v) { $shout[$k] = utf8_encode($v); if ($k == 'guest') { $shout[$k] = ucwords($v); } } ?>
<div class="post_info">
<div class="left">
<?php if ($shout[ 'user_id']==n ull) {echo $shout[ 'guest'];} else { ?><?php echo ucwords(userinfo($shout['user_id'])->username); ?>
<?php } ?>
</div>
<div class="right">
<?php time_format($shout[ 'created_at']); ?>
</div>
</div>
<p class="post_comment" id="shoutbox_comment_<?php echo $shout['id']; ?>">
<?php echo $shout[ 'comment']; ?>
</p>
<?php if (!$shout[ 'last_edited_by']==n ull) { ?>
<p class="last_edited">Edited by
<?php echo ucwords(userinfo($shout[ 'last_edited_by'])->username); ?>
<?php time_prefix($shout[ 'updated_at']); ?>
<?php time_format($shout[ 'updated_at']); ?>.</p>
<?php } ?>
<?php if (current_user()) { if (current_user()->user_id == $shout['user_id'] or current_user()->is_mod) { ?>
<p class="post_edit"> <span class="edit" id="<?php echo $page; ?>">
<a id="<?php echo $shout['id']; ?>" href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
edit
</a>
</span> | <span class="delete" id="<?php echo $page; ?>">
<a href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
delete
</a>
</span>
<span class="hide" id="<?php echo $page; ?>">
<?php if (current_user()->is_mod) { ?> | <a href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
hide
</a><?php } ?>
</span>
</p>
<?php }} ?>
<?php } ?>
</div>
</div>
This is the page that my ajax request is going to.
<?php
if (isset($data['page'])) {
$_SESSION['shoutbox_page'] = intval($data['page']);
}
$redirect = ltrim(str_replace('#', '?', $data['redirect']), '/');
redirect_to($redirect);
Div that contains the content to be refreshed.
<div id="shoutbox_container">
<?php relativeInclude( 'views/shoutbox/shoutbox'); ?>
</div>
jQuery
$('#shoutbox_arrows ul li a').click(function (event) {
event.preventDefault();
$.post('views/shoutbox/' + $(this).attr('href'), function (data) {
$('#refresh_me').load(location.href + " #refresh_me>", "");
$('#shoutbox_arrows').load(location.href + " #shoutbox_arrows>", "");
});
});
So I guess to clarify the issue:
The shoutbox_container displays posts for the shoutbox. The page is controller by a session that gets passed as a variable to get the correct chunk of posts to show. Clicking on the links in shoutbox_arrows sends an ajax request to a page which changes the session variable. The div that contains the post itself (refresh_me) as well as the arrows (for the links) get refreshed. After changing the page once, the shoutbox is no longer connected to the javascript file so when you click to change the page again, instead of an ajax request, the page itself actually changes to the link.
Any ideas how I can fix this? I've spent a lot of time on this and it's getting rather frustrating. I feel like I could just settle for it as it is now but it's bugging me too much that it's not working exactly how I intend (although generally it works in terms of changing the pages).
Also just a note, I used jsfiddle to tidy up the code but it looks like it did some funky stuff (looking just at $current_page=s tr_replace). lol. So there aren't any syntax errors if that's what you're thinking. ><
Also I was going to set up a fiddle but I don't really know how to handle links in it so it would have been useless.
The issue is that you bind the click handler to the a tags on document ready (the jQuery code you provided). So when you replace the content of #shoutbox_arrows you remove the click handler you previously attached since those original handlers are removed from the DOM along with the original elements.
You need to use the jQuery .on() method and event bubbling. This will attach the handler on a parent element that will not be removed in your content replace and can continue to "watch" for the event to bubble up from it children elements.
Try replacing your jQuery code with this:
$('#shoutbox_arrows').on('click', 'ul li a', function (event) {
event.preventDefault();
$.post('views/shoutbox/' + $(this).attr('href'), function (data) {
$('#refresh_me').load(location.href + " #refresh_me>", "");
$('#shoutbox_arrows').load(location.href + " #shoutbox_arrows>", "");
});
});
For performance, you should add a class to the a, and targeting it directly with $('a.aClass')
Good ways to improve jQuery selector performance?
How to know which HTML element is clicked using javascript and get its ID?
I have displayed 3 labels dynamically using PHP for pagination- Page 1 , 2, 3 ,
<label id="<?php echo 'labelofpagination'.$z; ?>" value="<?php echo $z; ?>" >
<a href=# onclick="paginationlabelclicked(); "><?php echo $z; ?>
</a>
</label>
Now i want that if 1 is clicked then 1-10 records are displayed , if 2 , then 11-20 and so on.For this i would run a MySQL query accordingly.
But how do i get the ID ,
Build on things that work. Start with a working link.
<a href="myScript.php?page=$z"
onclick="return paginationlabelclicked(this);">
<?php echo $z; ?>
</a>
Then your script can extract the value from the href attribute or the content.
function paginationlabelclicked(element) {
var page = element.firstChild.data;
// …
return false;
}
It would be a good idea to ditch the onclick attribute too.
try pass this to handler
<a href=# onclick="paginationlabelclicked(this); "><?php echo $z; ?>
</a>
and then you can access id by using
function paginationlabelclicked(el){
alert(el.id);
// your code
}
UPDATE
In order that to be working you have assign id to anchor
<a id="page<?php echo $z; ?>" href=# onclick="paginationlabelclicked(this); "><?php echo $z; ?>
</a>
and then you can access id by using
function paginationlabelclicked(el){
alert(el.id.replace('page', ''));
// your code
}
You can easily send the id into the function called onclick, something like that:
<label id="<?php echo 'labelofpagination'.$z; ?>" value="<?php echo $z; ?>" >
<a href=# onclick="paginationlabelclicked(<?php echo $z; ?>); "><?php echo $z; ?>
</a>
</label>
I'm assuming, what you want to do is to get the text out of the <a> link that was clicked on so you can know what number the user clicked on and you can use that for your query. Here's a jQuery version:
HTML:
<label id="labelofpagination">
1
2
3
4
5
</label>
Javascript:
$("#labelofpagination a").click(function() {
// get text, trim string, convert to number
var num = parseInt($(this).text().replace(/^\s+|\s+$/g, ""), 10);
// go to that page here
});
And a jsFiddle demo: http://jsfiddle.net/jfriend00/wesWd/
<a href=# onclick="paginationlabelclicked(this.parentNode); ">
...
function paginationlabelclicked(el){
alert(el.id);
// your code
}
I am creating a element dynamically in html and want to use it in a javascript function by referring to its ID. But as its ID is dynamically generated using PHP , so how do i pass it to the javascript function into getElementById?
Actually , i am trying to do pagination using javascript. I have displayed Page No.s, and put HREF on them, but onclick function am stuck up? Please help. My code is as below:
<?php
echo 'Page';
while($d>0)
{
?>
<input type="hidden" value="<?php echo $z; ?>" name="pagination" id="<?php echo 'pagination' .$z ; ">
<label id="<?php echo 'labelofpagination'.$z; ?>" >
<a href="#" onclick="PaginationLabelClicked(); submit();" >
<?php echo $z; ?>
</a>
</label>
<?php
$z++;
}
?>
in your javascript functio you can use the same PHP expression to get the id
var id="<?php echo '\"' .$z '\"'; >";
or you can have it like this,
<script type="text/javascript" language="javascript">
<!--
<?php
echo("id= $z;");
?>
// -->
</script>
to get the id
<label id="<?php echo 'labelofpagination'.$z; ?>" >
<a href="#" onclick="PaginationLabelClicked('<?php echo "\"" ."labelofpagination".$z ."\""; ?>'); submit();" >
<?php echo $z; ?>
</a>
</label>
and javascript
function PaginationLabelClicked(id){
// you can get the id here...
}