i have a problem with my click changing image, i have database messages , every message has a status 0 or 1 , from my code o have to click on status image and it will change, its changes BUT only for the first Message. When i click to other message status it not changes but changes only for the first status. how can i go this run!!!
<script type="text/javascript">
$(function() {
$('.imageCheck').click(function(e){
e.preventDefault();
$("#bg").attr('src',"/application/admin/img/tick.png");
});
});
</script>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php
foreach ($users as $user):
?>
<tr>
<td><?=$user['id']?></td>
<td>
<div class="imageCheck"><img id="bg" src="<?php echo $img_path;?>publish_x.png" name="statusCheck" value="0" />
</div>
</td>
You need to change the #bg in the your message control. In event handler use find to get nested bg element.
$('.imageCheck').click(function(e){
e.preventDefault();
$(this).find("#bg").attr('src',"/application/admin/img/tick.png");
});
Because an ID can (or rather should) only exist once in the DOM. jQuery is only changing the first element that matches the selector #bg. Try using a class instead:
<img class="bg" />
$('.bg').attr('src', '...');
Ids are supposed to be unique on a page. Since you are looping you are going to have multiple imgs with id bg, so only the first one works.
as BenM states change it to .bg also update your code to find the exact image below the div
$(".bg", $(this)).attr('src',"/application/admin/img/tick.png");
Related
I have a far loop which check the number and output the result to number of that.
For exmaple, in below picture the "cut image" is displayed in multiples times. I have tag in the far loop so it outputs the image according to number of times. And that number come from database.
MY Question.
Obviously all the images in first row will have same ID. Currently user can only click the first image of the row. I would like to give each element different ID if possible. Than I would like to use JQuery to add click event. So if I click on 4th image in first row, it alert message and if i click 5th image it shows different alert message.
How I can assign different ID to each element in far loop so it does only make first Image clickable but instead all elements clickable.
My loop
<table class="table table-bordered">
<thead>
<tbody>
<tr>
<?php
for($x=0; $x < $row['noof10s_vnr']; $x++){
?>
<td><img alt="" class="yellow-process center-block " id ="cut-full-roll-<?php echo $row['id_vnr']; ?>" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
<?php
}
?>
</tr>
</tbody>
</table>
My jquery selector
If I can give each element different ID, than I can do something like this to add clicked event to clicked image.
jQuery( "#vinyl-roll-down-<?php echo $row['id_vnr']; ?>" ).click(function() {
But I need help assign different unique to each element in far loop.
Thanks in advance.
I think your loop in PHP is okay like that.
The problem lies in your jquery, try getting the right id by using use attribute
selector attr("id").
jQuery( ".yellow-process" ).click(function() {
var selected = jQuery(this).attr("id");
alert(selected); // to show the selected image id
// use the variable selected to do something with it.
}
After trying this jquery code you could advance it for your use.
You can try this
In html:
<table class="table table-bordered">
<thead>
<tbody>
<tr>
<?php
for($x=0; $x < $row['noof10s_vnr']; $x++){
?>
<td><img id="image{{$x}}" alt="" class="yellow-process center-block " onclick="imageClick(<?php echo $row['id_vnr']; ?>)" name="<?php echo $row['id_vnr']; ?>" src="../../css/icons/vinyl-rolls/cut.png"></td>
<?php
}
?>
</tr>
</tbody>
</table>
in jquery
function imageClick(id) {
alert(id);
var imageId = jQuery(this).attr("id");
alert(imageId);
// your code
}
I thigh it will help you.
$( ".yellow-process" ).bind("click",function() {
var selected = $(this).attr("id");
alert(selected); // to show the selected image id
// use the variable selected to do something with it.
});
Your php code written in the right way and working as expected just for jquery above is the working code
http://www.leandrovieira.com/projects/jquery/lightbox/ sample
so i have get images in while loop here is my code
<td id="gallery">
<a href='<?=$path ?>'>
<img width="50" height="50" src=<?php echo $path; ?> />
</a>
</td>
$(function() {
$('#gallery a').lightBox();
});
</script>
when i click first image light box effect works fine but when i click second image light box effect does n't work please guide me
Thanks for Advance
The problem is you have multiple <td id="gallery". You shouldn't use the same id for multiple elements, because $('#gallery') would always return the first one, but also because it's wrong!
Either move it into the table: <table id="gallery",
or change it to class: <td class="gallery" and change the query: $('.gallery a').lightBox();
Ok,
Firstly, if you click on the questions link at the top of this page, each question has some buttons at the bottom that pertain to the question. when you mouseover them it shows more about the button. How is this done? I want to do this on my site.
So basically, i am using a php while loop to echo listitems's queried from a users id in mysql.
each listitem contains some more block and inline elements. some of those block elements have onmouseover/mouseout events attached to them. yet if i use the same class name on those elements, when i trigger a mouseover, it triggers every element with that class name. I am new to php / js / jquery, and not sure on the best way to go about it. any help would be grand. Example below.
<ul class="ulclass">
<?php
$link = mysql_query("SELECT * FROM table WHERE id='".$_SESSION['id']."' ORDER BY lid");
$i = 1;
while ($row=mysql_fetch_assoc($link)) {
$ico = $row['url'];
echo '
<li>
<a href="'.$row['url'].'" target="_blank" >
<div class="title">'.$row['title'].'</div>
</a>
<div onclick="/*here i want to change the next div.css display to block*/">
<img src="something.png" class="something_img"/>
<div class="drop_menu" id="drop_menu'.$i.'"
onmouseout="t=setTimeout(\'/*here i want to change this div.
css display back to none*/\',300);" >
<form method="post" action="" onmouseover="clearTimeout(t);">
<input type="hidden" name="deletetitle" value="'.$row['hash'].'"/>
<input type="submit" class="" name="delete" value="x"/>
</form>
</div>
</div>
</li>';
$i++;
}
?>
</ul>
let's fix some little things first. You don't really need to put all the HTML in a string, you can just do stuff like:
<?php
while ( $i < 10 ) {
?>
<li>Line number <?php echo $i; ?></li>
<?php
$i++;
}
?>
This way you will retain syntax highlighting and you won't have all kinds of problems that will arise from using string (like having to escape all single quotes etc.).
On the subject of JavaScript / jQuery – you shouldn't really use inline event handlers, such as onclick / onmouseover. It's really hard to maintain mixed up code, it's already enough there is HTML and PHP, don't add JavaScript to the same place. You should put in a separate file (or at least in a separate <script> tag before the closing </body> tag) and hook to the elements by their classes. I simplified your code a little, I am also not 100% sure what you wanted to achieve with the code you posted, but judging by the example of stackoverlow tag links, I will do something similiar:
<a href="'.$row['url'].'" target="_blank" class="tag">
<div class="title">'.$row['title'].'</div>
<div class="drop-out">Content of the drop-out.</div>
</a>
So, we have class tag for the link, and we want to hover it and see the internal element, and we take the mouse out it should disappear, let's see what jQuery we need for that (don't forget to add it to your page):
$('.tag').hover(
function () {
// `this` points to the DOM element we are hovering
$(this).children('.drop-out').css({
display : 'block'
, opacity : 1
});
}
, function () {
$(this).children('.drop-out').animate({
opacity : 0
}, 350, function () {
$(this).css('display', 'none');
});
}
);
Here's the example: http://jsfiddle.net/R6sYD/
jQuery methods used in this example:
http://api.jquery.com/hover/
http://api.jquery.com/children/
http://api.jquery.com/css/
http://api.jquery.com/animate/
Hope this helps.
I have jQuery Tabs in which each tab and corresponding content are populated by a PHP foreach loop.
For each tab the user can upload a picture. I have this setup in a way so that as soon as the user chooses a file, a jquery script makes the upload begin automatically -- and the browse button is hidden and replaced by "Uploading your picture".
Here is the code (CI markup):
<ul class="tab_header">
<?php foreach ($p as $row):
echo '<li>
' . $row->p_name . '
</li>';
endforeach; ?>
</ul>
<?php foreach ($p as $row): ?>
<div id="tabs-<?php echo $row->p_id; ?>">
<?php echo form_open_multipart('/p/p_upload_picture/' . $row->p_id, 'id="upload_form"');
echo form_upload('userfile', '', 'id="file_select"');
echo form_hidden('upload','upload');
echo form_close(); ?>
<div id="loading" style="display:none;">
Uploading your picture...
</div>
</div>
<?php endforeach; ?>
<script>
$(function(){
$("#file_select").change(function(){
$("#upload_form").submit();
$("#upload_form_div").hide();
$("#loading").show();
});
});
</script>
This works perfectly but only on the first tab.
In all other tabs, the jquery script doesn't run -- as soon as I choose a file, the file name is shown in the browse button field instead, and no upload happens (form isn't submitted).
I wonder if this has to do with the script not being initialized for the other tabs.
How can I fix this?
Thanks for helping, much appreciated.
Your field has an id. Which should be unique per element.
jQuery only returns the first element it encounters with the given id, that's why your code isn't working. I would suggest adding a class instead of an id to your field.
$('.class-of-field')..change(function() {
..
});
The above should do the job.
This would be the equivalent code without jQuery:
var el = document.getElementById('file_select');
Which only returns one element, have a look at the documentation.
I am attempting to write some jQuery code that will expand a paragraph when a link is clicked and once expanded present another link that will allow the paragraph to be collapsed. These paragraphs are all generated within a foreach loop and I am having trouble selecting the correct paragraph because I am not sure of the best way to create unique IDs to pass back to jQuery because there in a loop.
Here is my view code:
<? foreach ($e['comments'] as $comment) : ?>
<div class="comment">
<p class="collapsed">
<?=character_limiter($comment['comment'], 100) ?><br />
Show More
</p>
<p class="expanded">
<?=$comment['comment'] ?>
<a href="#" class="collapse" >Show Less</a>
</p>
</div>
<? endforeach; ?>
And here is what I have so far with jQuery:
$(document).ready(function()
{
$("p.expanded").hide();
$("a.expand").click(function()
{
$(this).parent().hide();
return false;
});
});
I am able to hide the correct when clicking "Show More", however I am lost as to choosing the correct "expanded" paragraph and then implementing the opposite for collapsing.
My thoughts so far are that I need to somehow make the elements in question have unique ideas. The $comment array does have an 'id' value that code be appended to an id name for each attribute making them unique, but I am still confused about how to properly select things with jQuery.
IDs aren't the only way to target individual elements - you can target elements around the current jQuery element using a variety of methods, just like you have with parent.
You should be able to target the corresponding "expanded" block using siblings():
$("a.expand").click(function()
{
$(this).parent().hide();
$(this).parent().siblings('.expanded').show();
return false;
});