I have this script thats send a post via jquery.form addon:
$(document).ready(function() {
$('#submit_btn').on('click', function(e) {
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview',
success: afterSuccess //call function after
});
});
});
function afterSuccess()
{
$('#imageform').resetForm();
$('.ImgStatus').appendTo('.img');
}
and gets a html respond.
<div id="<?php echo $RandNumber; ?>" class="ImgStatus">
<input id="<?php echo $RandNumber; ?>" type="checkbox" name="<?php echo $RandNumber; ?>" />
<img src='upload/<?php echo $actual_image_name; ?>' class='preview'>
</div>
And what I'm trying to do is to remove the div that corresponds to the checkbox ID, when the delete button is clicked. And also to send a $_POST to a php page with the checked divs. Until now I have something like this but When I press the button its not removing the element...
$("#clickme").click(function(e){
var selected = $(".img input:checked").map(function(i,el){return el.name;}).get();
$(selected).remove();
});
jsfiddle.net/aHr6v/3
You can simply select the parent of the selected input field (the div), and remove it like this:
$("#clickme").click(function(e){
var selected = $(".img input:checked").parent();
$(selected).remove();
});
Here's a working example: http://jsfiddle.net/aHr6v/5/
check this: http://jsfiddle.net/aHr6v/6/
Based on what you said in your comment, I added the following line which search the div by its id and remove it
$("div#"+selected).remove();
I'd suggest:
$("#clickme").click(function (e) {
$('div.img input:checked').closest('div').remove();
});
JS Fiddle demo.
This looks at all inputs that are checked, finds the closest parent ancestor that's a div and then removes that/those elements from the DOM.
References:
closest().
remove().
selected is an array. What you want to do is pass one or more elements of that array as a selector:
$.each(selector, function(){
$('#' + this).remove();
})
Just change
$(selected).remove();
To
$('#'+selected).remove();
Edit: Or To (to remove all selected divs)
$.each(selected, function(){
$('#' + this).remove();
});
Related
<?php
while($query=mysql_fetch_assoc($select)){
?>
<tr><td><input type="checkbox" name="checkBoxMail" id="checkBoxMail"
value="<?php echo $query['id']; ?>"
userid="<?php echo $query['suserid']; ?>"></td>
</tr>
<?php
}
?>
This code created multiple checkbox in view page. First check only return value after that next check box click is not working
$('#checkBoxMail').click(function(){
alert("alert");
});
There would be multiple checkboxes with same id which is wrong. Try with class.
<input type="checkbox" name="checkBoxMail" class="checkBoxMail"
value="<?php echo $query['id']; ?>"
userid="<?php echo $query['suserid']; ?>">
And
$('.checkBoxMail').click(function(){
alert("alert");
});
And if you want to access the value or attribute then simple do -
$(this).val();
$(this).attr('userid');
Three examples of how you can do this by ID:
Remember if you're creating multiple checkbox fields don't set the same ID, make a different ID for each one or you can select the checkbox by class by changing the # to . as you can use the classname multiple times.
The ID has to be unique
$(document).ready(function()
{
// By ID - ID has to be unique
$('#checkBoxMail').on("click", function()
{
alert("alert");
});
$('#checkBoxMail2').click(function()
{
alert("alert2");
});
$(document).on("click", "#checkBoxMail3", function()
{
alert("alert3");
});
// By classname
$('.checkBoxMail5').on("click", function()
{
alert("alert");
});
$('.checkBoxMail5').click(function()
{
alert("alert2");
});
$(document).on("click", ".checkBoxMail5", function()
{
alert("alert3");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Divs with unique ID
<hr>
<div id="checkBoxMail">CLICK ME</div>
<div id="checkBoxMail2">CLICK ME</div>
<div id="checkBoxMail3">CLICK ME</div>
<br>
Div with classname
<hr>
<div class="checkBoxMail5">CLICK ME</div>
You are using same id for all checkbox creted, either use unique id for each checkbox or use class. See below code, where i have used class
<?php
while($query=mysql_fetch_assoc($select)){
?>
<tr><td><input type="checkbox" name="checkBoxMail" class="checkBoxMail"
value="<?php echo $query['id']; ?>"
userid="<?php echo $query['suserid']; ?>"></td>
</tr>
<?php
}
?>
jQuery:
$(document).on('click','.checkBoxMail', function(){
alert("alert");
});
Give class to all and Read about delegated event handlers , that would help: http://api.jquery.com/on/
$(document).on("click",".classname",function(event){
alert("hi");
});
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers
$(document).ready(function () {
$('#checkBoxMail').click(function () {
alert("click event fired")});
});
<input type="checkbox" name="checkBoxMail" id="checkBoxMail" />
$('#checkBoxMail').is(':checked'){
alert("alert");
});
Try this. Enjoy!
I am working in wordpress and I have created a custom plugin.In which I have get multiple data from the database and my code is like this.
<?php
foreach($result as $res)
{
?>
<input type="hidden" class="status" value="<?php echo $res->review_status; ?>" />
<button class="aprove" value="<?php echo $res->review_id; ?>">Aprove</button>
<?php
}
?>
Now, I want to get hidden field value in jQuery. My jQuery code is like this:
jQuery(".aprove").click(function(){
var status = jQuery('.status').val();
alert(status);
});
When I click on button then it shows only first value of hidden field. For instance, the fist hidden value is 1 and second value is 0 then it display only fist value 1 for both button. So what shold I have to do to get different hidden value?
Try :
jQuery(".aprove").click(function(){
jQuery('.status').each(function(){
var status = jQuery(this).val();
alert(status);
});
});
.each will loop through all the classes and it will give alert every value of it.
JS Fiddel Demo
Updated
Updated Demo
Here is your answer. for each button the value taken would be from the input element before the button element
jQuery(".aprove").click(function(){
var status = jQuery(this).prev('.status').val();
alert(status);
});
var status = jQuery('.status').val();
alert(status);
this will get the value of element first found on page and will return the result,
if you want all the input values use
jquery each() - https://api.jquery.com/jquery.each/
jQuery('.status').each(function(){
alert($(this).val());
});
// this will give you all the values you want, one by one
you can use .map like this to get what you want:
$(document).ready(function(){
var status=[]
jQuery(".aprove").click(function(){
status = $(".status").map(function() {
return $(this).val();
}).get();
alert(status);//array of values
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" class="status" value="0" />
<input type="hidden" class="status" value="1" />
<button class="aprove" value="">Aprove</button>
I have two divs, and when one is clicked it empties the div. I want to be able to load data into that div once it's been emptied. I've got it so it loads in both, but I only want to load data into the div that's been emptied.
HTML (I have two of these)
<div class="fl person">
<div class="maintain_size">
<input type="hidden" name="userSaved" value="<?php echo $user_one['id']; ?>" />
<img src="<?php echo "http://graph.facebook.com/".$user_one['id']."/picture?type=large"; ?>" class="circle-mask" />
<img class="hoverimage" src="images/fire_extinguisher.png" />
<div class="meta_data">
<h2><?php echo $user_one['name']; ?></h2>
</div>
</div>
</div>
Javascript
<script>
$("div.person img").click(function () {
$(this).parent("div").fadeOut(1000, function () {
var saved_id_user_who_voted_val = "<?php echo $_SESSION['id']; ?>";
var saved_id_user_voted_on_val = $(this).parent('div').find('input:hidden');
var saved_id_user_voted_on_val = saved_id_user_voted_on_val.val();
$(this).parent("div").empty();
// Load in new data
var current_div = $(this).parent("div");
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
});
});
</script>
The data seems to come through fine if I select a div that's not the current one, or I just use an alert to see if the data is there--which it is, but if I try load the data into the current div it just doesn't work. Any ideas? Thanks.
The code that I think is wrong:
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
Edit: The div I'm trying to get the data into is: div.person - although, there are 2 of these.
Once you empty the div your 'this' is no longer there. Try just declaring var current_div before you empty.
var current_div = $(this).parent("div");
current_div.empty();
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
See fiddle
You need to delegate the event as you are replacing old content with new one
$(document.body).on('click',"div.person img",function () {
Use live() function
Example
$("div.person img").live("click",function () {
//Your code goes here
});
I have buttons and divs and in each part I have them with the same ID I want to get the ID of button and use it for refreshing the div html.how should I write the * section?
$(function() {
$(".button").click(function(){
var id=$(this).attr('id');
var dataString = 'id='+ id ;
$.ajax({
type: "POST",
url: "download_number.php",
data: dataString,
cache: false,
success: function(html)
{
*********I HAVE PROBLEM HERE**************
$('how to get the id of the div from var id of button above?').html(html);
}
});
});
});
Div:
Downloaded:<div id="<?php echo $id; ?>" ><?php echo $downloadcount;?></div>
Button:
<input type = "button" value="Download" class="button" id="<?php echo $id; ?>" name="dl">
If I get class It will update the whole divs I want to update just the div realted to the button
You cannot have the same id on both the button and the div, id values must be unique in a document.
What I'd probably do is put the div's id on the button as a data-divid attribute (all attributes with the prefix data- are valid on all elements as of HTML5, and harmless in earlier versions of HTML), like this:
<input type="button" value="Download" class="button" data-divid="<?php echo $id; ?>" name="dl">
Then change
var id=$(this).attr('id');
to
var id=$(this).attr('data-divid');
...and then use that id var in your success callback (as the callback is a closure created within the context where id is defined, and so the callback has access to id).
Here's a simple example: Live copy | source
HTML:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<div>
<input type="button" data-divid="div1" value="Update div1">
<input type="button" data-divid="div2" value="Update div2">
</div>
JavaScript:
jQuery(function($) {
$("input[type=button]").click(function() {
var id = $(this).attr("data-divid");
// I'll use setTimeout to emulate doing an ajax call
setTimeout(function() {
// This is your 'success' function
$("#" + id).html("Updated at " + new Date());
}, 10);
return false;
});
});
Use the id but prefix them then build the name up...
<div id="div_<?php echo $id; ?>" ><?php echo $downloadcount;?></div>
button:
<input type = "button" value="Download" class="button" id="<?php echo $id; ?>" name="dl">
Then in you're code you have the id used in the buttons already (and also it will be div_), so you can then in you're 'success' just do:
$("#div_"+id).html(html);
change your html to this:
Downloaded:<div id="<?php echo $id; ?>" class="downloaded" ><?php echo $downloadcount;?></div>
then do something like:
var element_id = $(".downloaded").prop("id");
if(element_id = this.id){
$("#"+element_id).html(/* ... */);
}
$(function() {
$(".button").click(function(){
var id=$(this).attr('id');
var dataString = 'id='+ id ;
$.ajax({
type: "POST",
url: "download_number.php",
data: dataString,
cache: false,
success: function(html)
{
$('.count-' + id).html(html); // for class
}
});
});
});
<div class="count-<?php echo $id; ?>" ><?php echo $downloadcount;?></div>
First of all avoid using same IDS.
Then you can use CSS selectors:
$('div.class') //div
$('input[type="button"].youridclass')
You cannot use the id attribute for that purpose, the id cannot be a number (valid html) and thereby id's needs to be unique. Use the data attrib instead.
Try something like:
$('.button').attr('id');
to get the id of the button, then to change it:
$('.button').attr('id',''); //delete previous id if existing
$('.button').attr('id','yourNewId'); //set new id
then to use the new id:
$("#yourNewId").doSomething();
First and foremost, ids should be unique, you'll run into problems, particularly when using jQuery, if you have elements with the same id.
Without seeing your markup it's hard to give you a working example. But you can get the id of the div which corresponds to the clicked button by traversing the DOM.
Example markup:
<div id="example-div">
<input type="button" value="Example" />
</div>
jquery
$('input[type="button"]').click(function() {
console.log($(this).parent('div').prop('id'));
});
// outputs 'example-div'
for your reference check the below link for the various ways that you can use to select the dom elements given the parent element.
jsperf.com/jquery-selectors-context/2
I have a php page where I add and delete items from database using Jquery + PHP + AJAX.
Now I am able to delete and add when that page loads for the first time.
Now if I first add an element; which in turn adds record to the DB and then updates the div that contains all the listing of divs.
Example:
<div id="all_items">
<div id= "item_1">
<a id="delete_link">...</a>
</div>
<div id= "item_2">
<a id="delete_link">...</a>
</div>
.... Upto Item n
</div>
Now I replace the div with id all_items.
Now I have jQuery at the bottom of the page which calls ajax on a tag of delete_link.
Situtation is:
When page is loaded I can delete any item from the list.
But if I page load i add new item first. (which will update all_items div) after that if I try to click on delete link. Jquery on click selector event is not fired and which in turn doesn't do delete ajax operation.
I couldn't figure out why this is happening.
Looking for some help here.
EDITED:
Sorry for not writing code earliar.
Following is the jQuery I am talking about.
<script type="text/javascript" >
var jQ = jQuery.noConflict();
jQ(function() {
jQ("#submit_store").click(function() {
var store_name = jQ("#store_name").val();
var dataString = 'store_name='+ store_name;
dataString += '&mode=insert';
if(store_name =='')
{
alert("Please Enter store Name");
}
else {
jQ.ajax({
type: "POST",
url: "<?php echo $mycom_url; ?>/store_insert.php",
data: dataString,
cache: false,
success: function(html){
jQ("#dvstoreslists").html(html);
document.getElementById('store_name').value='';
document.getElementById('store_name').focus();
}
});
}
return false;
});
jQ(".store_delete").click(function() {
var store_id = jQ(this).attr('id');
var id = store_id.split("_");
var dataString = 'store_id='+ id[2];
dataString += '&mode=delete';
var to_delete = "#store_list_" + id[2]
jQ.ajax({
type: "POST",
url: "<?php echo $mycom_url; ?>/store_insert.php",
data: dataString,
cache: false,
success: function(html){
jQ(to_delete).hide("slow");
}
});
return false;
});
});
</script>
So If on page load, I delete then delete on click jquery event is fired. But after adding new store and replacing div of stores with new div. then jQuery on click event is not fired.
My HTML is as below.
<div class="sbBox stores">
<form id="add_storefrm" name="add_storefrm" method="post" action="" >
<div class="dvAddStore">
<div class="dvName" id="store_list">
<input type="text" id="store_name" name="store_name">
<input type="hidden" value="addstore" id="mode" name="mode">
</div>
<div class="btnAddStore">
<input type="submit" name="submit_store" value="Add Store" id="submit_store">
</div>
</div>
<div id="dvstoreslists">
<?php
$query = "SELECT * FROM #__shoppingstore order by store_id desc;";
$db->setQuery($query);
$rows = $db->loadObjectList();
foreach($rows as $row)
{
echo "<div class=dvlist id=store_list_".$row->store_id ."><div class=dvStoreListLeft>";
echo "<div class='slname'><h3>" . $row->store_name . "</h3></div>";
?>
<div class="slDelBtn">
<p id = "p_store_<?php echo $row->store_id ; ?>">
<a id="store_delete_<?php echo $row->store_id ; ?>" class="store_delete" alt="Delete" onclick="DeleteStore(<?php echo $row->store_id ; ?>);" >
</a>
</p>
</div>
</div>
</div>
<?php } ?>
</div>
</form>
</div>
Sorry folks for not posting the code earliar.
the ID should always be unique so use class instead
in your case : <a id="delete_link">...</a> to <a class="delete_link">...</a>
When you replace the contents of #all_items any event handlers that were bound to any descendants will no longer exist. You can use event delegation, using the on method, to solve this:
$("#all_items").on("click", ".delete_link", function() {
//Do stuff
});
Notice that I'm using a class selector (.delete_link) instead of an ID selector for the links. It's invalid to have duplicate IDs in the same document.
Also note that the above will only work if you are using jQuery 1.7 or above. For older versions, use delegate instead:
$("#all_items").on(".delete_link", "click", function() {
//Do stuff
});
This works because DOM events bubble up the tree from their target. So a click on a link which is a descendant of #all_items will bubble up through all of its ancestors and can be captured when it reached #all_items.
use live() instead of .bind()
It seems you are trying to delete dynamically added delete_link so i think you should use
$('id or class').on(click,function(){});