jquery "listview" and charts - javascript

I have some troubles with display charts (jquery Charts) into a web.
I have two pages (1.html and 2.html). The first contain a listview that links with the second page. The 2.html displays the chart. Here is the problem: When page 2 is launched through page 1, the chart doesn't appear!! But if I reload the page 2.. so the chart appears!
If I work with an only page using "href=#page" references the chart works fine and it's displayed, but my intention is to have different html files, one of them with the listview and the other one with the chart. Is it possible?
I have tested many types of jquery charts and all of them had the same behavior.
Any idea?
thanks for all,
Best Regards.
Here the files:
1.html ----
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
</head>
<body>
<div data-demo-html="true">
<ul data-role="listview" data-inset="true">
<li>Chart</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">/script>
</body>
2.html with the code into the reference (jqwidgets - chart_bar)

To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
The most realistic solution would be to move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded. I would also use that same index.js file and initialize it inside a HEAD of every possible other page.
Now you can ask me WHY?
Phonegap like jQuery Mobile is buggy, and sooner or later there's going to be an error and your app will fail (including loaded DOM) if your every js content is inside a single HTML file. DOM could be erased and Phonegap will refresh your current page. If that page don't have javascript that it will not work until it is restarted.
I've listed other ways to fix this problem (with examples) in my answer here: Why I have to put all the script to index.html in jquery mobile.

Related

jQuery dynamic page loading - Other javascript is broken and how should i import page specific js?

