I am trying to use Backstretch to show photos. The plugin requires this code to correspond with a button to display the photo.
$("#someId").click(function(e) {
e.preventDefault();
$.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg');
});
I have a dynamic site built with PHP, I can loop through my photos to create the thumbnails and links, but I cant get the values into this code. This jQuery code needs to be looped through with the data from the photo PHP loop.
I tried using a .each() loop to grab the data, but still no luck.
Here is what I have so far
$(".id").each(function(){
var id;
var photo;
$(this).attr('id', function(i, val){
id = '#' + val;
$(".img").each(function(){
$(this).attr('src', function(i, val){
photo = val;
});
});
console.log(id)
console.log(photo)
$(id).click(function(e) {
e.preventDefault();
$.backstretch(photo);
});
});
});
Nothing seems, to work, any help would be appreciated.
HTML
<?php
$category = "urban";
$photos = Photo::find_all_category($category);
?>
<script src="js/plugins/jquery.js"></script>
<script src="js/plugins/jquery.backstretch.js"></script>
<div class="row urban">
<div class="col-lg-2">
<div class="row">
<?php foreach($photos as $photo): ?>
<a class="id" id="<?php echo $photo->id; ?>" src="admin/images/<?php echo $photo->filename; ?>"><img class="img-responsive" src="admin/images/<?php echo $photo->filename; ?>" alt=""></a>
<?php endforeach; ?>
</div>
</div>
<div class="col-lg-10">
<div class="backstretch"></div>
</div>
</div>
I changed the format to
$(".id").each(function(){
var id;
var photo;
id = '#' + (this).getAttribute('id');
console.log(id);
photo = (this).getAttribute('src');
console.log(photo);
$(id).click(function(e) {
e.preventDefault();
$(".backstretch").backstretch(photo);
});
});
And also found I was including jQuery twice. Removed it and it works. Thank you!
You can simply target the classname:
$('.id').click(function(ev){
ev.preventDefault();
$(".backstretch").backstretch($(this).attr('src'));
});
Related
I have my data show with arrays, but I have a problem when I want to click on one of the data that appear all the same, must be different, what is wrong with my script
<?php
foreach($data as $row){
?>
<a href="javascript:void(0)" class="set_module">
<div class="col-lg-4 col-xs-6">
<div class="post-module">
<div class="tmb">
<img src="<?php echo base_url();?>assets/file/image-module/<?php echo $row->image; ?>"/>
</div>
<input type="text" name="id_m[<?php echo $row->id_module;?>]" id="id_m" value="<?php echo $row->id_module;?>"></input>
</div>
</div>
</a>
<?php } ?>
This my jquery
$("a.set_module").on("click", function (event) {
event.preventDefault();
var value = $('#id_m').val();
alert(value);
return false;
});
the example above is I have data A, B, C and I show it by looping but when I click one of the data only data A keep appearing
Try like this
change id to class in this line
<input type="text" name="id_m[<?php echo $row->id_module;?>]" class="id_m" value="<?php echo $row->id_module;?>"></input>
and then in js
$("a.set_module").on("click", function (event) {
event.preventDefault();
var value = $(this).find('.id_m').val();
alert(value);
return false;
});
fidle example
http://jsfiddle.net/Q8KVC/3543/
use css class insted of id. and find that class with $(this).
or use dynamic id like id="id_m<?php echo $row->id_module;?>" and change this <a href="javascript:void(0)" class="set_module"> with <a href="javascript:void(0)" class="set_module" data-uid="<?php echo $row->id_module;?>">
. after that change the script
as follows
$("a.set_module").on("click", function (event) { event.preventDefault(); var uid = $(this).data('uid'); var value = $('#id_m'+uid).val(); alert(value); return false;});
I have one table generated by PHP
<div class="mailbox-list">
<ul>
<?php while ($row=$database->fetch_array($result)){?>
<li id="emal_new" name="<?php echo $row["id"];?>">
<a href="#" >
<div class="mail-checkbox">
<input class="filled-in" id="<?php echo $row["id"];?>" type="checkbox">
<label for="<?php echo $row["id"];?>"></label>
</div>
<h5 class="mail-author">VPN Access Manager</h5>
<h4 class="mail-title"><?php echo $row["naslov"]; ?></h4>
<p class="hide-on-small-and-down mail-text">
<?php $poruka_kratka = clear_mail($row['poruka']);
echo text($poruka_kratka,"75")?></p>
<div class="position-top-right p f-12 mail-date"><?php echo $row["datum"]; ?></div>
</a>
<div id ="user-result" />
</li>
<?php }?>
</ul>
</div>
And my JQCODE is:
<script>
$(document).ready(function() {
var x_timer;
$("#emal_new").bind('click', function (e){
clearTimeout(x_timer);
var email_id = $(this).attr("name");
x_timer = setTimeout(function(){
check_email_id_ajax(email_id);
}, 100);
});
function check_email_id_ajax(email_id){
$("#user-result").html('<img style="width: 24px; height:24px;" src="<?php echo WWW; echo 'includes/themes/'.THEME_NAME.'';?>/img/ajax.gif" />');
$.post('ajax/mailbox.php',{'email_id':email_id}, function(data) {
$("#user-result").html(data);
});
}
});
</script>
And i have about 30 and more data in table and only first at table works with that jquery bind? How can bind work on all objects?
I need when i click on some row in table call ajax for more information about that row called by name.
Thanks!
This is expected behaviors as Identifiers in HTML must be unique, Use a common class to bind event handlers, also I would recommend you to use data-* prefix custom attribute to store arbitary data, which can be accessed using .data()
Change the HTML as
<li class="emal_new" data-name="<?php echo $row["id"];?>">
<div class="user-result"></div>
</li>
Script
$(document).ready(function() {
var x_timer;
$(".emal_new").on('click', function(e) {
var email_id = $(this).data("name");
var userResult = $(this).find('.user-result')
if (x_timer)
clearTimeout(x_timer);
x_timer = setTimeout(function() {
check_email_id_ajax(email_id);
}, 100);
});
function check_email_id_ajax(userResult, email_id) {
userResult.html(TheHTML);
$.post('ajax/mailbox.php', {
'email_id': email_id
}, function(data) {
userResult.html(data);
});
}
});
Also not .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7
i am creating a comment system using the php and mysql to store data and ajax with jquery all the system work well but when it comes to the delete action nothing it happen like this button do not have any action or relation with the system can anyone help me ???
comment_box.php
<li class="comment-holder" id="_<?php echo $comment->comment_id; ?>">
<div class="user-img">
<img src="<?php echo $user->profile_img; ?>" class="user-img-pic" />
</div>
<div class="comment-body">
<h3 class="username-field">
<?php echo $user->userName; ?>
</h3>
<div class="comment-text">
<?php echo $comment->comment; ?>
</div>
</div>
<div class="comment-buttons-holder">
<ul>
<li id="<?php echo $comment->comment_id; ?>"class="delete-btn">X</li>
</ul>
</div>
</li>
comment_delete.js(i am testing the delete button with firebug)
$(document).ready(function() {
$('.delete-btn').each(function() {
var btn = this;
$(btn).click(function(){
console.log("the id " + btn.id);
})
});
});
Try this
$(document).ready(function() {
$('.delete-btn').each(function(i,el) {
$(el).click(function(){
console.log("the id " + $(this).attr('id'));
})
});
});
<li id="<?php echo $comment->comment_id; ?>"class="delete-btn">X</li>
Since you are missing whitespace here between the id value and the class attribute, I think the browser just does not assign that class to the element.
Edit (for people who don’t know what “missing” means):
Your PHP code will generate HTML output of the form
<li id="123"class="delete-btn">X</li>
whereas it should of course be
<li id="123" class="delete-btn">X</li>
Please always validate your HTML code before asking questions.
Try
$(document).ready(function() {
$('.delete-btn').click(function() {
var comment_id = $(this).attr('id');
alert(comment_id);
});
});
I am using Jquery RateIt plugin with the view more button.
so In my project i am showing restaurant rating with these plugin by default i am displaying first 5 rating.Then after 5 records i am displaying other content through ajax so in the content loded through ajax rating is not being showd i am using readonly mode..If anyone can help thanks in advance
foreach($list_review as $row): ?>
<div class="user_reviews_data">
<div class="width-20 float-left">
<span class="padleft-10"><?php echo $row->User; ?> </span>
<br/>
<span class="padleft-10">
**<div class="rateit" data-rateit-value="<?php echo $row->Rating;?>" data-rateit-ispreset="true" data-rateit-readonly="true"></div>**
</span>
<div class="muted padleft-10 float-left"><small><?php echo date('dS M Y' ,strtotime($row->CreatedDate)); ?></small></div>
</div>
<div class="width-80 float-left"><?php echo $row->Feedback;?></div>
<span class="report_span">Report this Feedback <img src="<?php echo base_url();?>themes/images/FLAG_GREY.png"></span>
</div>
<?php
$msg_id=$row->Id;
endforeach;?>
</div>
<div id="more<?php echo $msg_id; ?>" class="btn-container center_text morebox">
View More
</div>
Now code of jquery
/*view More Button*/
$('.more').live("click",function()
{
var this_tag = $(this);
var ID = $(this).attr("id");
if(ID)
{
$.post(siteUrl+"ajax/ajax_more",{lastmsg:ID,restid:$(this_tag).data("restid")},function(html){
$("ol#updates").append(html);
$("#more"+ID).remove();// removing old more button
});
}
else
{
$(".morebox").html('The End');// no results
}
return false;
});
I am adding content on view more button click through ajax ajax code is same as above code
I am Using this plugin http://www.radioactivethinking.com/rateit/example/example.htm
In the $.post success handler you should invoke rateit again via JavaScript after you append the HTML like so:
$("ol#updates").append(html);
$(".rateit").rateit();
Replace $(this_tag) with either this_tag or $(this) in your ajax call.
You should use var this_tag = this; instead of using var this_tag = $(this);
OR try var $(this_tag) = $(this);
I have managed to load the new page into the div (thanks to everyone for your help) but it looks pretty bad (got menu bar and logo, but I only wanted the content), so instead I need to load only a div from the new page. I tried a new script but got redirected to the new page. Please help.
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("href") + "#content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var $pageContent = jQuery('<div/>').load($(this).attr("href"));
jQuery("#new_page").html(jQuery("#content_eco",$pageContent).html());
return false;
});
});
I assume #content_eco is the divisions ID in the new page(the url from href attribute).
or you can load just the content from the url and avoid the link postback as
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("rel") + " #content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
Hope this helps you.