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.
Related
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>
This is my first attempt at jQuery and I'm using a basic tutorial I found here: http://papermashup.com/simple-jquery-showhide-div/#
This is my current code and how the jQuery works: http://jsfiddle.net/mZQsu/
As you can see, when you click the '+/-' it opens all 4 of the tables/DIVs.
How can I modify this code to open just the relevant secondary table/div according to the original table?
(Please note the secondary tables are generated dynamically from PHP and SQL data)
Thanks.
P.S all my code is here http://jsfiddle.net/mZQsu/ instead of clogging up this question page :)
DEMO fiddle
$('.toggler').click(function() { // had to differentiate the main togglers with a new class
var ind = $(this).parents('tr').index()-1; // could change
$(".slidingDiv").eq(ind).slideToggle();
});
$('.show_hide').click(function() { // this are the 'togglers' inside the big menus
$(this).parents(".slidingDiv").slideToggle();
});
The best solution would be if you tag each of your div's with an id. E.g.
<div class="slidingDiv" id="ip_127_0_0_1">
and then modify the equivalent links to do
$("#ip_127_0_0_1").slideToggle();
so just the associated div gets expanded.
See my updated fiddle: http://jsfiddle.net/mZQsu/1/
You can use the index of the row, and toggle only the matching row of the other table using jQuery index and eq
See the relivant docs here:
jQuery index
jQuery eq
This should work:
$('.show_hide').click(function() {
$(this).parents(".slidingDiv").slideToggle();
});
Since the slidingDiv class is a direct parent of the show_hide link, I could have used "parent" rather than "parents". The latter provides more flexibility because it traverses all ancestors looking for the class.
Here is a modified code - http://jsfiddle.net/mZQsu/3/
I have added show-hide1, show-hide2, show-hide3, show-hide4.
And clicking on it opens respectively slidingDiv1, slidingDiv2, slidingDiv3, slidingDiv4.
When you are binding to an event: You can always grab that event target and reference it.
$('.show_hide').click(function(e) {
$(e.target).parent("div.slidingDiv").slideToggle();
});
.parent() is a good place to start, but .closest() also might work. That being said, this is the preferred way to go about it.
On a side note if you ever want to do the opposite you could use .not(e.target) and all the other elements except for the one your click will be called.
Since your html is PHP-generated, it should not be a problem to include unique IDs for both +- links and sliding divs, for example:
a href="#" class="show_hide" id="show_hide2"
And
div class="slidingDiv" id="slidingDiv2"
Then in your click function you get the index of the div that you want to open:
$(.show_hide).click(function(){
var $str = $(this).attr('id');
var $index = $str.charAt( $str.length-1 );
});
Now you can use index to open the div:
var divName = "#slidingDiv" + $index;
$(divName).slideToggle();
i have this situation:
if(isset($_POST["sm"]) {
print "<br><div id=\"redirect\">success</div>";
}
in javascript i have:
$('#redirect').delay(2000).fadeOut('slow');
what happens is that if the form is submitted that div shows up for two seconds then faced out, but i also want to trigger a click by using: $('#test').trigger('click');
how can i connect them together so that when the div shows i also trigger the click.
also i cant use javascript inside the php if statement
any ideas?
thanks
Maybe something like this:
$("#redirect").fadeOut("2000", function(){
$('#test').trigger('click');
});
I am trying to expand on some code written by someone else, but I am having trouble using one of the javascript variables. If I set it in the title of a div or something similar like so:
$("#test12").attr("title" , ccode);
then it works fine and the title of the div is 'CA', which it should be. But if I try to put it into the text area of the div, then it tries to run a function or something but I can't see where it's doing it.
Is there a way I can convert it to simple text and stop it from running any functions?
Thanks for any help
Edit:
This is all of the code I can see at the moment:
<script>
//<!--
function loadForeignOffices(ccode){
//load window with details...
$('#iframe_3').attr("src", "<?php echo $html->url("/", true); ?>erc/maps/contacts/"+ccode);
$("#test12").attr("title" , ccode);
}
//-->
</script>
Basically what I'm trying to do is use the ccode variable because I want to display CA on the screen, but when I try to do that it seems to run some other function and fails, and doesnt show CA.
You may need to brush up on your jQuery dot-operators:
.load() is an ajax call that will load the contents of () into the selected element. In one of your comments you mention you are trying to do this $("#test12").load(ccode); which is inherently silly, if ccode is the string "CA"
.attr() will change the attributes of the selected element. If you are trying to display "CA", $("#test12").attr("title" , ccode); this will clearly not accomplish that -- As "CA" is added to the title attribute. As in <div id="test12" title="CA"></div>
Perhaps what you are looking for is .html() which inserts the string into the selected element. Or even .innerText()
Why don't you spend some time reading the jQuery documentation. A little bit goes a long way!
Keep in mind your PHP code is executing first on the server, then your javascript.
Here's a JS Fiddle as a start: http://jsfiddle.net/QsFJ4/3/
I am trying to pass an id value to a php script with jquery.
So, I was trying to create a link:
Superman
and when this link is clicked, I would like jquery to grab the id value and place it in the php script or php grabs the id? im not sure the best way.
I want the id value so it can be placed in a mysql query like this:
SELECT * FROM hero_db WHERE category="superman"
So, i get the id and place it in for the category as seen above.
I have trying many things, but am unfamiliar with jquery but trying to learn as much as I can.
Thank you for any help on this.
It sounds like you want to load HTML when the link is clicked. If so you need markup something like this:
Superman
<div id="superman_data">
</div>
with Javascript:
$("a.loaddata").click(function() {
$("#" + this.id + "_data").load('/loaddata.php', {id: this.id});
return false;
});
What this does is binds an event listener to all anchors with a class of "loaddata". When it's clicked on, the ID is passed to loaddata.php. That script should return HTML. It is loaded into the named div.
There are various jQuery Ajax methods. Which one you use depends on what you want to achieve.
$.post('http://PHP_SCRIPT_URL', {id: $('a.yourlik').attr('id')});