Okay, so this one is gonna be a doozy!
NOTE: This will be for a windows desktop application running sqlite and mongoose, so loading times are not as important (to me, for now) and there will be no connection to a non-local server.
I have searched all over and couldn't find anything that is specific to my situation, most seem to load into an iframe or use that framework provided by css-tricks.com
I am using my own (sorta) framework. The libraries i am using are bootstrap 3, jquery 2.1.4, jqueryui 1.12.1, and Bootstrap-select v1.12.1
index.php will have all content dynamically loaded into a div#wrapper and will act as the head of all page loading. This is the skeleton of my index.php. In sidebar.html the links have the attribute 'pagetoload', jquery catches the click event and loads the data into div#wrapper
<body>
<?php require_once("res/sidebar.html"); ?>
<div class="container-fluid" id="body-container">
<div id="wrapper" style="border:1px black solid;">
<!-- dynamic page content will be loaded here-->
</div>
</div>
<script src="res/js/jquery.js"></script>
<script src="res/js/jquery-ui.js"></script>
<script src="res/js/bootstrap.js"></script>
<script src="res/js/bootstrap-select.js"></script>
<script src="res/js/menu-handling.js"></script>
<script>
//index.php js
$(document).ready(function () {
$.get("home.php", function (data) {
$("div#wrapper").html(data);
});
$("a.loader").click(function (e) {
e.preventDefault();
$.get($(this).attr("pagetoload"), function (data) {
$("div#wrapper").html(data);
});
});
//dateFormat 10/dd/yy to constrain input only to october
//get current month number and constrain to prevent additions to wrong month
$("#date-input").datepicker({
dateFormat: "12/dd/yy"
, constrainInput: true
});
$("#date-input").focus(function () {
$(this).datepicker("show");
});
});
</script>
</body>
Each page that will be dynamically loaded will ideally contain minimal php and only contain the necessary html/css/js for that page. My issue is for example, after loading one page such as my dbviewer.php (which contains js and gives me the asynchronous loading warning) and reloading home.php into the container, javascript no longer works. The javascript for each page are inline tags.
I have tried piling all the javascript for every dynamic page into index.php so that it's all loaded on startup, but the issue arises that it still won't work. What is the best method make this dynamic loading work while having each page modular. I have tried to researching this but only stuff like using the hashTag thing comes up.
If you need more code from my files please post, i think i explained it enough for you to understand as there is nothing too wild going on outside of index.php Just scripts inside each dynamic page that basically interacts with dom elements using jquery.
I'm leaving this answer because it helped you, and also can be usefull as a general rule of thumb for any developer out there that can find himself in similar situation.
So when developing the app you have to separate all javascript, css assets in master file to host them on first pageload. (maybe it's event better for performance)
All other server generated files (php, node.js etc) files you have do structure to only be data source for pages that users click or land to .. or at least try to..
after that you have to trigger
$.ajax().callback
function on frontend to do job on each page. Such as page effects, data manipulation and etc .. Callback is very important because that's when data was actually loaded!
cheers, k

JQM: How to break while debugging in a JS file loaded through $.mobile.changePage()

I am developing a mobile app using jQuery, jQuery mobile (and PhoneGap, but that is not relevant). Let's say I have two html pages: page1.html and page2.html. I am loading page2.html using $.mobile.changePage() from page1.html. The page div in page2.html (i.e., the div having data-role="page") contains javascript code that is specific to page2, which also gets loaded with page2.html. The code in page2.html looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="conf-page" data-role="page">
<script type="text/javascript" charset="utf-8">
<!-- MY SCRIPT HERE ----->
</script>
<div data-role="header" style="height: 45px">
Now I want to break somewhere in the javascript code in page2.html. For the time being, I am using Firefox (16.0.2) and Firebug to develop and debug. When page2.html is loaded, I see the JS code of page2.html at two places in firebug Scripts list:
At jQuery.min.js/eval/MD5/
At jQuery.min.js/eval/seq/<#>
If I put a breakpoint somewhere in one of the codes, it get applied to the code in (1) above, but it is never hit when page2.html is loaded.
How to go about setting a breakpoint and breaking somewhere in the JS code in page2.html? I couldn't find anything relevant on the web, which makes me think that I must be missing something, as this must be a pretty common requirement.
Looks like I was searching for different terms. There has been some discussions on this problem in this site. Here are a few references:
dynamically loaded js function does not appear in Firebug js debugger
Scripts added via jQuery not visible in FireBug
Debugging scripts added via jQuery getScript function
A few other ones.
There are two solutions suggested in the above threads:
Most of these threads suggest the same solution: use the "debugger;" statement (w/o the quotes) twice in the code for the FireBug debugger to stop. I did that, and it was a partial solution: the firebug did break, but the variable stack was empty. So this wasn't very useful.
Put the script in a file, use an AJAX Get call to load the script with crossdomain set to true, and that gets the script file, loads it and the script file shows in debugger. That can be used now to set breakpoints etc. More useful than above.
Keeping open to see if there are other solutions.

JQuery: Combine multiple pages into one

I am developing an application by using phonegap and jQuery Mobile. Phonegap recommends a single document structure. As 5 divs or more in a document are pretty unclear, I'm trying to split up my pages (the div's) into multiple documents. As soon as phonegap loads the app, I want to insert these documents into the index.html.
function loadPage(external_document) {
var docname=external_document+".html";
$.get(docname, function(data) {
console.log(docname+" loading");
$("body").append($(data).find("body"));
$("head").append($(data).find("head"));
console.log(docname+" loaded");
});
}
document.addEventListener("deviceready", function(){
loadPage("DialogCredentials");
}, false);
DialogCredentials.html
<html>
<head>
<script type="text/javascript" src="js/DialogCredentials.js"></script>
</head>
<body>
<div data-role="page" id="dlg_credentials">
<div data-role="header"><h1>Login</h1></div>
<div data-role="content">
...
</div>
</div><!-- /page -->
</body>
</html>
As soon as the loadPage gets executed there should be a <div id="dlg_credentials"… and the corresponding javascript tag in the dom of my main document. But it isn't. There are no errors shown in the web inspector.
So what am I doing wrong here?
Without setting up a test case for you, if you really want to separate your pages to make your coding easier I would recommend to load the pages the standard way for jQuery Mobile i.e.
$.mobile.changePage( "about/us.html", { transition: "slideup"} );
This way you aren't reinventing the wheel and it satisfies your request. The overhead will be negligible compared to your proposed solution in any case let alone taking into account you want the first page to render quickly rather than to be blocked by inserting many pages before any html is rendered in any case. Since they will be local on the device in any case Phonegap will be able to serve them very quickly.
One thing to remember when loading pages through jQuery Mobile is that it strips out anything in the target page outside of the
data-role="page|dialog|popup"
tag and therefore to load custom page-specific javascript I would recommend you include the script tag directly below the
data-role="page"
opening tag and set any page initialization to occur on "pageinit"
<div data-role="page" id="options" data-theme="a">
<script type="text/javascript">
$(document).bind('pageinit', initializeOptions());
function initializeOptions() {
// do your page initialization here . . .
}
</script>
<!-- rest of page continues here . . . . -->
and then continue with the rest of your page as needed. That way it will be parsed when the page is loaded via the $.mobile.changePage method.
Hope that helps.
Dynamic loading is a feature of several Javascript frameworks. AngularJS and Backbone.js for example. Maybe take a look at their approach to loading multiple views?
I have previously worked on an app that did this by adding an empty div for each view to the index.html, and then dynamically loading the Javascript for each view on demand. The Javascript for the views was responsible for rendering the HTML into the div for that view.

