In my main html file I'm trying to load few other html files with id="contentToLoad".
All the loaded html will append to id="allWrapper" inside my main.html file.
$(function () {
for(i = 1; i <= 4; i++) {
$('#allWrapper').load('htmlFile' + i + '.html #contentToLoad', function () {
$(this).appendTo('#allWrapper')
//alert('Load was performed.');
});
}
});
One problem I encountered is that each newly added html content will overwrite by the previous one. How do I display all of them without overwriting each html file?
That's how load works, try using $.get instead.
for (i=1;i<=4;i++)
{
$.get('htmlFile' + i + '.html', function(data) {
$(data).find('#contentToLoad').appendTo('#allWrapper')
//alert('Load was performed.');
});
}
The point of the load method is to insert the HTML from the GET request into the DOM element you've selected.
What you'll want to use is the get method, especially as how it's used in the first example in the jQuery docs:
$.get('ajax/test.html', function(data) {
$('#allWrapper').append($(data).find('#contentToLoad'));
});
Found the solution, here is the code:
<script type="text/javascript">
$(function(){
for (i=1;i<=4;i++)
{
$.get('htmlFile' + i + '.html #contentToLoad', function(data){
$(data).appendTo('#allWrapper')
});
}
});
</script>
Try storing it to a variable and appending that variable to whatever container you want
var mycode = $('<div></div>');
mycode.load('htmlFile' + i + '.html #contentToLoad', function() {
var x = mycode.html();
$('#allWrapper').append(x);
});
try that.
Related
I currently load a html page into a <DIV> in my page. using this code
$.ajax({
url: 'myApi.php?user=' + user + '&url='+ URL2add,
success: function(html) {
var newHTML = "<object id='webloader' data='" + html + "'></object>";
$("#exweb").fadeOut(500, function () {
$("#exweb").html(newHTML).fadeIn(5000, function() {
alert("done");
});
});
}
});
So i want to do a check or preferably get a alert once that page loaded changes. which is in the data tag that comes from the html coining back from the ajax call.
I have tried document.getElementsByTagName
I know there has to be a way to get the new data info in that object .
i would prefer an alert each time the page changes from what comes back from the ajax call
i have updated the code like this...
$(document).on('contentchanged', '#exweb', function() {
alert('WOO?');
});
$.ajax({
url: 'Api.php?user=' + user + '&url='+ URL2add,
success: function(html) {
var newHTML = "<object id='webloader' data='" + html + "'></object>";
$("#exweb").fadeOut(50, function () {
$("#exweb").html(newHTML).fadeIn(50, function() {
$('#exweb').trigger('contentchanged');
});
});
}
});
But this is only working on initial change
i need to know when that page changes again.. say if someone clicks on a link that will change the page in DIV or if its a redirect page.
i want to know whenever that page changes to something after i loaded it from my ajax call
should it not be as easy as getting the information between data=""
<object id="webloader" data="http://google.com"></object>
and how do i get back that info? i have tried document.getElementsByTagName
you can do something like this after ajax.
$.ajax({...}).done(function() {
alert('page loaded');
});
$.ajax({/* your AJAX */}).done(function() {
alert(/*your text*/"page loaded!");
});
I think you could try this $("div").load("your_url.php?parameters"); the page you want to load could have the following <body onload="alert('Page Loaded')">
Update:- if you dont have the access of the webpage then use this $("div").load("your_url.php?parameters",function(){alert("Page loaded")});
I am getting an id that is not addressable by jquery ("#"+id).something .
At document start I have a :
var g_justClicked = '';
$.ajaxSetup({
beforeSend:function(event){
if(g_justClicked) {
console.log('g_justClicked='+g_justClicked+' tagName='+$('#'+g_justClicked).tagName);
};
var wOffset = $('#'+g_justClicked).offset();
$('#loading').show();
},
complete:function(){
$('#loading').hide();
}
});
At document end I have another script (all elements with class spinner should set the global variable 'g_justClicked'):
$(document).ready(function () {
$('.spinner').click(function() {
g_justClicked = $(this).attr('id');
console.log('.spinner.click: g_justClicked='+g_justClicked);
});
This works fine, the variable is set and displayed correctly in ajaxSetup.
BUT: referencing it in tagName= or in wOffset = with
$('#'+g_justClicked).
results in
"TypeError: wOffset/tagName is undefined"
Note: all ids start with several characters, t.e. "boxshow12345" is a typical id.
What am I doing wrong?
I think was able to reproduce your scenario here: https://jsfiddle.net/mrlew/qvvnjjxn/3/
The undefined in your console.log is because you're accessing an inexistent jQuery property: .tagName. This property is only available to native HTML Element.
To retrieve the tag name from a jQuery Object, you should use: .prop("tagName"), or access the property accessing the native element with $('#'+g_justClicked)[0].tagName
So, if you change
console.log('g_justClicked='+g_justClicked+' tagName='+$('#'+g_justClicked).tagName);
to:
console.log('g_justClicked='+g_justClicked+' tagName='+$('#'+g_justClicked).prop("tagName"));
Will successfully log: g_justClicked=boxshow12345 tagName=BUTTON, as expected.
Note: In order to your logic work, you have to click .spinner first.
Your problem is that your ajax setup runs regardless of whatever you do in the click handler, and it runs before you even setup that handler. The initial value for g_justClicked is empty string, and this is what it tries to access in $('#'+g_justClicked), hence the error.
If you want to click the spinner and then pass the id to the beforeSend, do it like this:
$(document).ready(function() {
$('.spinner').click(function() {
var g_justClicked = this.id; //simplify this a bit
console.log('.spinner.click: g_justClicked=' + g_justClicked);
// call ajax
_setupAjax( g_justClicked );
});
});
function _setupAjax(g_justClicked) {
$.ajaxSetup({
beforeSend: function(event) {
if (g_justClicked) {
console.log('g_justClicked=' + g_justClicked + ' tagName=' + $('#' + g_justClicked).tagName);
};
var wOffset = $('#' + g_justClicked).offset();
$('#loading').show();
},
complete: function() {
$('#loading').hide();
}
});
}
UPDATE
If you don't want a separate function, just move your ajax setup into the click handler:
$(document).ready(function() {
$('.spinner').click(function() {
var g_justClicked = this.id; //simplify this a bit
console.log('.spinner.click: g_justClicked=' + g_justClicked);
// call ajax setup
$.ajaxSetup({
beforeSend: function(event) {
if (g_justClicked) {
console.log('g_justClicked=' + g_justClicked + ' tagName=' + $('#' + g_justClicked).tagName);
};
var wOffset = $('#' + g_justClicked).offset();
$('#loading').show();
},
complete: function() {
$('#loading').hide();
}
});
});
});
OK #mrlew.
Answer: I tried your .prop appoach, but still got "undefined". Now back to the roots:
The goal is to get the id of any element that was clicked to modify the busy indicators position, while ajax is running. Newly I am back to my original approach, without global variable and parameter passing:
$(document).ready(function () {
$('.spinner').click(function() {
_setupAjax();
});
});
which works, and:
function _setupAjax() {
$.ajaxSetup({
beforeSend: function() {
$('#loading').show();
wJustClicked = $(this).attr('id'); /// <- that doesnt work!
console.log("_setupAjax wJustClicked="+wJustClicked);
console.log('_setupAjax tagName=' + $('#' + wJustClicked).prop("tagName"));
....defining css based on id (no problem)..
which yields "undefined" twice. I tried so many ways to get that f.... id.
#mrlew
thanks a lot for your help. Meanwhile I found the solution. All trouble came from a timing problem. Here is what works (for all DIV, SPAN and IMG of class=spinner and having an id:
$(document).ready(function () {
_setupAjax();
$('.spinner').click(function() {
wJustClicked = $(this).attr('id');
if(wJustClicked == null) alert('Id missing on item clicked');
console.log('.spinner.click! id='+wJustClicked);
var wOffset = $('#' + wJustClicked).offset();
var xPos = Math.round(wOffset.left) + 8;
var yPos = Math.round(wOffset.top) + 4;
console.log(wJustClicked+' offset left='+wOffset.left+' top='+wOffset.top+' xPos='+xPos+' yPos='+yPos);
wDiv = 'loading';
$('#'+wDiv).css('left',xPos);
$('#'+wDiv).css('top',yPos);
});
and the js function:
function _setupAjax() {
$.ajaxSetup({
beforeSend: function() {
$('#loading').show();
},
complete: function() {
$('#loading').hide();
}
});
}
A strange thing remained (I have firebug installed), which I have solved with Math.round: the x and y position come overdetailed like 170.5134577 and 434.8768664 ?!?
I can live with that. But where does this pseudo precision come from?
Again thanks a lot to keep my hope upright.
So this little script was working exactly how i wanted it to but i did something to mess it up, basically i have one jQuery function
function loadDiv(id, page) {
$(function () {
$("#" + id).load(page);
});
}
and then this HTML (obviously through a for loop)
Edit this Post -->
I have tried removing "javascript:" I actually tried that because I could think of nothing else wrong.
I'm not sure but I don't think you need the extra jQuery wrapper.
function loadDiv(id, page) {
$(function () { // what is this line for?
$("#" + id).load(page);
});
}
I would just keep:
function loadDiv(id, page) {
$("#" + id).load(page);
});
I would write your links like so
Edit this Post
Then write your function like so
$('body').on('click', '.loadTrigger', function(){
var id = $(this).attr('data-id');
var page = $(this).attr('data-page');
$("#" + id).load(page);
});
Hi I asked before on how to load a div's content (A url) by clicking a button and not on page load before and I got this code as an answer:
<script type="text/javascript">
function toggleDiv(id){
if ($('#' + id).html() == '') {
$.ajax({
url: 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator
success: function(data) {
$('#' + id).html(data);
},
error: function() {
$('#' + id).html('The resource could not be loaded');
}
});
}
$('#' + id).toggle(); // Toggle div visibility
}
</script>
Show/Hide Value
<div id="a" style="display:none"></div>
First of all it doesn't work correctly and always show "The resource could not be loaded" if you put a txt link like (http://knowpersia.com/a.txt) it doesn't work either.
Secondly the Show/Hide Value link uses a href=# and onclick system to work. When I use it on my website it gets back to the homepage when I click it. Is there a way to change it to something like:
Show/Hide Value
Thanks
You have to pass an id to the toggleDiv() function, and you're passing a collection of objects -> toggleDiv('a') // Nop.
Also, if you're using jQuery, I suggest you get rid of that ugly inline code. Then, you can pass jQuery objects into your function:
Show/Hide Value
<div id="content"></div>
.
var toggleDiv = function($el) {
if ($el.empty()) { // You can just use `empty()`
$.ajax({
url : 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator
success : function (data) {
$el.html(data);
},
error : function () {
$el.html('The resource could not be loaded');
}
});
}
$el.toggle(); // Toggle div visibility
};
$('#link').click(function(){ toggleDiv($('#content')); });
I have this javascript function:
jQuery(document).ready(function() {
FB.api('/me/friends', function(response) {
if(response.data) {
$.each(response.data,function(index,friend) {
$("#fb_friends").append("<div style=\"width:150px;float:left;font-size:11px;color:White;\">");
$("#fb_friends").append("<input type=\"checkbox\" name=\"friends\" value=\"1244524\" />");
$("#fb_friends").append("<img src=\"http://graph.facebook.com/' + friend.id + '/picture\" alt=\"Picture\" style=\"width:24px\">");
$("#fb_friends").append(friend.name);
//alert(friend.name + ' has id:' + friend.id);
$("#fb_friends").append("</div>");
});
} else {
alert("Error!");
}
});
});
I also have this in my html:
<div id="fb_friends" style="height:280px;overflow:scroll;" >
</div>
I want to call this getFriends function so that it populates the HTML inside this fb_friends div I have. How do I do this?
UPDATED the code above doesn't work
I assume you are using jQuery based on the presence of the "$.each".
Try this inside of your "each" loop:
$("#fb_friends").append("{your html content or some DOM objects}")
You should use DOM DocumentFragments instead of document.write. It is more performant.
Here is an interesting article about that: http://ejohn.org/blog/dom-documentfragments/
If you are using jQuery: $('#fb_friends').html('your stuff');
You're using jQuery, right?
$.each(response.data,function(index,friend) {
html = "<div [...]more html code[...] "+ friend.id + "[...]";
$("fb_friends").append(html);
});