Insert text into a div with jquery load - javascript

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.

Related

button imported with get function doen't work

I have a problem with a button imported in a HTML file using JQUERY and get function.
I'm trying to check if it is clicked or not but i don't know why i can't print anything to the console. I imported the button using this script:
$.get( "nuovotaglio.html", function( data ) {
var newDiv = $('<div/>',{id:'Servizio'+ incremento}).appendTo('.nuovoServizi');
newDiv.html(data);
var idInputeText = newDiv.children().children().find("input[name='servizio']");
idInputeText.attr('id','input'+incremento);
});
then I wrote
$(function() {
$('button').click(function(){
console.log('ciao');
});
});
I also tried
$('button').click(function(){
console.log('ciao');
});
also this script doesn't work
$('button').on('click', function(event) {
console.log('ciao');
});
does someone know how to check an events from an HTML code imported using GET?
Your problem is likelly in adding an element to the page AFTER you fire the ready JQ function.
Rewriting your JQ code to the following should fix it.
$(document).on('click', 'button', function(event) {
console.log('ciao');
});
Alternativelly, if stuff is still bugging out, you can try (yes, I have actually seen that bug out for some reason once, so here is solution B if needed)
$('body').on('click', 'button', function(event) {
console.log('ciao');
});
When the the second script initialized then there was no button at that moment. That's why the click event didn't worked.
Load this script after successfully load the content.
You may use
$(document).ready(function() {
// second script here
});
Or you can use:
$.ajax({
url: "test.html",
method: "GET",
data: { id : $( "ul.nav" ).first().attr( "id" ) },
dataType: "html",
success: function() {
$('button').click(function(){
console.log('ciao');
});
}
});
If you have more file or portion of code to import in your HTML and Javascript or Jquery doesn't work try also using PHP instead of HTML.
Rename your file with PHP extension and upload your file on a real server or virtual server like MAMP or XAMP).
Then use this sintax to import your file:
<?php include("your_file_path/your_file_name.html"); ?>
I tried to include a big section of a website inside the mainpage and my other HTML file was in the same folder of the HOMEPAGE. I used
<?php include("section6.html"); ?>
After use this method all my Jquery library worked correctly.

Why does the jquery ajax call erase the current data?

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

JQuery .load and html issue

I am trying to use Javascript to load different pages when you press a link. Here is the function I am using to change the page.
function loadPage(url){
$(".body").fadeOut(400, function(){
$(".body").load(url, function(){
$(".body").fadeIn(400);
});
});
};
The problem is, it fades the stuff into the page, but it disappears once the fadeIn is done. The code html from the file is still in the main files html, it just doesn't show up.
I had an issue, and I used this. File in your case would be the url:
var loader = function(file) {
$('.body').fadeOut(500);
$.ajax({
url: file
success: function(data) {
$('.body').html(data);
$('.body').fadeIn(500);
}
});
}
Changed the code to try and match what your looking to do, tested it with just a div with a background and it seems to work okay.
Is this the same as what you have ?
Andrew

How to update a value by jQuery AJAX

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');
}

jQuery Ajax Loader

Greetings,
I would like to know what should I do to make appear a ajax loader...
actually I am calling a function in ajax... everything is going well
here is how it's being done
$('#txtEmail').blur(function()
{
$.post("ajaxAvailability.aspx",{ email:$(this).val() } ,function(data)
{
if(data=='false')
...
Now I would like to have a loader so I done it like this:
$('#loader').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
This should be working? what is happening is that I am getting an exception inside the jquery.js....
-thanks in advance
I usually do this in my code:
$('#txtEmail').blur(function(){
var value = $(this).val();
//display loader image
$("#indicator").html("<img src='PATH/loading.gif' alt='' /> Sending...").show();
$.post(URL,
{ email:value },
function(data) {
$("#indicator").empty().hide();
//...
});
)};
In above code, the animated image will appear inside DOM element with id="indicator". After AJAX request completed, I emptied the container, then hide it. Adjust this according to your page element.
My another code use jQuery blockUI, usually when submitting form, to prevent double submit. Check the web for the usage example.
Greetings, for everyone
The solution for this issue is correct the jquery-1.3.2-vsdoc2.js file
on the ajax function there are f parameter, this should be replaced into callback

Categories