I need to display a comment button which toggles a div that contains the textbox and submit comment button, but the problem I am facing is that the comments div of the first post toggles properly on click but the rest don't work
My code-
$("#comment").click(function(){
var class = $(this).attr("class");
var count = $("#text").size();
$(".comments"+class).slideToggle(100);
if (count === 0) {
$(".comments").append("<br><input type='text' id='text' class='comment'/><input type='submit' value='Comment' id='login' />");
}
else{
}
});
You can only have one element with the id of comment. Try switching that to a show-comment class.
Because with $("#comment").click(function(){ ... you only pick the first element with the ID 'comment' - but i guess, you have several posts, right? :) So make it a class instead!
Related
i have a code on a comment system where the id of the looped image is the value of the submit button then the textarea contains the comment. so i want to pass the comment and its id to Jquery and Ajax which will return it to PHP page for validation, the code below runs but it only submit the comment for the first image of the loop but submits only the id for other image loops without the comment itself. here is my code:
jquery and Ajax code:
<script>
$(document).ready(function(){
$(".comment1").click(function(event){
event.preventDefault();
var text1 = $("#comment1").val();
var submit1 = $(this).val();
$("body").load("personal.php",{
comment: text1,
commentbtn: submit1
});
});
});
</script>
main part of PHP code:
<?php
$go="SELECT * FROM images WHERE images.title='$my_course' && images.type!='tutorials'";
$gresult= mysqli_query($conn, $go);
if(mysqli_num_rows($gresult) > 0){
while($frow= mysqli_fetch_assoc($gresult)){
$imggd=$frow['id'];
echo"<textarea type='text' name='comment' id='comment1' placeholder='write...'>"
."</textarea>"
."<button type='submit' name='commentbtn' class='comment1' id='$imggd' value='$imggd'>"
."<span class='fab fa-telegram-plane' id='updd'>"
."</span>"
."</button>"
."</div>"
."<br/>";
}
}
?>
in the code above the textarea id is the #comment1 while the submit button class is .comment1. only the id is submitted forthe images except for the first item that runs correctly. please i really need help thank you. In case I didn't place my questions well forgive me i am just new here.
I built a for each loop that pulls back several rows from the database. Each row it pulls has a link, and a hidden input box with a value of posting_id. This link will work similar to a like button on facebook in a way. The hidden input box just stores the posting_id. When you click the "like" link, it sends over the posting_id to a jQuery page and pings back a page called community to tell it the user has "liked" the post.
Here's the problem
I'm pulling several rows, and it seems that only the top row being pulled is actually sending the data to the jQuery page when you click the "like" button. If I click on any other "like" button other than the top one it will not work at all.
Jquery Page
$('.bump_link').click(function(){
var posting_id = $('.posting_id').val();
$.post("community.php", {
posting_id: posting_id
});
alert(posting_id);
$(this).toggleClass("bumped");
});
Foreach Loop
foreach ($result as $value) {
$group_postings .= '
<input type="text" class="posting_id" value="'.$value['posting_id'].'">
<div id="bump_icon" class="bump_link"></div>
<span id="counter"></span>
';
}
I hope I've made the issue clear, it was and is difficult to explain.
The problem is you are using a class to get the posting_id, since all the hidden fields have the same class only the first elements value is passed no matter what button you click.
i recommend using this html, without the hidden input, pass the value as a data attribute
<div id="bump_icon" class="bump_link" data-postid="'.$value['posting_id'].'">
and in this js, get the posting id from the data attribute
$('.bump_link').click(function(){
var posting_id = $(this).data('postid'); // get the posting id from data attribute
$.post("community.php", {
posting_id: posting_id
});
alert(posting_id);
$(this).toggleClass("bumped");
});
You are calling val() on selector you might return more then one elements, but val() will give you the value of one (first) element only. You can use map() to get all values of input having class posting_id
var posting_id_values = $('.posting_id').map(function(){
return this.value;
}).get().join(',');
Your problem is this line:
var posting_id = $('.posting_id').val();
This will return the first posting_id value every time, not the one associated with the bump_link you are clicking on.
There are lots of ways to solve this. One way is to use .prev() to select the previous element:
var posting_id = $(this).prev('.posting_id').val();
this selects the previous posting_id element from the current div. This relies on the fact that the posting_id element is before the associated bump_link div.
If you want to send just the posting_id of the clicked button, you could change your PHP/HTML code like this:
foreach ($result as $value) {
$group_postings .= '
<div id="bump_icon" class="bump_link">
<input type="text" class="posting_id" value="'.$value['posting_id'].'">
</div>
<span id="counter"></span>
';
}
And your JS code like this:
$('.bump_link').click(function(){
var posting_id = $(this).find('.posting_id').val();
$.post("community.php", {
posting_id: posting_id
});
alert(posting_id);
$(this).toggleClass("bumped");
});
use on delegated event since you are adding the content dynamically and
$(this).prev('.posting_id') // to get the posting data value
$(document).on('click','.bump_link',function(){
var posting_id = $(this).prev('.posting_id').val(); //<-- use $(this) reference
$.post("community.php", {
posting_id: posting_id
});
alert(posting_id);
$(this).toggleClass("bumped");
});
For some reason I can't get to work a script I have been trying out for a few days.
I have some checkboxes that show different colors. When the user clicks on one color I want the script to reload one of the DIVs of my website.
Everything works fine with the <form> tags and an <input type="submit">, basically with a button. But it never works by just checking a checkbox, I always have to click on submit.
Any help with the code would be much appreciated!
Thanks!
javascript:
<script>
$('.colors').delegate('input:checkbox', 'change', function() {
if ($(this).attr("checked")) {
var id = $("#regularCheckbox").find(':checked').val();
$('#itemMain').load('index.php?color='+id);
}
}).find('input:checkbox').change();
</script>
form:
<?php
$colors = mysql_query("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1");
while ($colorBoxes = mysql_fetch_array($colors))
{
echo "<input type='checkbox' id='checkbox-1-1' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'> ".$colorBoxes[color_base1]."</font><br />";
}
?>
</div>
$("#regularCheckbox").find(':checked')
seems to be wrong based on your PHP echo. regularCheckbox is a class, not an id, so you will want to select $(".regularCheckbox:checked'). Btw, you should not output the same id repeatedly in a loop, ids need to be unique.
Also, you might just want to use jQuery's serialize() method on your form.
I have two forms
<form name='myform1'>
<input type='button' class='submitBtn'>
</form>
<form name='myform2'>
<input type='button' class='submitBtn'>
</form>
Both forms have a button with same class. How can I capture click event of only myform1's button(submitBtn) in jQuery?
Thanks.
WRONG: u cant have same id on a same page
otherwise do below
TRY this
$('input[type="button"]').click(function() {
var formName=$(this).parent('form').attr('name');
if(formName =='myform1'){
alert( formName+' button is clicked');
} if(formName =='myform2'){
alert( formName+' button is clicked');
}
});
DEMO
It's not allowed to have more than one id with the same value.
Solution: use class names for visual styling and distinct IDs for capturing events.
id means identifier -- so, it should be unique in the HTML page, to allow one to identify an element.
Still, if you want to get the button which is in the form named myform1, you could use something like this :
$('form[name="myform1"] input[type="button"]')
Hi again :)
I'm using jQuery script to show/hide some content:
<script type="text/javascript">
$('.toggleButton').click(function() {
var id = this.id.replace('toggleButton', '');
$('#content' + id).toggle();
});
</script>
Since I'm using PHP, I am iterating through few items and each of them has a button to show/hide its content. My content is actually a form with few input fields. In each item, first field of my form has a same name (let's say 'line1').
What I would like to do is when I click on an item and open its content, to take a focus on input field 'line1'. When I click on other item to take a focus on its 'line1' field, and so on...
Preferably with jQuery because I suppose it would be simpler, but javascript solution would be also great :)
Thanks for any help!
EDIT: I will attach a part of code which is that I need to show and hide... Maybe it will be of some help... I am using codeigniter, so not to be confused by some functions :)
echo "<div class=\"toggleButton\" id=\"toggleButton".$item['id']."\">CLICK TO OPEN</div>";
echo "<div class=\"content\" id=\"content".$item['id']."\" style=\"display:none;\">";
echo form_open('title/add'); // codeigniter's open form
for ($i = 1; $i <= $item['rows']; $i++) {
echo "<input type=\"text\" class=\"line\" id=\"line".($i)."\">".br();
}
echo form_submit('submit', 'submit'); // codeigniter's submit for button
echo "</form>";
echo "</div>";
Change your last line to:
$('#content' + id).toggle().find('input').first().focus()
did you try giving common class name and call function based on class name