I load an HTML snippet by Ajax and adopt it into a container. The elements are being represented correctly. But, I can't run any method on them i.e. any method that should work on an HTML element.
var Req = new Request.HTML({'onSuccess':function(responseTree){
$('form').innerHTML='';
$('form').adopt(responseTree);
$('form').getElemets('ul').each(function(e){e.setStyle('display','none');});
}
}}).get(href);
returned html is:
<ul><li><span>ssss</span></li></ul>
I might have forgotten a parenthesis in this example, but the real code is OK, when I alert the found elements inside the each function, I get [object Element] and not [object HTMLUIElement] as I should
Seems to work perfectly fine to me. See example: http://www.jsfiddle.net/mXmjr/
new Request.HTML({
url: '/echo/html/',
data: {
html: "<ul><li><span>ssss</span></li></ul>"
},
method: 'post',
onSuccess: function(response) {
document.body.empty();
document.body.adopt(response);
document.body.getElements('ul').each(function(list){
list.highlight();
});
}
}).send();
Related
Hello again stack overflow
I have a simple PHP file (countsomething.php) that looks up a number and echo's it.
How do I get ajax to update a simple span element on my HTML page.
I've tried triggering the ajax on page load with : <body class="skin-blue" onload="updateCDNonts();">
The JS
function updateCDNonts() {
$.get("x.x.x.x:8080/getliveontscdn.php=", function(result){
$("#countonts").html(result)};
}
The HTML
<span id="countonts" class="info-box-number">0</span>
Can someone point me in the right direction ?
You have a few issues with your code i have tried to point them all out below for you:
function updateCDNonts() {
$.get("x.x.x.x:8080/getliveontscdn.php", function(result){ //removed equals from url
$("#countonts").html(result); //removed curly brace that shouldn't be there
}); //added missing bracket and semicolon
Also as someone else noted watchout for cors if your url is different.
I managed to get it working. I changed my php script to return a json, here is the json: {"cdnonts":"144","eagonts":"0","stamonts":null,"foxonts":null,"pentonts":null,"topponts":null,"wickhamonts":null}
And in the html I did the following
<script language="javascript">
window.onload = function() {
$.ajax({
type: 'GET',
url: 'countallonts.php',
dataType: "json",
data: { get_param: 'cdnonts' },
success: function(data){
$('span#cdnonts').html( data.cdnonts);
$('span#eagonts').html( data.eagonts);
}});}
</script>
Although I am not sure why it works, because I expected data variable to return just the "cdnonts" object, but I suspect it parses all of the objects instead?
Thank you for you help.
I'm trying to take the result of my console log and put it in a div. The console log bit works, but not putting it in a div. According to the online tutorials it should be something like this:
<div id="number">Test</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
var data;
$.ajax({
type: 'POST',
dataType: 'json',
url: 'report.php',
data: data,
success: function (data) {
console.log(data.report.data[0].breakdown[0].counts);
$('#number').innerHTML = data.report.data[0].breakdown[0].counts;
}
});
});
</script>
However I get no log errors, it just doesn't update the text.
use
$('#number').html(data.report.data[0].breakdown[0].counts)
instead of .innerHTML
Since you using jQuery Selector $, you need to use $('#number').html("text or something").
Or maybe you can do document.querySelectorAll("#number").innerHTML = "text or somthing" if you want to use Vanila Javascript.
$('#number') is a jquery object, .innerHTML works on a DOM object - they are not the same thing.
Either convert $('#number') to DOM, with:
$('#number')[0].innerHTML = data.report.data[0].breakdown[0].counts;
Or use jquery method:
$('#number').html(data.report.data[0].breakdown[0].counts);
I'm afraid very similar question has been asked already here, but for some reason it simply outputs "null".
I'm trying to find a div html from an ajax output by id. Below is my script.
// LOAD NAVIGATION
$.ajax({
type: 'POST',
url: 'includes/content/bookingsystem/b_navigation.php',
data: thisButtonType + '=true&loadNav=date',
success: function(output) {
alert(output); // Outputs correctly two divs #navDay, and #navMonth
alert($(output).find('#navDay').html()); // Results into "null"
$('#navDay').html($(output).find('#navDay').html()); // Results in an empty div, since it overwrote the html with 'null' - nothing.
//$('#navDay').replaceWith($('#navDay', output)); // Same here - nada.
//$('#navMonth').html($(output).find('#navMonth').html());
}
});
The first alert(output) results this:
<div id="navDay">Im day nav!</div>
<div id="navMonth">Im month nav!</div>
You need to wrap your two divs in an outer div if you expect to be able to use .find() or $(selector, context) - those functions only find descendent nodes, and you have two sibling nodes in your HTML without a real parent.
You could either do that wrapping server side, or use .wrap().
Furthermore, the .html() function only returns the inner content of your tags, not the tags themselves.
Assuming (based on your use of .replaceWith) that your intention is to replace entire elements, and not just text, I'd go for:
<div>
<div id="navDay">Im day nav!</div>
<div id="navMonth">Im month nav!</div>
</div>
At which point this line from your previously non-working code will work too:
$('#navDay').replaceWith($('#navDay', output));
Try this
// LOAD NAVIGATION
$.ajax({
type: 'POST',
url: 'includes/content/bookingsystem/b_navigation.php',
data: thisButtonType + '=true&loadNav=date',
success: function(output) {
//alert(output); // Outputs correctly two divs #navDay, and #navMonth
//alert($(output).find('#navDay').html()); // Results into "null"
$('#navDay').html($('#navDay', $(output).wrap("<div />")).html()); // Results in an empty div, since it overwrote the html with 'null' - nothing.
//$('#navDay').replaceWith($('#navDay', output)); // Same here - nada.
//$('#navMonth').html($(output).find('#navMonth').html());
}
});
I am using the ThreeDots jQuery pulgin and it works great. I am having trouble using it on an ajax success event.
$.ajax({
type: "POST",
url: 'url',
success: function(value) {
$("#content").append(value);
$(".ellipsis").ThreeDots({max_rows:3});
}
});
I load some new data and append the new data to a div (this works great). When I call the ThreeDots function from inside the success event it takes about 1 minute to work and the browser is not responsive during this time. There are .ellipsis spans returned in the new data.
Is there a better way to be doing this? Is there something fundamentally wrong with my approach?
Update
#Nick, Thanks for your answer. I used this and I went one step further. The above still reruns on every ellipsis in content not just the newly returned ellipsis results.
I now do this:
$(value).appendTo("#content").find('.ellipsis' + document.getElementById('hidPage').value).ThreeDots({max_rows:3});
$("#hidPage").val(($("#hidPage").val()-0) + 1);
You can run the .ThreeDots() plugin only on the .ellipsis elements in the returned response, instead of re-running it on all of them, like this:
$.ajax({
type: "POST",
url: 'url',
success: function(value) {
$(value).appendTo("#content").find('.ellipsis').ThreeDots({max_rows:3});
}
});
You can't chain it the reverse way because .ThreeDots() isn't chainable (it returns a custom object), but the above version should work fine.
I am inserting the HTML response from an AJAX call into my page, but then when I try to access those elements after they have been created, it fails..
This is how i retrieve and insert the HTML:
$.ajax({url: 'output.aspx',
data: 'id=5',
type: 'get',
datatype: 'html',
success: function(outData) {$('#my_container').html(outData);}
})
The outcome HTML, which is inserted into the <div> (id = my_container) looks like:
<div id="my_container">
<ul>
<li id="578" class="notselected">milk</li>
<li id="579" class="notselected">ice cream</li>
<li id="580" class="selected">chewing gum</li>
</ul>
</div>
...and afterwards, when I try to access any of the <li> elements using queries like:
$('#my_container li:first') or
$('#my_container ul:first-child') or similar, nothing gets selected.
I am using the Listen plugin to detect any click events on the <li>elements and it works... But i couldn't figure out how to detect if the div is populated with the output HTML and accordingly change one of the <li>'s class for example...
$(document).ready does not work either...
Imagine I need to change the css style of the second <li>.. what is the solution to this?
How are you checking to see whether your AJAX call has completed? Because it's asynchronous, the elements will not, of course, be available to the code which executes immediately after your $.ajax(…) call.
Try manipulating those elements from within the success function or in other code which is called from there — at that point, you will know that the content is available.
Are you sure your actual request is successful? If nothing is selected, the most probably reason is that nothing was actually inserted into #my_container in the first place.
First, try the following code (in place of the original AJAX call you showed):
var html = $.ajax({url: 'output.aspx',
data: 'id=5',
type: 'get',
datatype: 'html',
async: false
}).responseText;
$('#my_container').html(html);
If that works, your li:first selector is just being called before the AJAX request finishes. If that doesn't work, try the following code:
$.ajax({url: 'output.aspx',
data: 'id=5',
type: 'get',
datatype: 'html',
success: function(outData) { $('#my_container').html(outData); },
error: function(errorMsg) { alert('Error occured: ' + errorMsg); }
});
That will cause an error message to pop up if the request fails. If an error message pops up with an error message, the request is not returning.
it's looks like you are trying to access to those elements before their was created because your current ajax call is asynchronous, try to put the option:
"async=false"
to your ajax and it should be work.