Develop Reference

jQuery selected button, can't get attribute to be alerted

I'm echoing rows and would like to either delete them or increment them like a thumbs up effect... I can't seem to identify the rows individually.
This is my included jquery source
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
There are no errors in the javascript web console...
This is the click function I'm trying to implement with a test ['clicked']:
<script type="text/javascript">
$(":button").click(function() {
var selectedId = $( this ).attr(id);
alert(selectedId);
alert('clicked');
});
</script>
These are my rows which I have echoed:
<?php
require_once(dirname(__FILE__) . DIRECTORY_SEPARATOR.'dbconnect.php');
$link = new mysqli("$servername", "$username", "$password", "$dbname");
$query = "SELECT COUNT(*) FROM entries";
if ($result = $link->query($query)) {
/* fetch object array */
while ($row = $result->fetch_row()) {
if($row[0]==0){
echo "There are no entries.";
}else {
$query2 = "SELECT id,saying,date,thumbs_up,comments FROM entries ORDER by ID ASC ";
if (($result = $link->query($query2))) {
/* fetch object array */
while ($row = $result->fetch_row()) {
echo
'<div class="primary-container" align="center">'.
'<div class="entry-container" align="center">'.
$row[1]." ".
'</div>'.
'<div class="bird" align="center">'.
'Bird Up!'.
'</div>'.
'<div class="birdups" align="center">'.
$row[3].
'</div>'.
'<div class="thumbup" align="center">'.
'<button name="increment" class="button" id="'.$row[0].'">'.
'<img src="bird_up.png" width="100%" height="auto" alt="bird up thumbs up like equivalent thumbnail">'.
'</button>'.
'</div>'.
'</div>'.
'<br>'
;
}
}
}
}
/* free result set */
$result->close();
}
?>

Use event delegation for newly added html elements. And you have missed out put the single quotes for id. I hope it solves your issues thanks
$(document).on("click" , ".button" , function() {
var selectedId = $(this).attr('id');
alert(selectedId);
});

On a wordpress blog I would like the post title to sit fixed in the bottom and change when I scroll to the next post

