i have this bit of html.
(Link at bottom)
Its output of php code for status updates, it has view comments and post comment link, the post comment link uses jquery to add a textarea and submit button below that status update. and the view comments shows the comments to that status update below that status update.
So i use php looping so there will be obviously more than 1 status updates at most times(depends on how much friends users have) so i cant have an element like 'textelement', i will need to have elements like 'textelement1' and 'textelement2'
So i used php to add the id of the status update in the end of the links like _id so the element id becomes view_comments_1.
So i want to use jquery to find out which element has been clicked so that i can add a text box and show comments below the right status update instead of showing it below all status updates.
HTML
<div class="wrapbg">
<span class="corners-top"><span></span></span>
<div id="content"><br/>
Whats new?
<hr class='hr1'>
<div class='stbody' id='stbody'>
<div class='stimg'>
<img src='uploads/profile_pics_small/Anonymous_Blueprint_Wallpaper_by_co.jpg' /></img>
</div>
<div class='sttext'>
Welcome yoall!!
<div class='sttime'>By LUcase</div>
<br><br>
<a href=''>0 Likes</a> <a href=''>1 Dislikes</a>
</div>
<a href=''>unDislike</a> <a id='comment_now_1' href=''>Comment</a> <a id='view_comments1' data-id-1 = '1' href=''>View comments</a> <div id='emptydiv1'> </div></div>
<div class='stbody' id='stbody'>
<div class='stimg'>
<img src='uploads/profile_pics_small/wood_texture_by_pabloalvin-d1igijr.jpg' /></img>
</div>
<div class='sttext'>
hi
<div class='sttime'>By nicknick</div>
<br><br>
<a href=''>0 Likes</a> <a href=''>0 Dislikes</a>
</div>
<a href=''>Like</a> <a href=''>DisLike</a> <a id='comment_now_4' href=''>Comment</a> <a id='view_comments4' data-id-4 = '4' href=''>View comments</a> <div id='emptydiv4'> </div></div></div>
<span class="corners-bottom"><span></span></span>
</div>
JavaScript
//Gotta find out which status update we are dealing with!
jQuery("document").ready(function(){
jQuery(".likebtn").click(function(e) {
var id=jQuery(this).attr("data-id");
jQuery.post('like.php', {'id': id}, function(data) {
alert("Your like.php has been called");
}, "json");
e.preventDefault();
});
jQuery(".dislikebtn").click(function(e) {
});
//gotta figure out which status update we are dealing with!
//attache the click event to the anchor tag
$("#comment_now").live("click",function(e){
//prevent the default behaviour of following the link
e.preventDefault();
$("#comment_now").remove();
//find the textarea element, and after it, put an input tag
$(".sttext").after('<textarea id="comment_text" name="comment"></textarea> <br> <button id = "post_button" class="action greenbtn"><span class="label">Comment</span></button> <a id="cancel_comment" href="">Cancel</a> <br id="com_spacing">');
});
//gotta figure out which status update we are dealing with!
$("#cancel_comment").live("click",function(event){
event.preventDefault();
$("#comment_text").remove();
$("#cancel_comment").remove();
$("#post_button").remove();
$("#com_spacing").remove();
$("#view_comments").before('Comment ');
});
$("#view_comments").live("click", function(e){
e.preventDefault();
var id=jQuery(this).attr("data-id");
$.ajax({
url: 'query_comments.php?status_id='+id,
beforeSend: function( xhr ) {
xhr.overrideMimeType( 'text/plain; charset=UTF-8' );
},
success: function( data ) {
$('#emptydiv').html(data);
}
});
});
});
Please help me out :)
You know that html forms can send arrays, right?
<input type="text" name="textelement[]" value="First Element" /><br/>
<input type="text" name="textelement[]" value="Second Element" /><br/>
PHP Code:
foreach($_POST['textelement'] as $somethingSomething){
echo $somethingSomething, "\n";
}
Prints out:
First Element
Second Element
add a class to to action buttons and pass the comment id as data attribute like so:
<a class="commentBtn" href='' data-commentid="1">Comment</a>
and than you can read out the id easily with jquery:
$(".commentBtn").live("click",function(e){
var id = $(this).data('commentid');
e.preventDefault();
// do something with id…
});
Related
I'm working on add to compare feature of a website,so on current page there are some results which have a checkbox named add to compare attached.
So when user click on add to compare checkbox the selected result get appended to one compare box div and this process go on.
my problem is,when user want to uncheck or remove the selected result from compare div box he should be able to remove it.
Here's is my code which i have done till yet
html
<div id='compare_box'>
<form action="compare_results.php" method="POST">
<div id='result'>
</div>
<button id="compare_submit" type="submit" class="btn btn-primary btn-sm">compare</button>
</form>
</div>
<div class="col-md-3 photo-grid " style="float:left">
<div class="well well-sm">
<h4><small><?php echo $title; ?></small></h4>
<br>
<div class="features">
<div id="compare_feature">
<input type ='checkbox' name="compare" class="compare" value="<?php echo $id;?>">add to compare
</div>
<button class='btn btn-sm btn-info favourite_feature' value="<?php echo $id;?>">add to favourite</button>
</div>
</div>
</div>
css
#compare_box
{
display: none;
}
ajax call
$(".compare").change(function() {
if(this.checked) {
$('#compare_box').show();
var check = $(this).val();
$.ajax({
type: 'POST',
url: 'compare.php',
dataType : "JSON",
data:{value : check},
success: function(data)
{
console.log(data);
console.log(data.id);
var output = "<div class='col-md-3 photo-grid' style='float:left'>";
output += "<div id='course_title' class='well well-sm'>";
output += "<h4>"+data.title+"</h4>";
output+="<textarea class='hidden' id='hidden_title' name='course_title[]' value=>"+data.title+"</textarea>";
output+="</div>";
output+="<input type='hidden' id='hidden_id' name='course_id[]' value="+data.id+">";
output+="</div>";
$('#result').append(output);
}
});
}
});
PS: I'm trying to implement something like this
What is '#compare_box' ? Is it the element that appears when the checkbox disappear (in your exemple at 'your selection')?
Then bind an action on '#result' - precise something that can link your element to check box like an id (when you prepare your html in ajax response).
$('#result').on('click', function() {
$($(this).data('id')).prop('checked', false); // uncheck it
$(this).remove();
});
Do the same for when you uncheck a checkbox (find the element with data-id of your check box and remove it)
EDIT : it's not the perfect code to make it work, you might adapt depending on where you bind click or place the data-id
I am listing user's records along with edit link, upon clicking on edit link bootstrap modal form loads
My Page has following code (not sure if there is any better way to create modal dynamically)
after changes when user submits modal form, modal will disappeared and update message will be shown on users.php page
but my alert box shows same form id for every modal's submit button i click (i.e. the first modal's form id) and shows blank datastring (form seriralize)
I want to pass respective form's data to process.php
below is part of my users.php
<?php whlie($row=mysql_fetch_array($result)){?>
<div id="editkey" class="modal hide fade" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">X</a>
<h3>Edit users Details</h3>
</div>
<div>
<form id="keyfrm<?=$row['id'];?>">
<fieldset>
<input type="hidden" name="keyid" value="<?=$row['id'];?>">
<div class="modal-body">
<ul class="nav nav-list">
<li class="nav-header text-left"><p>Name :</p></li>
<li class="nav-header text-left"><p><input type="text" name="name"></p></li>
</ul>
</div>
<fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="submit">submit</button>
Close
</div>
I have js file that contains
$(document).ready(function(){
$('#submit').click(function() {
var formID = $('form').attr('id');
alert(formID);
var datastring = $(this).closest('form').serialize(); // may be working
alert(datastring);
$.ajax({
type: 'POST',
url: 'update_user.php',
data: datastring ,
success: function(msg) {
alert(msg);
var data=msg.split('|');
$(data[0]).modal('hide');
$('#result').html('');
$('#result').fadeOut("slow");
if(data[1]==='Success'){
$('#result').css('background-color','#DDF9B3');
$('#result').text("Data is updating...please wait for changes to take effect");
window.setTimeout(function(){location.reload()},3000)
}else{
$('#result').css('background-color','#FE9898');
$('#result').text("Error Occured");}
//$('#result').html(msg);
$('#result').fadeIn("slow");
$("#result").delay(4200).fadeOut(800);
}
});
event.preventDefault();
});
});
any help will be appreciated
Get the formID same way you get the data:
var formID = $(this).closest('form').attr('id');
alert(formID);
var datastring = $(this).closest('form').serialize();
I have some HTML and Ajax set up so that if you click a certain image (the reply-quote class below), it initiates some Ajax to echo HTML elsewhere on the page.
As shown below, the HTML file contains the same block of divs multiple times. My problem is that, if a user clicks the image, how can I make Ajax show the HTML (within show-reply div) for that specific block and not all of them?
<!-- BLOCK ONE -->
<div class="style1">
<div class="style2">
<img src="image.png" class="reply-quote" />
<div class="style3">
<div class="style4">
<div id="show-reply"></div>
<div class="reply-box">
<form class="reply-container no-margin" method="POST" action="">
<textarea class="reply-field" name="new_comment" placeholder="Write a reply..."></textarea>
<button name="submit" class="btn" type="submit">Post</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- BLOCK TWO -->
<div class="style1">
<div class="style2">
<img src="image.png" class="reply-quote" />
<div class="style3">
<div class="style4">
<div id="show-reply"></div>
<div class="reply-box">
<form class="reply-container no-margin" method="POST" action="">
<textarea class="reply-field" name="new_comment" placeholder="Write a reply..."></textarea>
<button name="submit" class="btn" type="submit">Post</button>
</form>
</div>
</div>
</div>
</div>
</div>
Here's the JQuery I have right now:
$(document).ready(function() {
$(".reply-quote").click(function() {
$.ajax({
url: 'assets/misc/show_reply.php', // this file simply echoes back the HTML to the `show-reply` div
type: "POST",
data: {post_id: $(this).attr('id')},
success: function(data) {
$("#show-reply").append(data); // this is where the problem lies
}
});
});
});
To my understanding, I have to somehow implement $(this), parent(), find(), etc. instead of the current line I'm using ($("#show-reply").append(data);). The question is, what should that line be so that if I click the image, it only shows the HTML for that specific block?
Please help!
First: ID should be unique in a document, use class attribute instead for show-reply and other elements where id is repeated
<div class="show-reply"></div>
then you need to find the show-reply next to the clicked reply-quote image
$(document).ready(function() {
$(".reply-quote").click(function() {
var $reply = $(this);
$.ajax({
url: 'assets/misc/show_reply.php', // this file simply echoes back the HTML to the `show-reply` div
type: "POST",
data: {post_id: $(this).attr('id')},
success: function(data) {
$reply.closest('.comment-container').find(".show-reply").append(data);
}
});
});
});
try this
$("div").click(function(e) {
if($(e.target).is('.reply-quote')){
e.preventDefault();
return;
}
alert("work ");
});
You should change the id="show-reply" to class="show-reply" in html, and then in JS change $("#show-reply").append(data); to $(this).parent(".show-reply").append(data);
<div id="display">
<div align="left" class="display_box">
<a class="test" href="#">
<img style="width:25px; float:left; margin-right:6px" src="user_img/gow.jpg">
</a>
<input type="hidden" id="uid" value="3">
<b>b</b>ack <b>b</b>ack<br>
<span style="font-size:9px; color:#999999">back</span>
</div>
<div align="left" class="display_box">
<a class="test" href="#">
<img style="width:25px; float:left; margin-right:6px" src="user_img/gow.jpg">
</a>
<input type="hidden" id="uid" value="3">
<b>b</b>ack <b>b</b>ack<br>
<span style="font-size:9px; color:#999999">back</span>
</div>
</div>
I am making this auto complete search function with images in thumbnail like facebook and getting this as html after ajax call .
what i want to do is that if user clicks on any div with class display_box i want to get the value of hidden field in the div...
I tried this code but its not capture click event how ever if I use #display click event capturing but that is for whole div.
$('.display_box').click(function() {
var id =$(this).find('input[type=hidden]').val();
});
Make sure you are adding the jQuery file and $ is not conflicted. You can use this line before writing your js code.
$ = jQuery.noConflict();
Your code seems to work.
Check out this fiddle http://jsfiddle.net/3JK4c/
Have you put the code inside the document ready function?
$(document).ready(function() {
.... code here ....
});
Finally found out the problem actually it was binding the click event with displaybox but there is no existence of display box when program runs initially or until u search so what i did is i bind the click event in success of ajax call and now its working ... I hope it helps. actually these divs display_box are dynamically made when user search something coming from database here is the complete code for help to any one
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
if(html !="")
{
$("#display").html(html).show();
$('.display_box').click(function(){
$('#temp').val($(this).find('input[type=hidden]').val());
$('#searchbox').val($(this).find('.name').text());
$('#display').fadeOut('slow');
});
}
}
});
I am using a dialog box to display and submit a enquiry form on my page.I am having problem when I try to call it again and again.The first time everything works fine and the form s submitted successfully.But if I click the GO button(added html below).I get an error for this line document.
EDITED:
<div class="hidden" id="dialog">
<form action="index.php" class="testForm" id="testForm">
<div class="name" id="name">
<div class="displayName" id="dispName">Name</div>
<div class="textName" id="viewName"><input type="text" class="fname" id="fullName" /></div>
<div class="hide" id="nameErr"></div>
</div>
<div class="address" id="addressDetails">
<div class="displayAddress" id="dispAddress">Address</div>
<div class="textAddress" id=""><input type="text" class="taddress" id="fullAddress" /></div>
<div class="hide" id="addressErr"></div>
</div>
<div class="submitForm" ><input type="button" class="submitDetails" id="submitInfo" name="Submit" value="Submit" onClick="validateAndSubmitForm()"/>
<a name="Close" onclick="$('#dialog').dialog('close');">Close</a>
</div>
</form>
</div>
Javascript\jquery
function submitEnquiryForProperty()
{
document.forms.testForm.reset();
$("#dialog").dialog({
modal:true,
resizable:false,
autoOpen:false,
width:260,
});
openDialog();
}
function openDialog(){
$("#dialog").dialog("open");
}
function closeDialog(){
$("#dialog").dialog("close");
}
Callback function on form submit
$.ajax({
type:'POST',
url:"processForm.php",
data:"name="+name+"&address="+address,
dataType:"html",
success:function(msg){
if(msg=="success"){
$("#dialog", window.parent.document).html("<div class='pad5'><div class='flt' style='padding-left:3px; width:235px;'><div class='thanx_msg'>Thank you for submitting the details. <br /><div class='spacer5'> </div><span class='gre'>Our Sales team shall revert to your query soon.</span></div></div><div class='spacer5'> </div><div style='padding-left:3px;' class='text'><strong>You can also:</strong></div><div style='margin-left:20px; line-height:20px;'>• Apply for a <a href='homeloan.php'>Home Loan</a><br />• Visit <a href='http://www.proptiger.com'>proptiger.com</a> for more properties<br />• See our <a href='http://www.proptiger.com/blog'>Blog</a> for latest updates</div></div><br/><div class='msg' style='color:red;'>Click to close the box</div>");
$(function(){
$('#dialog').click(function() {
closeDialog();
});
});
}
else
{
alert("Operation cannot be completed,please try again");
}
}
But I am facing the same problem.Error at the .reset() line.
Thanks for your time.
Updated answer
If you want to have a reusable dialog, do it like this:
Include the dialog element (almost assuredly a <div>) in your initial HTML. Use a CSS class so that it will not be immediately visible, for example:
HTML:
<div id="dialog" class="hidden">...</div>
CSS:
.hidden { display: none }
Unconditionally call $("#dialog").dialog(options) from Javascript immediately after the page loads. Be sure to set autoOpen: false in the options.
Whenever you want to display the dialog, use $("#dialog").dialog("open").
Whenever you want to hide the dialog, use $("#dialog").dialog("close").
Repeat steps 3 and 4 as much as you like.
.dialog( "destroy" )
Remove the dialog functionality completely. This will return the element back to its pre-init state.
.dialog( "close" )
Close the dialog.