Failing to load jScrollPane dynamically with content? - javascript

I want to reinitialise jScrollPane when new content is added loaded to the div, heres what I got so far:
var pane = $('.content_pane')
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
$('.content_pane').jScrollPane();
pane.reinitialise();
}
It sort of breaks the page, but I'm new to JavaScript so I figure probably doing something wrong.
Updated :
function loadContent() {
$('#content').load(toLoad,'',showNewContent)
}
function showNewContent() {
$('#content').show(1,hideLoader());
$('.content_pane').jScrollPane();
pane.reinitialise();
}
It still only loads once?!
Update 2:
function loadContent() {
$('#content').load(toLoad,'',showNewContent)
}
function showNewContent() {
$('#content').show(1,hideLoader());
$('.content_pane').jScrollPane();
var api = $('.content_pane').jScrollPane(
{
showArrows:true,
maintainPosition: false
}
).data('jsp');
api.getContentPane();
api.reinitialise();
}
HTML :
<div id="content_pane" class="content_pane">
<div id="content" >
<!-- content delivered here -->
</div>
</div>
It's quite straight forward.

This code:
$('.content_pane').jScrollPane();
pane.reinitialise();
Is called before you receive data. Consider moving this code to showNewContent.
And remove() from showNewContent(). It is callback. You should give function, not call it. Call to jScrollPane should be made only once.
Here is corrected version:
$('.content_pane').jScrollPane();
function loadContent() {
$('#content').load(toLoad,'', function(){
showNewContent();
pane.reinitialise();
});
}

If you are using jScrollPane 2 you need to use the getContentPane method to get a reference to the pane to load the content into as in this example:
http://jscrollpane.kelvinluck.com/ajax.html
I'm not sure of the structure of your HTML (where #content is relative to .content-pane) so I can't give you a complete example. However another problem I notice in your code is that pane is a reference to the jQuery object containing your pane. If you want to get a reference to the API (which has the reinitialise method on it) then you'll need to access the .data('jsp') property after initialising jScrollPane. However there is no need to call reinitialise directly after jScrollPane anyway - they both have the same effect once a pane is initialised...

Related

Getting Html From calling jQuery custom function