I can't figure out how to make the title change upon scrolling inside the id="titlescroll" div, which surrounds the entire post, and then only outputs the text from the class="title output".
I have styled each post (in this case advanced custom field) within a div with id="titlescroll" and have placed the_title() inside a div with class="titleoutput".
With javascript found at http://jsfiddle.net/Nsubt/ I can make the title change, when I scroll past the class="titleoutput" div, but then I have the problem that it only changes when I scroll past the top of the post where the php code for the_title() sits. This causes problems when I scroll upwards.
I really appreciate any help I can get. Thanks!
PHP code
<?php
$query = new WP_Query( 'category_name=news');
// The Loop
if ( $query->have_posts() ) {
echo '<div class="content-area">';
while ( $query->have_posts() ) {
$query->the_post();
$postid = get_the_ID();
echo '<section class="space" id=';
echo $postid;
echo '>';
echo '</section>';
echo '<div id="titlescroll">';
echo '<div class="titleoutput">';
the_title();
echo '</div>';
$fields = get_fields();
if (get_field('one_column_images')){
echo '<div class="entry-content">';
the_field('one_column_images');
echo '<div class="onetext">';
the_field('one_column_text');
echo '</div>';
echo '</div>';
echo '</div>';
}
Javascript
jQuery(document).ready(function($) {
$(window).on("scroll resize", function(){
var pos=$('#entry-title').offset();
$('#titlescroll').each(function(){
if(pos.top >= $(this).offset().top && pos.top<= $(this).next().offset().top)
{
var $this = $(this);
$('#entry-title').html($this.child('.titleoutput').html()); //or any other way you want to get the date
return; //break the loop
}
});
});
});

Problem solved. I tried a million things and one of them worked. Hurrah!
Javascript
jQuery(document).ready(function($) {
$(window).on("scroll resize", function(){
var pos=$('#entry-title').offset();
$('.titleoutput').each(function(){
var box = $('#titlescroll').offset();
if(pos.top >= $(this).offset().top && box.top <= $(this).next().offset().top)
{
$('#entry-title').html($(this).html());
return; //break the loop
}
});
});
});

How to handle click events on div

I have a data set of items coming from a SQL database. Those items are displayed in multiple divs like:
<?php
$url = 'DataBase';
$json_response = file_get_contents ( $url );
$json_arr = json_decode ( $json_response, true );
for($i = count ( $json_arr )-1; $i > 0; $i--) {
$json_obj = $json_arr [$i];
echo '<div id="MyDIV">';
echo $json_obj ['id'] ;
echo $json_obj ['title'];
echo $json_obj ['article'];
echo '<button id="read_more_btn">Read more</button>';
echo '</div>'
}
?>
My problem is that I cannot handle click events for EACH div, so I cannot identify which item has been clicked. I’ve been searching for a solution for quite a while, but haven’t found anything. So my question is – how can I identify the clicked item?
EDIT
I have no idea how I can dynamically assign an ID to a button

You could use a data attributes (HTML5 assumed) to attach the Id as meta data to your divs. Your PHP (note I am adding data-id attributes):
<?php
$url = 'DataBase';
$json_response = file_get_contents ( $url );
$json_arr = json_decode ( $json_response, true );
for($i = count ( $json_arr )-1; $i > 0; $i--) {
$json_obj = $json_arr [$i];
echo '<div data-id="' . $json_obj['id'] . '">';
echo $json_obj ['id'] ;
echo $json_obj ['title'];
echo $json_obj ['article'];
echo '<button id="read_more_btn">Read more</button>';
echo '</div>'
}
?>
JS - simple click handler attachment, using jQuery .data() [docs] to get data attribute:
$('div').click(function(e) {
var id = $(this).data("id");
alert(id);
});
JSFiddle Demo

How about when creating the html in the php, you echo the id inside the class.
echo '<div id="mydiv-' . $json_obj['id'] . '">';
So now in the html, it's going to look like
<div id="mydiv-1"> ... </div>
<div id="mydiv-2"> ... </div>
<div id="mydiv-3"> ... </div>
etc.
And then in Javascript, you could access them the same way you access any tag.
$('#mydiv-1').click(function(e){
console.log('a div was clicked');
console.log($(this))
});
So in order to assign listeners to each div, you could do a loop
for(var i = 1;$('#mydiv-container').children().length >= i,i++)
{
$('#mydiv-' + i).click(function(){
}
Make sure to add a container for all the divs.

Give each div a unique numeric class, so your jquery will be
$('div').click(function() {
var item_id = $(this).attr("class");
//do stuff here
});
or
$('div').click(function() {
var item_id = this.className;
//do stuff here
});

Show content Jquery

I'm trying to show content from a gallery in a #showcontent div. Currently i have this set up
The Js
<script>
$(document).ready(function() {
$('.gallery-item').on('click', function(e) {
$(".show-gallery-content").appendTo ("#showcontent").toggle();
});
});
</script>
index.php
<?php
$args = array('post_type' => 'Gallery', 'order' => ASC);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post($post_id);
echo '<div class="gallery-item">';
echo '<div class="gallery-image">';
the_content();
echo '</div>';
echo '<div class="show-gallery-content">';
echo '<div class="gallery-title">';
the_title();
echo '</div>';
echo '<div class="gallery-excerpt">';
the_excerpt();
echo '</div>';
echo '</div>';
echo '</div>';
endwhile;
?>
CSS
.show-gallery-content {
display:none;
}
Live preview of current website -> http://erwin.my89.nl/stage/sieh/
So, when I click an image i want to get the_title() & the_excerpt to show in #showcontent.
I had it fine last night but PhpStorm kinda screwed it up this morning, so i'm really frustrated now :D.
Thanks in advance!
Also i'd like some background information since I'm a student :-)!

Try this:
<script>
$(document).ready(function() {
$('.gallery-item').on('click', function(e) {
$("#showcontent").append($(".show-gallery-content").html()).show();
});
});
</script>

I think your approach for linking photo to content is not optimized solution. anyway, based on your html structure you need a connection between clicked image to content. you can try this snippet.
<script>
$(document).ready(function() {
$('.gallery-item').on('click', function(e) {
$(this).children(".show-gallery-content").appendTo ("#showcontent").toggle();
});
});
</script>

Please, consider this snippet:
$('.gallery-item').on('click', function(e) {
$('#showcontent').empty().append($(this).find('.show-gallery-content').contents().clone());
});

How to get jquery value from for loop in php?

I am trying to alert the text of a div which is in a for loop when it is clicked. There are many divs with same id, i want to get 3 if i click the 3rd or 2 when 2nd is clicked. How can i make it with the following code or what must i add to it? Thank you.
<? for($i=0; $i<5; $i­­++) { ?>
<div id="abc"><? echo $i ?></div>
<? } ?>
<script>
$(function() {
$("#abc").click(function() {
var thevar= $("#abc").text();
alert (thevar);
}
</script>

Just try to use a class instead of using id inside that loop,
<? for($i=0; $i<5; $i­­++) { ?>
<div class="abc"><? echo $i ?></div>
<? } ?>
<script>
$(function() {
$(".abc").click(function()
{
var thevar= $(this).text();
alert (thevar);
});
});
</script>

You should have unique ids on page. due to this $("#abc").text() always returns value for first element in matched selector. Rather use abc as class. and to refer element in current context, use $(this):
var thevar=$(this).text();

You have syntax error in your code. Missing }); . Id should be unique .
<? for($i = 0;$i<5;$i++) { ?>
<div class="abc"><? echo $i ?></div> //change
<? } ?>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(function() {
$(".abc").click(function()
{
var thevar= $(this).text(); //change
alert (thevar);
});//was missing
});//was missing
</script>