I got this script:
<script>
$('#zoom_01').elevateZoom({});
</script>
Where #zoom_01 is an ID of an image. I have many images with ID's like so:
zoom_01
zoom_02
zoom_03
zoom_04
and so on
How do i make so that javascript would take all ID's instead of one?
I was thinking something like this:
<script>
<?php
foreach ($ArrayAllOfIDs as $i) {
$('#<?php echo $i; } ?>').elevateZoom({});
}
?>
</script>
But it didnt work.
Although using the class attribute as mentioned above is probably your best bet, if you are forced to work with the IDs for whatever reason You can use a "starts with" selector like
$("[id^=zoom_]").elevateZoom({})
which will apply elevateZoom to all DOM elements with an id that starts with "zoom_".
Add a class to all the images that would be affected at the same time.
Ids are used to identify a unique, non repeating item. Since your images are all pretty much the same, a class can group them together.
Then, change your javascript to select the class.
$('.zoom').elevateZoom({});
I don't know what elevateZoom is, but you can likely have this syntax:
$('#zoom_01, #zoom_02, #zoom_03, ...').elevateZoom({});
Make the PHP write out the Javascript so it is available when the page is loaded in the browser.
<script>
<?php
foreach ($ArrayAllOfIDs as $i) {
echo '$(\'#zoom_'. $i .'} \').elevateZoom({});\n';
}
?>
</script>
Related
I am querying the database and for each object echoing DOM elements with database results. I am using toggle to show one variable and hide another:
$(document).ready(function(){
$("#name_toggle").click(function(){
$("#hidden_onhover").toggle();
$("#onhover").toggle();
});
});
PHP:
echo "<span id=\"onhover\">$row->common_name</span><span id=\"hidden_onhover\">$row->firstname $row->lastname</span>";
The problem is that if database returns 10 objects, I have 10 lines of results, but toggle only works on the first element. Any ideas what I am doing wrong?
Thanks in advance.
It's because you're using IDs. It should be replaced with classes and you need to change the jQuery code accordingly. So your PHP code would look something like this,
echo "<span class=\"onhover\">$row->common_name</span><span class=\"hidden_onhover\">$row->firstname $row->lastname</span>";
And jQuery code would look something like this:
$(document).ready(function(){
$(".name_toggle").click(function(){
$(this).find(".hidden_onhover").toggle();
$(this).find(".onhover").toggle();
});
});
Also make sure to make name_toggle as a class instead of ID. Above code assumes name_toggle DIV is parent of hidden_onhover and onhover DIV.
I am pulling my id's from a database with a foreach loop in a html file using
<div id="<?php print ($schedule['boxA']); ?>">
The question is how to use id's generated this way in a jQuery script?
<script>
jQuery('I NEED TO INPUT ID HERE').datetimepicker({
datepicker:false,
format:'H:i',
step: 15,
});
</script>
I would (and do) use a different pattern. You don't need to use the ID to reference an element with jQuery, so you can add a datetimepicker widget more generically by using the class selector.
HTML (inside foreach loop):
<div class="timepicker" id="<?php echo $schedule['boxA']; ?>">
JavaScript (only once):
<script>
jQuery('.timepicker').datetimepicker({
datepicker:false,
format:'H:i',
step: 15,
});
</script>
You would use the generated id's the same way that you always do in jQuery.
jQuery('#generated_id') // replace 'generated_id' with the id supplied by PHP
If you are wanting to echo the id's you could do something like this when the page is being rendered -
jQuery("#<?php echo $schedule['boxA']; ?>").datetimepicker({
Bad idea.
I would suggest something like:
<div id="boxA" data-id="<?=$schedule['boxA']?>">
Or similar. The ID should be constant and known - that's what makes it an IDentifier. data-id can then be used to hold the server's ID reference to the thing in question.
When i embed or use php loops to create multiple div's with some id.
I want each of them to use with jquery. Say anything like simple hide/show interface.
But as the id is the same it wont work. I assign a variable lets say $i to php loop for the reference of uniqueness. I can assign id to a DOM element with like
<div id="element-<php echo $i ?>">Bla Bla </div>
Php echoes out here perfectly but how do i use it with jquery something like this:
$("#element"+<?php echo $i ?>).toggle();
Here it doesnt works.
How do i do it correctly and where am i going wrong ?
Sorry for bad english.
Thanks
You can try this
<script>
function togl(id)
{
$("#element"+id).toggle();
}
</script>
<?php
for ($i=0;$<10;$i++)
echo '<div id="element-'.$i.'" onclick="toggle('.$i.')">Bla Bla </div>';
?>
the proper syntax for a php code is:
<?php
//code
?>
So here you can clearly see what is the error:
<php echo $i ?>
It should be:
<?php echo $i; ?>
Updated answer:
<?php
for ($k=0;$k<=100;$k++)
echo '<div id="element-'.$k.'" onclick="toggleID('.$k.')">Here is the content of div $k</div>';
?>
<script>
function toggleID(id)
{
$("#element"+id).toggle();
}
</script>
You didn't include the dash in the jQuery code and you also don't need to concatenate the strings:
$("#element-<?php echo $i; ?>").toggle();
PHP is interpreted on the server and JavaScript is interpreted on the client. You should never consider concatenating strings between these environments since they are two different steps in serving your application.
I think your code for the javascript should be like this instead of what you posted.
$("#element-"+<?php echo $i ?>).toggle();
However I wouldn't recommend this approach as it's not very efficiant. It will trigger a lot of jQuery lookups.
You'd be better off giving all the divs in question a class and then using the class to reference them in jQuery.
<div class="toggleThis" id="element-<php echo $i ?>">Bla Bla </div>
$(".toggleThis").toggle();
Your problem is that you didnt' close your php statement:
You're missing the ";?>"
try this:
;?>
ath the end of your statement
EDITED:
plus you're missing the "-" between "element" and "id":
Ex. element-1
try including the "minus":
$("#element-"+id)
The problem is that you cannot have the same ID's. But if you just want simple show/hide functionality, you should add a class to your div instead of an ID. So..
class="toggableDiv"
and then in jQuery
$(".toggableDiv").click();
here is my code
<div id="lara">some crap</div>
<div id="jerk">some crap</div>
<div id="yessir">some crap</div>
basically i'm wondering if there is a way to replace the filename (of the image) with some php that will dynamically add the id of the parent div in its place.
why you ask? i have several links like this where the id matches the filename, and i feel as though i should not have to manually type each file name in. I believe i've seen this done in ASP, but am not sure what the method is called, or if it's possible in php.
help!
I hope I understood you:
$arr = array("foo", "foo1", "foo2");
foreach($foo as $item){
echo "<div id='$item'><a href='www.something.com/$item'>$item</a></div>";
}
The quickest way I could think if would be to make it into a function..
function printDiv($name) {
echo "<div id='$name'><a href='http://anywhere.com/work/$name.jpg'>some crap</a></div>";
}
To call it, do the following:
printDiv('lara');
You might want to modify this to return a string instead of echoing depending on what you're doing..
The only way you can do this in PHP is if you have the ids in a variable in PHP.
<div id="<?=$name?>">some crap
Otherwise you will have to do it in Javascript, maybe with something like jQuery: http://jquery.com/
I have the following jQuery code in my PHP file (edited Jan 19 2010 # 10:40 MST):
<?php
$count = 0;
foreach($attachments as $attachment) :
echo '<script type="text/javascript">
$(\'#a_'.$count.'\').click(function() {
$(\'#d_'.$count.'\').show(200);
});
// if "no" is clicked
$(\'#d_'.$count.' .no\').click(function() {
$(\'#d_'.$count.'\').hide(200);
});
// if "yes" is clicked
$(\'#d_'.$count.' .yes\').click(function() {
$(\'#d_'.$count.'\').hide(200);
// update database table -- this is why I need the script inside the for loop!
var jsonURL = \'http://path/to/update_db_script.php\';
$.getJSON(jsonURL, {\'post_id\' : '.$attachment->ID.'}, function(data) {
alert(\'Thank you. Your approval was received.\');
});
$(\'#a_'.$count.'\').replaceWith(\'<span>Approved</span>\');
});
</script>';
echo '<li>';
if($attachment->post_excerpt == 'approved') {
// Check the proof's status to see if it reads "approved"
echo '<span>Approved</span>';
} else { ?>
// If not yet approved, show options
<a class="approve" id="a_<?php echo $count; ?>" href="#">Click to Approve</a>
<div class="confirm-approval" id="d_<?php echo $count; ?>">
<p>Please confirm that you would like to approve this proof:</p>
<a class="yes" href="#">Yes, I approve</a>
<a class="no" href="#">No, not yet</a>
</div><?php
} ?>
</li>
<?php $count++;
endforeach; ?>
The page in question is available here. The "click to approve" links do not work (that's my problem).
When I view source, the PHP variables appear to have echoed properly inside the jQuery:
<script type="text/javascript">
$('#a_0').click(function() {
$('#d_0').show(200);
});
... etc ...
</script>
This looks correct, but nothing happens when I click any of the links. However, when I replace the PHP echo statements with plain numbers (0, 1, etc.) the click functions work as expected.
You may be asking: why on earth do you have this inside a for loop? The reason is that I need to retrieve the attachment->ID variable and pass it to an external PHP script. When someone clicks "approve" and confirms, the external script takes the attachment->ID and updates a database value to read "approved".
Why won't the click function fire when PHP is in place? Is there some kind of greater force at work here (e.g., hosting limitation), or am I missing a fundamental piece of how PHP and JavaScript interact?
Since you didn't post your HTML its a little hard to troubleshoot.
First, I am not sure why one is working and the other is not since the code it is outputting looks correct. Either way, I still would make some changes. Move your a_0,a_1, etc and d_0,d_1, etc into the id attribute instead of a class:
<div>Click Me</div>
<div class="confirm_approval" id="d_0">Show Me</div>
<div>Click Me</div>
<div class="confirm_approval" id="d_1">Show Me</div>
Now, instead of outputting your code in a loop in PHP, place this jQuery code once on your page:
$(document).ready(function(){
$("a.approve[id^='a_']").click(function(e){
var id = this.id.replace('a_',''); // Get the id for this link
$('#d_' + id + '.confirm-approval').show(200);
e.preventDefault();
});
});
This code finds any a element with the approve class that has an id that starts with a_. When this is clicked, it grabs the number off the id a_0 = 0 and uses that id to find the confirm-approval element and show it.
Since the javascript is run on the client and has no way of knowing whether the script was generated using PHP or not, I think that particular part is a wild goose chase...
When I replace the PHP echo statements
with plain numbers (0, 1, etc.) the
click function works as expected.
Do this again and compare the actual output using view-source in a browser. I'll bet you find that there is a difference between the working and failing scripts, other than one of them being generated by PHP.
It seems that the problem is in jQuery selectors. Instead of dynamically binding click() events on multiple objects with an output of PHP code, use just one class selector and bind to objects with this class. And you can specify an id attribute to make them unique.
Something strange too is to have the script tag and the
$(document).ready(function()
in the loop. I don't know if this causes any problems, but it's sure not very efficient, one time is enough.