I created a custom function and am trying to call it in a separate function and get the elements html. What am I missing?
Custom Function: (wizard.js)
function wizard() {
var wizardBody = $(this).html();
console.log(wizardBody);
}
jQuery.fn.wizard = wizard;
Calling Said function on element: (config.js)
// Initiate Web Design Get Started Wizard
$("#webDesignGetStartedWizard").wizard();
I simply get undefined with the current code above, if I don't call the function on the html ($(this).html) then I get the following:
ƒ (e){return z(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!Ae.test(e)&&!ge[(de.exec(e)||["",""])[1].toLowerCase()]){e=w…
UPDATE
So the problem seems to be related to the use of my router plugin, jq-router Because if I take #webDesignGetStartedWizard out of the template and place it in my index file, it works perfectly.
https://github.com/muzammilkm/jq-router
It does work correctly make sure config.js and wizard.js loaded in the document correctly. You should load the wizard.js and then include config.js and also make sure the div#webDesignGetStartedWizard available when the script is called.
See a demo of your code.
function wizard() {
var wizardBody = $(this).html();
console.log(wizardBody);
}
jQuery.fn.wizard = wizard;
$(document).ready(function() {
// Initiate Web Design Get Started Wizard
$("#webDesignGetStartedWizard").wizard();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="webDesignGetStartedWizard">
<p>current text in the paragraph.</p>
</div>

JavaScript - Wait until DOM modification within AJAX callback has been completed

So, I have the following code:
$(document).ready(function(){
//Retrieve menu html
$.get('/modules/menu.php', function(data) {
//Load menu html
$('main#main').prepend(data);
});
//Initialize Menu
menuInit();
$('#menuToggle').click(function() {
$('#main_menu').fadeToggle();
});
});
menuInit() successfully modifies DOM elements when included in the html directly instead of using $.get(),so the intialization has no issues, however, when using ajax, the intialization of the menu starts before the DOM elements are fully loaded.
I've made a little research and .prepend() does not support callbacks, so not an option.
Surrounding menuInit() with a setTimeOut() with 100 ms works, but it will most certainly fail with slow connections, I need something more dynamic.
Just put the rest of the code inside the callback so it executes after the data has been added to the page:
$(document).ready(function(){
//Retrieve menu html
$.get('/modules/menu.php', function(data) {
//Load menu html
$('main#main').prepend(data);
//Initialize Menu
menuInit();
$('#menuToggle').click(function() {
$('#main_menu').fadeToggle();
});
});
});

EasyUI: draggable() doesn't initialize when being called

I'm trying to call EasyUI's draggable everytime I dynamically create new HTML elements. I have the draggable method enclosed like so:
function initializedrag() {
console.log("initializedrag called")
$(".item").draggable({
revert:true,
proxy:'clone',
onStartDrag:function(){
$(this).draggable('options').cursor = "not-allowed";
$(this).draggable('proxy').css('z-index',3);
},
onStopDrag:function(){
$(this).draggable('options').cursor="move";
}
});
console.log("end of initializedrag")
}
And I use load to load in a new html site that contains a div with some li items and a tags that have a class of .item, like so, when the page is ready:
$(function() {
console.log("ready");
$("#shop").load("shopcontent/cat1.html");
initializedrag();
...
});
Through the console.logs, it's calling the function fine, however, the drag functionality isn't actually working. The exact same draggable works when I have a element that is already on the page, and draggable on page load. However, I need it to work whenever I call the initializedrag function.
What's going on here?
FIXED!
It was quite simple really, I just enclosed the initializedrag() in a function that gets called when the content is loaded!
So instead of:
$("#shop").load("shopcontent/cat1.html");
initializedrag();
I did:
$("#shop").load("shopcontent/cat1.html", function() {
initializedrag();
});
Which is odd because I put the contents of initializedrag() in a function just like above yesterday, but it didn't work :)

extend jquery load() function to show spinner inside div

is there a way to alter .load behavior so that it load a spiner inside any div that is loading data ?
example
<div class='content lside'></div>
<script>
$(document).ajaxStart(function() {
$('body').append('<div class="notice" style="position:fixed;top:40%;left:30%;z-index:99999;"id="loadingspin">loading</div>'); });
$(document).ajaxStop(function() {
$('#loadingspin').fadeOut().remove();
});
$('.content').load("<?=base_url();?>booking/<?=$day?>");
</script>
i use above script.
but what i actually want is that when ever ajaxstart the content of $('.content') is replaced with spinner until it finish loading the new content.
so is there a way i can extend .load to do that by it self and replace the ajaxstart,
so where ever $(div).load() is called a $(div).html('spiner'); is fired.
if not, is there a way .ajaxstart can reference the div that the content will be loaded into ?
please note: im currently using .ajaxstart and .ajaxstop in my header script in all my webpage to handle showing the spinners in general, but i want to replace it/extend it with div specific solution that would still work on any page without further editing into each and every ajax request.
thanks
probably something like this should do the trick. Override jQuery's prototype and save the old function.
(function(){
var oldLoad = jQuery.fn.load;
jQuery.fn.load = function( url, data, complete ){
/*
* do your stuff
*/
oldLoad.call( jQuery, url, data, complete );
}
})();
That changes the globally available jQuery.load() method for the whole page so »your stuff« should be executed even if other scripts call that method, a least after your re-definition of that function is parsed.

jQuery each doesn't work with certain classes, or classes in general?

I'm using Phonegap to build a small (test only) Macrumors application, and remote hosts actually work (there is no same host browser restrictions). I am using the jQuery Load() function to load the contents of the Macrumors homepage http://www.macrumors.com/ into a bin, hidden div, then the each function to loop through all the article classes to show the title in a box with a link to the page.
The problem is, after the Macrumors HTML content is loaded, the each function doesn't work with the article class. Also, in the load function (which allows you to specify certain selectors, id's and classes included, to only load in those sections of the page) the class doesn't work; none of the classes do, in both the load function and each function. And many Id's don't work in the each function either.
Can anybody explain this to a noob like me?
Here is the code:
function onDeviceReady()
{
// do your thing!
$('#bin').load('http://www.macrumors.com/ #content');
$('.article').each(function(){
var title = $('a').html();
$('#content').append('<b>'+title+'</b>')
});
}
And the HTML stuff
<body onload="onBodyLoad()">
<div id="bin">
</div>
<div id="content">
</div>
</body>
I sincerely apologize if there's some very simple mistake here that I'm missing; I'm a major JS newbie.
.load() is asychronous. It hasn't completed yet when you're executing .each(). You need to put your .each() and any other code that wants to operate on the results of the .load() in the success handler for .load().
You would do that like this:
function onDeviceReady()
{
// do your thing!
$('#bin').load('http://www.macrumors.com/ #content', function() {
$('.article').each(function(){
var title = $('a').html();
$('#content').append('<b>'+title+'</b>')
});
});
}
I'm also guessing that your .each() function isn't working quite right. If you want to get the link out of each .article object, you would need your code to be like this so that you're only finding the <a> tag in each .article object, not all <a> tags in the whole document:
function onDeviceReady()
{
// do your thing!
$('#bin').load('http://www.macrumors.com/ #content', function() {
$('.article').each(function(){
var title = $(this).find('a').html();
$('#content').append('<b>'+title+'</b>')
});
});
}

Categories