I have some code that calls in a new html file, to be added into a div. I'm wondering why the content in the div is replaced rather than just added in. Once I understand the "why" Id like to know how I would add in external markup into a div while preserving what was already in that div to begin with.
$.ajax({
url: 't3.html',
success: function(data) {
$('.ajax').html(data);
}
});
Instead of:
$('.ajax').html(data);
use:
$('.ajax').append(data);
try .append
$.ajax({
url: 't3.html',
success: function(data) {
$('.ajax').append(data);
}
});
Because you are replacing the whole HTML of .ajax div with data. If you want to preserve the existing HTML of that control use the following
$('.ajax').html($('.ajax').html() + data);d
Related
I am using AJAX to get <head> content of data and want to replace with current but it it keeps showing error and not working. The bottom code not working either
$('head').html($(data).find('head:first'));
Or
$('head').html($(data).find('head'));
Or
$('head').html($(data).find('head:first').html());
If you are just trying to replace head content then you would simply do
$('head').html(html);
With ajax it would be like this
$.ajax({
type: 'post',
url: 'get_data',
success: function (data) {
$('head').html(data);
}
})
If you want to ensure to get the first head you could also use
$('head').first().html(data);
I've read the documentation regarding afterRender from the fullpage.js github page. In my site I have content that is generated by AJAX in a particular div.
Example below
$("#fullpage").fullpage({
afterRender: {
// I don't know what to put here
}
});
$("#btn-generate-content").on("click", function() {
// Target the div
$.ajax({
url: "get_topic_content.php",
dataType: "json",
success: function(data) {
// Place the data in the div
}
});
});
With the code above, I'm generating a long paragraph and placing it into a div. Now I want my site to resize accordingly to the generated paragraph. How can I use reBuild() on the afterRender to target this particular div when it has finished rendering the content.
After get ajax content you should use $.fn.fullpage.rebuild() in a callback.
I don't see an action of placing html content.
It should be done in success function, and then you should call rebuild function.
I'm hoping someone here can help me. I don't use JQuery or javascript very much--I'm more of a php guy. I've got some code that seems to work except for actually appending the content to the UL with JQuery. If I watch the log in firebug, I see it bringing back the correct data, but the data is never actually put into the page. I have tried .html, .load, and .append with no luck. It will always load the initial HTML from the php script in the .load, but it's hit or miss as to whether the .append or .html works even though the data is always the same. Here's what I've got:
$(document).ready(function(){
var page = 1;
$('#favoritesul').load("/custom/getfavorites.php"); //initial load
//load more on click
$('#favoritesul').on( "click", "a.paginated", function (e) {
e.preventDefault();
++page; //increment page counter
//temporarily hide the load icon
$('#favoritesul > a.paginated').remove();
//send AJAX
$.ajax({
type: 'POST',
dataType: 'html',
url: '/custom/getfavorites.php',
data: { page: page}
})
.done(function(data) {
$('#favoritesul').append(data);
$('#favoritesul').append('<i class="icon-undo"></i>LOAD MORE</ul>');
})
.fail(function(){
alert('post failed');
});
});
});
As I said, if I console.log and look at the AJAX response, I'm seeing the HTML I expect, it just will not append, or even replace, the contents of the HTML. For clarity, the contents of the HTML I'm trying to append look like this:
<li class='data-item'><div class='test'><div class='padding'><div class='image-container'><a href='pagelink.php'><img class='image' src='imagesource.jpg' /></a></div><div class='header'><h2 class='heading'><a href='pagelink.php'>Video</a></h2></div></div></div></li>
And the pertinent part of the existing page looks like this prior to the first .load event:
<div class='clear'></div><ul id='favoritesul' class='someclasses'></ul>
Thanks for all of the help in advance!
You do have invalid HTML in your done() handler. Firstly #favoritesul is an UL, you can't append an anchor to it, only a LI, and secondly, you can't append partial elements, like you're trying to do by including just the closing </ul> tag.
Try appending valid HTML
.done(function(data) {
var li = $('<li />');
li.append(data);
li.append('<i class="icon-undo"></i>LOAD MORE');
$('#favoritesul').append(li);
})
I'm trying to get jquery to load the text from a text file into a div for a blog, but it's not working at all. any help?
this is what I'm using (what I've seen other's use). Also, I'm not testing it locally.
$("#content").load("articlename.txt");
update:
is there any way for it to keep the enters as breaks?
There is a no direct way to get data from external file in jquery.
But via ajax its possible.
$(document).ready(function() {
$("#loadData").click(function() {
$.ajax({
url : "articlename.txt",
dataType: "text",
success : function (data) {
$("#content").html(data);
}
});
});
});
$(document).ready(function() {
$("#content").load("articlename.txt");
});
Wrap your call inside document.ready.
I load content of a page by jQuery AJAX as
$(document).ready(function(){
$('#next').click(function(event){
$.ajax({
url: "load.php?start="+$('#lastid').text(),
success: function(html){
$("#results").append(html);
$("#lastid").empty().load('html #start');
}
});
});
});
In the current document, I have <div id="lastid"></div> and in the external php file <div id="start"></div>
The value for id="start" is updated from database, and it will be transferred to id="lastid". However, this code only works for FIRST click. For default <div id="lastid">1</div>, when clicking the button (id="more") it will read load.php?start=1 and updates the current document to <div id="lastid">11</div> (it's visible). But the second click will not load load.php?start=11
It seems that $('lastid') well reads the default value of <div id="lastid"></div>, but NOT when it has been updated by $("#lastid").empty().load('html #start')
How can I modify this code to work for subsequent clicks?
Wow, what a mess! Let's clean up a bit :)
You need to get rid of the id, as an id has to be unique and if you load another div with id lastId into your site, jQuery will not know which id to get. If you have many divs, each containing the id, you can just read the last id by using ('div:last').text();
So your ajax would look like this:
$(document).ready(function(){
$('#next').click(function(event){
$.ajax({
url: "load.php",
data: "start="+$('div:last').text()
success: function(html){
$("#results").append(html);
}
});
});
});
I also don't know what you do with the last line in the success, as load should be used to load data from the server with ajax, what is what you do by using $.ajax(). Also load() takes at least an url as parameter, see here.
try .live() function instead of .click()
Mate,
What I see from you code is that you are attaching an event once the page is loaded. And this creates a static call with static values that don't get updated as you continue.
My suggestions is to use a function that will feed an Id dynamically to your ajax call as follows:
$(document).ready(function(){
$(document).on("click", '#next', function(event){
$.ajax({
url: buildurl(),
success: function(html){
$("#results").append(html);
$("#lastid").empty().load('html #start');
}
});
});
});
function buildurl()
{
return "load.php?start="+ $('#lastid').text();
}
This will force your event to always call this function and the function to get a fresh value from lastid.
Regards
you have to change your success function because you have multiple #lastid when clicking twice.
try something like:
success: function(html){
$("#lastid").removeAttr("id"); // remove's the id from #lastid
$("#results").append(html); // appends the new one
$("#lastid").empty().load('html #start');
}