<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');
});
}
}
});
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
Note #1: var id = $("#mysqlid").val(); is supposed to be the value from the hidden field from the form where the delete button has been pushed.
The id is unknown, since it is the auto_increment id from the ever changing database. To make it unique.
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "#delete", function(){
var id = $("#mysqlid").val(); // Note #1
$.ajax({
type:"post",
url:"http://www.mydomain.no/action.php",
data:"id="+id+"&action=delete",
success:function(data){
showList();
// showlist() returns an updated list of entries from the database after the selected row is deleted.
}
});
});
});
</script>
<table id="list">
<theader>
<tr>
<td>Name</td><td>Action</td>
</tr>
</theader>
<tbody>
<!-- Content from action.php start here -->
<tr>
<td>Test data</td>
<td>
<form>
<input type="hidden" id="mysqlid13" value="13">
<a href="#" id="delete">
<img style="cursor:pointer;" src="gfx/delete.png" alt="Delete">
</a>
</form>
</td>
</tr>
<tr>
<td>Test data 2</td>
<td>
<form>
<input type="hidden" id="mysqlid14" value="14">
<a href="#" id="delete">
<img style="cursor:pointer;" src="gfx/delete.png" alt="Delete">
</a>
</form>
</td>
</tr>
<!-- Content from action.php ends here -->
</tbody>
</table>
I've removed all the excess code, as to not clutter the issue at hand.
I'm sure this is an easy fix for someone more advanced in javascript than me.
As per my previous suggestion, you can assign a common class name to the elements that will need to be grabbed and passed back to the server. The class name wouldn't have to be unique just known. If you give all the elements you wish to perform this action on the same class name you can select those elements, get their values, and pass them back in your ajax call.
Given html:
<form>
<input type="hidden" id="mysqlid13" class='deleteMe' value="13">
<a href="#" id="delete">
<img style="cursor:pointer;" src="gfx/delete.png" alt="Delete">
</a>
</form>
Your js could become:
$(document).on("click", "#delete", function(){
var id = $(this).closest("form").find(".deleteMe").val();
/*make your ajax call or whatever*/
});
Now if you only have that one hidden input element per form element you could even simplify it and not even use an identifier and select by type:
$(document).on("click", "#delete", function(){
var id = $(this).closest("form").find("input[type='hidden']").val();
/*make your ajax call or whatever*/
});
I'd prefer to do this in a bit better approach, like this
Note it's invalid HTML to have duplicate ID in a document, please change it to class
<form>
<input type="hidden" name="id" value="14" />
<input type="hidden" name="action" value="delete" />
<a href="#" class="delete">
<img style="cursor:pointer;" src="gfx/delete.png" alt="Delete" />
</a>
</form>
$(document).on("click", ".delete", function (e) {
e.preventDefault(); // prevent default action
var that = this;
$.ajax({
type: "post",
url: "http://www.mydomain.no/action.php",
data: $(that).closest('form').serialize(),
success: function (data) {
showList();
// showlist() returns an updated list of entries from the database after the selected row is deleted.
}
});
});
set data format , it may not pass like query string and complete url may not work cause of CORS
$.ajax({
type:"post",
url:"/action.php",
data:{"id":id,"action":"delete"},
success:function(data){
showList();
}
First you need to change you links to use a class, not an id, as ids must be unique. So you html becomes
<a href="#" class="delete">...
Then your js becomes
$(document).on("click", ".delete", function(){
var id = $(this).prev("input").val();
...
}
I'm pulling my hair out over this one - I have a page that searches a MySQL database and returns the results in a table. I want the user to be able to update the results and hence update the MySQL database. The first part works ok, I have a search box on the page, which uses jQuery/ajax to query the database and display the results, e.g.:
<form class="well" id="jquery-submit-ajax" method="post">
<input type="text" name="userSearch" placeholder="Search…">
<label>Name/Email/id</label>
<Br />
<input type="submit" id="searchButton" value="Search">
</form>
<div class="alert alert-success hide">
<div id="success-output" class="prettyprint"></div>
</div>
<div id="loading-image" class="alert hide" style="text-align:center">
<img src="../images/ajax-loader.gif" /></div>
<div class="alert alert-error hide">
<div id="error-output" class="prettyprint"></div>
</div>
</div>
and the jQuery:
$("#jquery-submit-ajax").submit(function(e) {
$('#loading-image').fadeIn();
$.ajax({
type: "POST",
url: "jquery-ajax-control.php",
data: $(e.target).serialize(),
dataType: "html",
beforeSend:function(){
$('.alert-error,.alert-success').hide();
},
error: function(jqXHR, textStatus, errorThrown){
$('#loading-image').hide();
$('.alert-error').fadeIn();
$('#error-output').html(errorThrown);
},
success: function(data){
$('#loading-image').hide();
$('.alert-success').fadeIn();
$('#success-output').html(data);
}
});
return false;
});
So the results are parsed into a table for each result. Within that table is a form with a submit button. e.g.:
<form method="post">
<table>
<tr>
<td><input type="text" class="editbox" name="subs-expiry" value="<?php echo $expiry_date; ?>"</td>
</tr>
</table>
<input type="submit" class="updateSubsButtons" value="Update" />
</form>
I'm trying to submit this form via jQuery/Ajax again, but I can't get it to work. Pressing the Update button results in the whole page refreshing. I've stripped the jQuery for this button right back to just display an alert when the button is pressed, but even that doesn't work.
$(".updateSubsButtons").on("submit", function(e){
alert("clicked");
e.preventDefault();
});
Using the Chrome debugger a breakpoint in the function never gets hit, so maybe jQuery can't find the button? I've tried .on() and .live() functions, but I get the same result with both. I really can't figure out what's going on here, so any help would be gratefully received!
Try replacing it with a button, and a 'click' event.
<button class="updateSubsButtons">Update</button>
$(".updateSubsButtons").on("click", function(e){
alert("clicked");
console.log(e);
e.preventDefault();
});
Here's how to deal with asynchronously loaded items(added because this is how the problem was actually fixed.):
$(".AlreadyLoadedParent").on("click",'.buttonYouWantToClick', function(e){
alert("clicked");
console.log(e);
e.preventDefault();
});
First, you "click" a button, you don't "submit" it. You submit the form. So you should work with the event "click".
Second, if the button that should trigger the jQuery code is loaded using AJAX you should bind the event using .live() function like this:
$('.updateSubsButtons').live('click', function(e) {
e.preventDefault();
// Your code here...
}
This way the click event is bound to every new object with class="updateSubsButtons" that is loaded even after the page is loaded. If you use $('.identifier').click() it only works on objects that are already loaded when the page loads and doesn't work on elements being loaded through AJAX.
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.
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…
});