Bootstrap.js file in both parent and iframe

I am creating a web app using bootstrap by twitter. The app contains of a page which loads up another page of the same domain in an iframe. Now my problem is, if the page that I am loading in iframe also contains bootstrap.js file it starts conflicting with the app.
For example, my app has a accordion (collapse) http://twitter.github.com/bootstrap/javascript.html#collapse built using the data attributes.
Once a page with bootstrap.js is loaded the collapse event starts getting fired twice.So something like
<head>//Bootstrap css and js files included</head>
<body>
<div>
//Collapsible Menu #1
</div>
<iframe>
<head>
//BootStrap.js script from same location as parent
</head>
<body>
// Another Collapsible Menu #2
</body>
` </head>
</iframe>
</body>
Here when I try to click on Menu #1, the code of Bootstrap.js gets triggered twice which ends ups in showing and then hiding the menu.
But my problem is not just limited to the menu. I need to be able to use bootstrap.js in my app and also allow pages which already contain bootstrap.js to be loaded inside the iframe.
Is there a way around this or am I doing something wrong?
found the problem.. it was very specific for my app. The way it was working was - there was an included JS file to trigger the app inside the "target" webpage. The JS file would not remove everything from the page and build an iframe to put load the content of the "target" inside iframe. Now in this case, I had BootstrapJS running before the app.js file which in turn resulted in getting executed in the "parent" frame and then when the app loads it was getting reloaded causing the conflict (or multiple events due to multiple inclusion).
I had the same issue in IE9 only.
I was opening an instance of my website in an IFRAME dialog. Meaning that there was 2 instances of Bootstrap, like above.
When I moused out of the IFRAME it resized the underlying layout to match that of the width of the smaller one in the IFRAME.
To get round it I had to disable the opening pages bootstrap-responsive.js stylesheet using javascript. You can then turn it back on, when you close the IFRAME dialog.
if(navigator.userAgent.indexOf("Trident/5")>-1){
window.parent.document.getElementById("responsiveCSS").sheet.disabled = true;
}
Horrible hack, I know.

external js functions not being called when previewing local page in browser

When I include separate js files in my webpage, the functions are not called when previewing the local page in my browser.
I'm trying to implement these page transitions.
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
I put the supporting files in the right place, and included them correctly in the head section of my page. I'm pretty sure of that because the css is working fine. Only the js is not.
I dont think I should need something like WAMP server right? Because its only js. The inline js in the same page is also working fine...
When I click my link, it does open the next page, but without transition. Also it adds "Error:0" at the top of the page.
What can I do to get these transitions working?
EDIT
My code looks like this.
<!DOCTYPE html>
<html>
<head>
<link href="css/transition.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/fasw.transitions.min.js"></script>
</head>
<body>
<a transt="flip" href="page2.html">Next</a>
</body>
</html>
I removed everything else from the page and still getting the same error. I view it in Chrome and Firefox, and get the same error in both.
Please check if it is happening because of any js conflicts. You can check it by removing the other js files that is included in the web page.
Check to make sure that you are referencing the Javascript files correctly from your HTML page. Try adding an alert statement to the top of the file, and reload the page - if you don't see the alert, then you're not referencing the file correctly.
alert("Hello.");

Categories

Resources