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);
});
Related
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.
I have a function that loads content into a div with Jquery. I'm trying to add to my function, the ability to set the height of the div to fit the content that I'm loading to it. I've tried several variations of the height() function and I've looked around at other people's code, but t I don't think I really understand how to incorporate that to my particular. Here's the function. It also has some code to update the URL. contentarea is the div where everything gets loaded and the div that needs resizing.
//Jquery loader
function getHash() {
return window.location.hash
}
$("a").on("click", function (e) {
var page = this.href.replace("#", "") + ".html",
hash = $(this).prop("hash");
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
}
else {
location.hash = hash;
}
});
e.preventDefault();
});'
Any help would be appreciated!
UPDATE: I updated the code with your help, but it's not really working. I figured I would add a div called content inside of contentarea, and use a callback function. What am I doing wrong?
'
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
} else {
location.hash = hash;
}
}, function () {
$('#contentarea').height($('#content').height());
});
'
The documentation of the .load() provide a callback when the function is completed
JQuery doc
$('#contentarea').load(page, function(){},function(){})
The second function is called when the funciton load is completed.
You need to call callback function after content is loaded.
jQuery('#contentarea').load('externalpage.php', function() {
jQuery('#contentarea').height(jQuery('#content').height());
});
This should be quite simple but I'll be darned if I can work it out. Just trying to get a div to display while my ajax is processing and then hide once done (I've put a sleep in there purely to test its working as locally it loads so fast I'm not sure if its working or not)!
The html page has this code in the script: -
$(document).ready(function(){
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
$("#loadingGIF").ajaxStop(function () {
window.setTimeout(partB,5000)
$(this).hide();
});
function partB(){
//just because
}
var scenarioID = ${testScenarioInstance.id}
var myData = ${results as JSON}
populateFormData(myData, scenarioID);
});
There is then a div in my page like so (which I can see in the source of the page just hidden): -
<div id="loadingGIF" ><img src='${application.contextPath}/images/spinner.gif' height="50" width="50"></div>
The ready code then goes off and calls this: -
function populateFormData(results, scenarioID) {
$table = $('#formList')
for(var i in results){
var formIDX = (results[i]["forms_idx"])
var formID = (results[i]["form_id"])
appendSubTable(formIDX, scenarioID, $table, formID);
}
}
Which references this multiple times calling several AJAX posts: -
function appendSubTable(formIDX, scenarioID, $table, formID) {
var $subTable = $table.find("#" + formIDX).find('td:eq(1)').find("div").find("table")
var url = "**Trust me this bits OK ;) **"
$.post(url, {
formIDX : formIDX, scenarioID : scenarioID, formID :formID
}, function(data) {
$subTable.append(data)
}).fail(function() {
});
}
Any pointers gratefully received...
Interestingly I bunged some alerts into my ajaxstart and stop and neither show up ever so I'm missing something obvious :S When I check the console in firefox I can see that all my POSTs are completing....
You should probably add the Ajaxstart and stop global event handlers to the document node like this
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});
I realized my problem, I needed to register the ajaxstart and stop to the document not the div!
So instead of this: -
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
I now have: -
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});
I assume this is because its the document that the ajax is running against not the div although my understanding there may not be 100% accurate at least this works so please tell me if I've misunderstood this! :)
#jbl, thanks for this pointer I did this to also leave the notification on screen for a few more moments just to make sure everything is loaded.
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.
I have a blank div called "content". Links are later added to "content" using jquery append. Using empty() does not work; I am guessing empty() wont clear the links added by jquery because the links are not added to the DOM?
function should clear, then display new links, but its not clearing the links, just appending to whatever was present.
function getSubRedditLinks(url)
{
$("#content").empty(); //doesnt work
$.getJSON(
url + suffix,
function foo(data)
{
$("#content").empty(); //doesnt work
$.each(
data.data.children,
function (i, post)
{
$("#content").append( '<section>' +
'' + post.data.title + '' +
'</section>' );
}
);
}
);
$("#content").empty(); //doesnt work
}
Function is called like this:
<li><a class="link" href="#" onclick=getLinks("localhost")>Blogroll</a></li>
Apparently, empty() should work. I simplified my code above, put its not working in the 3 places I put them. It just keeps adding links to the #content
Try this out:
function getLinks(url)
{
$.getJSON(
url + suffix,
function(data)
{
var items = [];
$.each(
data.data.children,
function (i, post)
{
var section = $('<section></section>').append('<a></a>');
section.find('a').attr('href', '#post=post-' + i).text(post.data.title);
items.push(section[0].outerHTML);
}
);
$('#content').empty().append(items.join(''));
});
}
Use $(...).remove() instead... Or $("#content").html("")
Works for me, check this out
http://jsfiddle.net/gzNFK/2/
note: remove the comment to use it