I am calling ajax with below code in my index.php file.
<script type="text/javascript">
$(document).ready(function(){
$("#counting").click(function(){
$.ajax({
type: 'POST',
url: 'https://example.com/update.php',
data: {url: '<?=$url?>'},
success: function(data) {
// alert(data);
//$("p").text(data);
}
});
});
});
</script>
It's working perfectly, but the issue is
I have div called counting multiple times on the page.
example
<div id="counting">
example
</div>
<div id="counting">
example
</div>
Issue - Ajax call only works with first div, not below divs.
How to make it work with all divs with id counting
Id attributes are supposed to be unique. You're only ever going to get the first div called because once the DOM sees that, it's met it's requirement and doesn't search further. I suggest you give you divs unique ids and then use a class that is the same for all of them.
<div id="div1" class="counting_class">
example
</div>
<div id="div2" class="counting_class">
example
</div>
Then your jQuery would look something like this:
$(".counting_class").click(function(){
var id = $(this).attr('id');
//then call ajax based on the individual ID
}
Related
Please I need to delete item from my website using jQuery and ajax but I don't know how to get the particular id of what I want to delete or less is single see below example:
HTML CODE
<span id="file-1">Orange</span> <a id="delete-1">Delete</a>
<span id="file-2">Orange</span> <a id="delete-2">Delete</a>
<span id="file-3">Orange</span> <a id="delete-3">Delete</a>
<span id="file-4">Orange</span> <a id="delete-4">Delete</a>
<span id="file-5">Orange</span> <a id="delete-5">Delete</a>
<!--Next item will have id of 6 is looping...-->
AJAX JQUERY
<script>
$(document).ready(function(e){
$("#delete-").click(function(){
//Am confused here how to know which id need to be deleted?
var id = $('#file-').val();
$.ajax({
url:'/delete_reply.php',
data:'id='+id,
type: "POST",
beforeSend: function(){
$('#comment-'+id'').attr('class', 'deleting');
},
success: function(data){
$('#comment-'+id'').hide();
$(#comment-'+id'').css('display','none');
}
});
});
});
</script>
Please I don't know how to pass the id of the content I want to delete to the ajax can someone help me?
UPDATE:
It's good approach to assign value to HTML element using data
attributes. For that HTML and jQuery both would look something like
follow.
HTML:
<span id="file-3">Orange</span> <a data-fileid="3" class="cmnDeleteFile">Delete</a>
JQUERY
$(".cmnDeleteFile").click(function(e){
e.preventDefault();
var id=$(this).data('fileid');
// This is how you get id of the file from same element using data attribute.
});
Old answer:
You're following wrong method.
Give every link common CSS class and fire trigger event on click of a link like this.
HTML:
<span id="file-3">Orange</span> <a id="3" class="cmnDeleteFile">Delete</a>
JQUERY
$(".cmnDeleteFile").click(function(e){
e.preventDefault();
var id=$(this).attr('id');
// This is how you get id of the file from same element.
});
Replace your
var id = $('#file-').val();
with
var id=$(this).attr('id').split("-")[1];
Btw, I haven't tested rest of your code. Particularly, your #delete- selector that you have used for binding click event.
Is there a possibility to remove specific HTML Elements from a AJAX (load) Response before placing in to the container? In this case I want to remove the "#containerTop", including content, from the response.
Response (HTML):
<html>
<head></head>
<body>
<div id="containerMain">
<div>...</div>
<div id="containerTop">Content-to-remove-including-container-div...</div>
</div>
</body>
</html>
I've tried this, without success.
<div id="middle"></div>
<script>
$( "#middle" ).load( "http://<URL>",
function(response, status, xhr){
$response.remove('#containerTop');
});
</script>
Any ideas?
.load() inserts the content directly for you. It does not give you an opportunity to modify it before it is inserted. As such you have two options:
You can modify the content after it is inserted, but before it is painted in the .load() completion handler.
You can switch to .get() to get the content as data, then put it into a jQuery object, then modify it using jQuery methods, then insert the modified content into your page yourself.
Here's an example of the second option:
$.get("http://<URL>", function(data) {
var temp = $(data);
temp.find('#containerTop').remove();
$('#middle').empty().append(temp);
});
response.find(element).remove()
This works with me
I am creating a commenting system whose structure is like below:
<div id="main_comment_DIV_id_no">
//Some user comment
</div>
<div "reply_DIV">
<textarea name="reply_comment" id="reply_comment" rows="1" style="width:100%">
</textarea>
</div>
I want to append the textarea data to the main comment (also updating the database) part on pressing the Enter key.
I can easily accomplish this if there is only one (or few) DIVs, but here I have n numbers of DIVs so I am searching for a solution to append the nth reply data to the nth main_comment_DIV only.
Any help will be highly useful?
Here is the logic. That might help you.
When you click on enter, call ajax function and pass reply_comment with it. In php side, add that comment into the database and fetch all messages from database. On ajax success,
$('#main_messages_container').html(null);
$('#main_messages_container').html(res);
This will give you all updated messages with the new one. You don't need to append any div container in this case.
DETAILED ANSWER:
$('#enter_key_button').on('click',function(){
$.ajax({
type: 'post',
url: 'process.php',
data: {textarea : textarea},
success: function (res) {
//alert(res);
$('#main_messages_container').html(null);
$('#main_messages_container').html(res);
}
});
});
You can try with the keyup event and jquery class selector. You should not use id as selector, because you said you have n number of main comment dive, so id of n number of divs should not be same.
<body>
<script type="text/javascript">
$(document).ready(function(){
$('[name="reply_comment"]').keyup(function(e){
if(e.which === 13){
var comment = $(e.currentTarget).val(),
commentDiv = $('.main_comment_DIV_id_no');
//you have the comment here, so you can call an ajax request to update it in the database.
$(e.currentTarget).val("");
//if the blank div where you want to add the comment is already present, then write
$(commentDiv[commentDiv.length-1]).text(comment);
// Else no need to add the blank div initially, just create a new div and add the comment there.
$(commentDiv[commentDiv.length-1]).after('<div class="main_comment_DIV_id_no">'+comment+'</div>');
}
})
})
</script>
<div class="main_comment_DIV_id_no">
Some user comment
</div>
<div class="main_comment_DIV_id_no">
Some user comment2
</div>
<div class="main_comment_DIV_id_no">
</div>
<div id="reply_DIV">
<textarea name="reply_comment" id="reply_comment" rows="1" style="width:100%" ></textarea>
</div>
</body>
I'm trying to make a page where a certain div (with lots of php, html and javascript content) loads after the rest of the page. Is this possible if so how?
You could apply this div a hidden style and then use javascript to show it:
$(function() {
$('#someDiv').show();
});
But if you want to avoid loading it initially you could use AJAX:
$(function() {
// <div id="container"></div> will be an empty div
$('#container').load('/script');
});
Also note that if you want this loading to happen once all other content is loaded including graphics you could use the $(window).load instead of $(document).ready:
$(window).load(function () {
...
});
I had a similar Issue, needed the data to be filled in after a certain div was created.
I use .ejs files for this stack.
What I did was Pull all the code to the .ejs page Ordering it in the way I needed.
For Ex.
<script type="text/javascript">
jQuery making the divs
</script>
<% Pull Data and put it in the divs above %>
look in to jQuery's $.ajax, and related functions. I think you'll find they're exactly what you're looking for. a simple example:
<script type="text/javascript">
$(function() { // called when page is done loading; you can have lots of these
$.ajax({
url: 'other-content.php',
success: function(data) { $('#load-me-later').html(data); }
});
});
</script>
<div id="load-me-later"></div>
The certain
<div id="the_div">some text or whatever</div>
must have
#the_div { display:none; }
in css.
An then
$(document).ready(function() {
$("#the_div").show();
});
There are several ways to do this. For one, you could put that div at the end of the page and flush() just before it; but this isn't very reliable, and it's pretty darned hard to get position and the likes right. A better way would be ajax:
$.ajax({
url: 'myurl.php',
data: someDataMaybe,
success: function(html) {
$('#mydiv').html(html); // document.getElementById('mydiv').innerHTML = html would be a thousand times faster, but I've been told jquery people like this more
}
});
this will only execute after page load and then load the contents into the div. It of course assumes myurl.php outputs only content that should be in said div.
So say you have this page:
<div id="page">
<div id="content">
<!-- lotsa stuff in here -->
</div>
<div id="mydiv"></div>
</div>
<script type="text/javascript">
// the stuff above ^
</script>
And myurl.php outputs this:
Some PHP-generated stuff
which would result in:
<div id="mydiv">Some PHP-generated stuff</div>
I made an ajax call to a page and I receive some HTML code:
$.ajax({
url: 'test.php',
data: "id=1",
cache: false,
success: function(myHtml){
//here I have myHtml
}
});
the returned html by test.php is myHtml and looks like:
<div id="firstDiv">
some text 123
</div>
<div id="firstDiv">
some text 456
</div>
How I get the content of firstDiv in jquery success ?
Thank you.
You can use the jQuery constructor to build a jQuery object based on that code.
var results = $(myHtml);
In this case, you will have several elements in the selection, so you'll need to filter them, perhaps with eq in this case:
var firstResult = results.eq(0);
Note that there is no telling what jQuery will do with multiple instances of the same id in an HTML string.
$(myHTML).filter("div:first").text()
Try the following:
$("#firstDiv").get().innerHTML
$(myHtml).find("#firstDiv").html()