Issues with .mobile.loadPage and external page in Jquery Mobile - javascript

In my jquery mobile application I have one page that I want to load external content.
Trying to follow the docs, and my code doesn't produce any script errors, but my external content does not load.
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
//Initialize page container per docs
$("#staff-directory-container").pagecontainer({ defaults: true });
//Get external content into DOM
$.mobile.loadPage("http://another.domain.com/myContent.html", {
pageContainer: $('#staff-directory-container')
});
});
Thanks in advance for any help offered....
Chris

To bind events in jQuery Mobile, use pagecreate which is equivalent to .ready(). To load an external page, use .pagecontainer("load", "target", { options }) as .loadPage() is deprecated and will be removed in jQM 1.5.
In your case, $.mobile.pageContainer is $("#staff-directory-container"). And note that Ajax should be enabled.
$(document).on("pagecreate", "#pageID", function () {
$("#loadBtn").on("click", function () {
/* define new pagecontainer then load */
$.mobile.pageContainer = $("#staff-directory-container").pagecontainer();
$.mobile.pageContainer.pagecontainer("load", "myContent.html");
});
});

Related

issue with Javascript in Rails View

In my Rails View template, I'm using some jQuery for tabbed panels functionality:
<section>
... content ommitted
</section>
<script>
$(document).ready(function () {
$('.accordion-tabs-minimal').each(function(index) {
$(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
});
$('.accordion-tabs-minimal').on('click', 'li > a', function(event) {
if (!$(this).hasClass('is-active')) {
event.preventDefault();
var accordionTabs = $(this).closest('.accordion-tabs-minimal')
accordionTabs.find('.is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
accordionTabs.find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
} else {
event.preventDefault();
}
});
});
</script>
Because I'm also using this script in other View templates, and I want to organize my Javascript a bit better, I created a Javascript file (tabbed_panels.js) under app/assets/javascripts and moved the above script to the tabbed_panels.js file.
However now the panels on my page have no content the first time the page is loaded. Only when the page is refreshed, the panels get loaded with content.
Does someone have an idea what's going on and how this can be solved, so my tabbed panels have content at the first page load?
thanks for your help,
Anthony
Turbolinks
The likely issue you have will be that you're trying to load the $(document).ready function with Turbolinks running.
This simply won't work (if you're using Turbolinks), as since Turbolinks refreshes only the <body> tag of your page, it will typically prevent your JS from binding to the various elements in the DOM, as the JS has not been reloaded
The way to fix this is to develop your JS around Turbolinks (using Turbolinks' event handlers):
#app/assets/javascripts/tabbed_panels.js
var new_items = function() {
$('.accordion-tabs-minimal').each(function(index) {
$(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
});
$(document).on('click', '.accordion-tabs-minimal li > a', function(event) {
if (!$(this).hasClass('is-active')) {
event.preventDefault();
var accordionTabs = $(this).closest('.accordion-tabs-minimal')
accordionTabs.find('.is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
accordionTabs.find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
} else {
event.preventDefault();
}
});
});
$(document).on("page:load ready", new_items);
This should allow your tabs to be populated on page load, regardless of whether Turbolinks is operating or not.
--
Unobtrusive JS
Something else to consider (you've already done this), is that you really need to use unobtrusive javascript in your application.
Unobtrusive JS basically means that you're able to abstract your "bindings" from your page to your Javascript files in the asset pipeline. There are several important reasons for this:
Your JS can be loaded on any page you want (it's DRY)
Your JS will reside in the "backend" of your app (won't pollute views)
You'll be able to use the JS to populate the various elements / objects you want on screen
It's always recommended you put your JS into separate files - including in the views sets you up for a big mess down the line

Restrict JQM Panel to only 1 instance on page

I'm developing a JQM theme using single pages. I also have a side bar / panel that is built as a seperate html file. This panel is imported into the JQM page using the following JS;
/* Creates the functionality to open the left side panel with a swipe */
$(document).one("pagebeforecreate", function () {
$.get('left-panel.html', function(data){
$.mobile.pageContainer.prepend(data);
$("[data-role=panel]").panel().enhanceWithin(); // initialize panel
}, "html");
});
Ive got this script in a js file that is loaded at the foot of every page, since users of the 'mobile site' could enter via any page.
Ive noticed via Firebug that an instance of the panel seems to be added with every page I navigate to. So if I visit 3 pages, the panel will be loaded 3 times, 4pages = 4 panels, etc.
It's fair to say I'm fairly novice at JQ & JQM, but I was under the impression that the use of
$(document).one
meant the event only occurred once per page, and would therefore prevent the issue I have.
IF you can help me work out how I can prevent this issue, I'd really appreciate it.
The pagebeforecreate event will emit on each and every page, but only ONCE. If you have 5 pages in one HTML file (Multi-Page Model), that event will fire 5 times before creating/showing the target page.
This event can't be delegated to a specific page, e.g. the below code won't work.
$(document).on("pagebeforecreate", "#pageX", function (event) {
/* do something to pageX */
});
unlike pagecreate which can be delegated to a specific page.
$(document).on("pagecreate", "#pageX", function (event) {
/* use it to add listeners */
});
However, you can obtain an object of that page which is being created.
$(document).on("pagebeforecreate", function (event) {
var page = event.target.id;
if ( page == "pageX") {
/* do something to pageX */
}
});
Why .one()?
Since pagebeforecreate can't be delegated and it fires on each page, using .one() will run code once only. However, if you repeat the same code using .one() that code will be executed it again.
Altenative approaches:
Check whether panel is added before adding it.
$(document).one('pagebeforecreate', function () {
var panelDOM = $("[data-role=panel]").length;
if (panelDOM === 0) {
/* add panel */
} else {
/* nothing */
}
});
Demo
Use mobileinit as it fires once per document/framework. This event fires before loading jQM, so you will need to enhance/_initialize_ panel after loading jQM.
<script src="jquery-1.9.1.min.js"></script>
<script>
/* inject panel */
$(document).on("mobileinit", function() {
var panel = '<div>panel</div>';
$("body").prepend(panel);
});
</script>
<script src="jquery.mobile-1.4.2.min.js"></script>
<script>
/* initialize it */
$(function() {
$("[data-role=panel]").panel().enhanceWithin();
});
</script>
Demo

Ajax links inside ajax loaded content

i am having trouble getting ajax loaded links to load other ajax content.
Basically this is my ajax code:
$(function () {
var api = $("#content").jScrollPane().data('jsp');
var reinitialiseScrollPane = function()
{
api.reinitialise();
}
// attaching click handler to links
$("#contentcontainer a[href]").click(function (e) {
// cancel the default behaviour
e.preventDefault();
// get the address of the link
var href = $(this).attr('href');
// getting the desired element for working with it later
var $wrap = $('#content');
$wrap
// removing old data
api.getContentPane()
// load the remote page
.load(href, reinitialiseScrollPane , function (){
}
);
});
});
Basically the links inside the navigation work fine since they are loaded when page is loaded, but links inside the ajax content (wich are supposed to load pages in the same place the navigation links load content) dont work, my understanding is that there needs some sort of ".live" function called as the js does not rescan the code once ajax loads content.
I found some solutions but none i could relate to the code im using.
The first part of the code is not ajax but for a scrollbar plugin, i did not remove it because id like to avoid it getting voided by a solution that dosent keep it into count.
Thanks.
Try using the .on() method (see jQuery documentation) when attaching the click handler:
$(document).on('click', '#contentcontainer a[href]', function (e) {
// Rest of your code here
});

Magento and Jquery (jquery not firing events)

we are working on a magento site that has jquery loading, version 1.8.2
we have added this
var jlbJs = jQuery.noConflict();
and added this in the page
if (typeof jlbJs != 'undefined') {
// jQuery is loaded => print the version
alert(jlbJs.fn.jquery);
}
just to verify that jquery is available, it also shows the version using jQuery as well.
However once we use
jlbJs(document).ready(function () {
alert('++++++++++++++++++++++++++');
jlbJs.reject(); // Default Settings
return false;
});
or
jQuery(document).ready(function () {
alert('++++++++++++++++++++++++++');
jQuery.reject(); // Default Settings
return false;
});
or
jQuery(document).ready(function () {
alert('++++++++++++++++++++++++++');
});
or any other jquery items in the page it never fires or alerts, no errors, nothing.
anyone have any ideas on what it could be?
In my opinion is because of javascript conflict.
Try this post: jQuery conflict .The idea is FIRST load the jQuery,then the noConflict script and then the prototype.
Hope it helps.
Cheers!

Adding scripts to an iframe using jquery

I am generating an iframe within a jquery dialog box but am having trouble loading some scripts within it.
function showDialog() {
$("#divID").dialog("open");
$("#modalIframeID").attr("src", "/staff/somepage");
return false;
}
$(document).ready(function() {
$("#divID").dialog({
autoOpen:false,
modal:true,
height:500,
width:960,
closeOnEscape:true,
});
});
I tried adding them through a load event but havent had any success.
function showDialog() {
$("#modalIframeID").load(function()
{
//load scripts here
$("#addFaci").formToWizard();
});
$("#divID").dialog("open");
$("#modalIframeID").attr("src", "/staff/somepage");
return false;
}
Any suggestions would be appreciated.
Thanks,
Tim
If you have access to the file that is being loaded into the iframe you could just add the javascript code into that file and attach it to the document ready event.
If not try reading this following article and see if it will help you out :)
http://huuah.com/jquery-and-iframe-manipulation/

Categories