Content of html div using jquery - javascript

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()

Related

How to Call Ajax With Same Div Multiple Times

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
}

Delete single item using Ajax and jQuery

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.

Remove HTML Elements from JQuery AJAX load() Response

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

how to render html using javascript

I have a javascript engine(using jquery) that needs to render a html which comes as a output from a third party server (REST API). The response contains plain text and occasional html elements like <b>, <p> <br> etc which I want to render as html output. (and not literally as <b>, <p> etc)
Is there a way ?
Here is what I am doing - in pseudo code. Note : I am using blueimp javascript template to generate code.
jQuery.get({
url: 'someRESTfulURL/id',
method: 'get',
success: function(resp) {
//resp contains html elements like <b> etc
var data = {title: resp.title, content: resp.content};
$("#maindiv").html(tmpl("text-tmpl", data));
}
});
<script type="text/x-tmpl" id="text-tmpl">
<h3>{%=o.title%}</h3>
<p>{%=o.content%}</p>
</script>
<html><body><div id='maindiv'></div></body></html>
The javascript template is encoding the html characters and hence the problem. Is there a way I can use this template and still render the html chars.
There are two ways you can do this with jQuery:
The first is when you have the response data already, then you can put it into an element like this:
$("#myElement").html(myData);
The second is that you could load the data directly into the element:
$("#myElement").load("http://myurlgoeshere.com/webservice");
You have to prevent the escaping of HTML special characters. Try this:
<script type="text/x-tmpl" id="text-tmpl">
<h3>{%#o.title%}</h3>
<p>{%#o.content%}</p>
</script>
The difference is just the '#' instead of the '='.

Make a specific div load last

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>

Categories