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...
}
Related
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');
<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 whose contents are retrieved asynch by $.post().
The contents retrieved are multiple images each with seperate ids.
I want each of the images to fadeToggle on hover()
So i calculate image id in my php on the spot, generate the image and add a jquery handler
and echo back the results:
<script type="text/javascript">
$(document).ready(function ()
{
$("<?php echo '#'.$postid.'image'; ?>").hover(function()
{
$(this).fadeToggle("fast");
},
function()
{
$(this).fadeToggle("fast");
});
});
HTML:
<div id="<?php echo $postid; ?>" class="post_box" >
<img src="<?php echo '/way2tweek'.$path.$name; ?>" width="500" class="img_get"
draggable="false" alt="<?php echo $postid; ?>" id="<?php echo $postid.'image'; ?>">
<div class="imageproperty" id="<?php echo $postid.'props'?>">
</div>
</div>
on the page images are received. scripts are received. the calculated ids match but the images are not fadeToggled. No Console debug message too. Please help.
You have both the hash and the dot in your PHP-generated selector:
<?php echo '#'.$postid.'.image'; ?>
produces a string like
#mypostid.image
I don't know your HTML structure, but you may want the selector to be #mypostid .image (note the space), so:
<?php echo '#'.$postid.' .image'; ?>
I am having a problem while changing the css property of elements having similar kind if id's using javascript.
I am running a php loop through a series of hidden elements. So I am having there id's like this imgstat_1, imgstat_2 and so on.
The code i am using is
foreach($img as $img1){?>
<li>
<a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
<img src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $img1->vchImgStatus?>" />
</a>
</li>
<input type = "hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
<?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">
and javascript like this
function changeimgstat(obj)
{
var xyz = document.getElementById('newimg').value;
alert(document.getElementById('abc_'+xyz));
document.getElementById('abc_'+obj).style.border="3px solid red";
var status = document.getElementById('imgstat_'+obj).value;
document.getElementById('newimg').value = status;
}
So could someone suggest what i am doing wrong
As I found there is no error in your code, but have you defined $counter before foreach loop. And your img id should be abc_<?php echo $counter?> rather than abc_<?php echo $img1->vchImgStatus?> which you are using in javascript.
Try:
CSS
.img3{border:3px solid red;}
.img{border:none;}
HTML and PHP
<?php
$counter=1;
foreach($img as $img1){?>
<li>
<a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
<img class="img" src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $counter?>" />
</a>
</li>
<input type="hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
<?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">
SCRIPT
<script>
function removeAllClass()
{
var allimg=document.getElementsByClassName("img");
for(var index=0;index<allimg.length;index++)
{
allimg[index].className = "img";
}
}
function changeimgstat(obj)
{
removeAllClass();
document.getElementById('abc_'+obj).className="img img3";
var status = document.getElementById('imgstat_'+obj).value;
document.getElementById('newimg').value = status;
}
</script>
The best solution is to add a css class attribute to elements. And write styles for the class.
In the onclick function you can add the class to the elements
It seems you have:
<img ... id="abc_<?php echo $img1->vchImgStatus?>">
and
<input ... value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
Are you sure these two elements will have the id you expect?
try the following:
foreach($img as $img1){?>
<li>
<a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
<img src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $counter;?>" />
</a>
</li>
<input type = "hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
<?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">
Javascript:
function changeimgstat(obj)
{
var xyz = document.getElementById('newimg').value;
alert(document.getElementById('abc_'+xyz));
document.getElementById('abc_'+obj).style.border="3px solid red";
var status = document.getElementById('imgstat_'+obj).value;
document.getElementById('newimg').value = status;
}
I have changes the id="abc_"
because in the javascript function the parameter passed by you is the counter so the same shoul be the id value.
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
}