I'm going through some beginners tutorials on ExtJS and when I try to load a .html file with some HTML code it doesn't work
here's the test.html with the ExtJS code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../ext-3.2.1/ext-all-debug.js"></script>
<!-- overrides to library -->
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
// Path to the blank image should point to a valid location on your server
Ext.BLANK_IMAGE_URL = '../ext-3.2.1/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.get('div1').load({
url : 'htmlFragment.html',
scripts : true
});
});
</script>
</head>
<body>
<div id='div1'></div>
</body>
</html>
and the htmlFragment.html is just as it says, a fragment of HTML code
<div>Hello there! This is an HTML fragment.</div>
both the file with the ExtJS code and the htmlFragment.html are in the same folder and I really see no reason for this not to work but it doesn't :(
all the other ExtJS examples I tried, DOM manipulation and other basic stuff worked just fine
I'm trying this on a Windows machine, and it doesn't work in any browser(FF, Opera, IE, Chrome)
Have you set your example in a Web Server?
Even though many examples work just directly open its local file on your browser (i.e. file:///C:/directory/example.html) many others require an actual web server to run properly (i.e.: http://localhost/path/example.html).
And I think local files won't work in this example as it has to performs an AJAX call to get the htmlFragment.html file.
Are you using any of the following (or any other) web server?
Apache HTTP Server
lighttpd
Apache Tomcat
Internet Information Server
Visual Studio Built-in Web Server
Do u have firebug enabled on your machine? If so, do you get any exceptions on the firebug console? It could be that the ext library path is incorrect. Also check firebug to see if your ext library files are being loaded.
Related
I developed a website using HTML and CSS which is working fine on desktop but when I copied my site folder into mobile it didn't load my CSS and JS files.so what should I do?
<head>
<title>mobile</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./scripted.js"></script>
</head>
You can use the Chrome DevTools "Remote Debugging Android Devices" as described here:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
In my opinion, this is the most convenient way to test your HTML page.
Another way to open an HTML file on your mobile, with all the scripts and styles, is to deploy a local server that will be accessible within your local network and configure it to return an HTML page with all its dependencies.
As far as I know, just opening an HTML file with styles and scripts that are rendered into other files will not work.
By the way, you can place your CSS and JS code in a file with HTML, but it seems to me that this is not a very good solution.
I need to set the base href of my Angular application without the html tag.
Normally, i'll do something like:
<base href='myBaseUrl' />
But my whole app is being added within another MVC application. The MVC app references my app by calling it from an hosting CDN this way:
<html>
<head>
<!-- ... -->
<link href="https://www.host.com/myApp.min.css" rel="stylesheet" />
</head>
<body>
<!-- MVC stuff -->
<div ng-app="app" class="theContainerHoldingMyWholeApp">
<my-component></my-component>
</div>
<!-- Other MVC stuff -->
<script href="https://www.host.com/myApp.min.js" />
</body>
</html>
I need to add a base tag in the head in order to make my app templates loading work. There is no routing in the app. But if i do, it breaks all relatives paths that were already in my old MVC app. The only way I can think of is by somehow setting the "baseHref" using javascript, but i didn't find anything about it in Angular docs.
So, I'm wondering, is there anyone who sucessfully set the Angular base href WITHOUT having a <base /> in it's page. I'm willing to use unsupported stuff if I have to.
I'm creating a phonegap application that links to a website, which I want to load when the page is started up.
Here is what I've tried, a simple onload method calling a window.open function and I've tried a function that is called when the device is ready. I'm running the latest version of Phonegap, which is 3.5.0 and an Android HTC One running 4.4.2. Below is my code for deviceready. This code is within the index.html code, in the www folder within my Durandal applcation. I believe it's not working because I don't have the cordova.js file which is imported in the example code at this link http://docs.phonegap.com/en/3.5.0/cordova_events_events.md.html#Events
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="lib/durandal/css/durandal.css" />
<script type="text/javascript" charset="UTF-8">
function onLoad () {
document.addEventListener("deviceready", function () {
window.open("http://google.com", "_system");
}, false);
}
</script>
</head>
<body onload="onLoad">
<div id="applicationHost"></div>
<script src="lib/require/require.js" data-main="app/main"></script>
</body>
</html>
Thank you for any help. This is my first stack overflow question. Please tell me if my question format isn't right and how I can improve it for future questions. Also, please suggest other ways that I can open a window on app start up using phonegap. Another option I've considered is developing an app with Android and Java, create a WebView, but that doesn't give me the cross platform deployment I want for Android and Windows Phone and I'd like to write this simple app using HTML,CSS, JS using Durandal, and PhoneGap.
Add this line just after durandal.css addition link.
<script type="text/javascript" src="cordova.js"></script>
Without cordova.js deviceready function won't fire. You don't need to see right now where is that cordova.js. It'll be added automatically by phonegap. Right now just add this line.
I've been writing a simple four-screen Android application using Cordova and jQuery Mobile. The different screens are arranged inside a single page of HTML as DIVs with the data-role="page" attribute. I basically copied the multi-page sample template from the jQuery Mobile documentation.
http://jquerymobile.com/test/docs/pages/page-anatomy.html
Navigation between the pages happens via a persistent navbar stuck to the bottom of each page. Again, I used the code suggested in the jQuery Mobile docs with little modification.
<div data-role="footer" data-id="appNavBar" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>History</li>
<li>Settings</li>
<li>About</li>
</ul>
</div>
</div>
The various Javascript libraries are included in the head section of the HTML page, as follows (application.js contains the logic of the app).
<head>
<title>Redacted</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery/RedactedTheme.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.1.0.min.css" />
<link rel="stylesheet" href="application.css" />
<script type="text/javascript" src="jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="flot/jquery.flot.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="statusbarnotification.js"></script>
<script type="text/javascript" charset="utf-8" src="application.js"></script>
</head>
When Cordova is finished loading and is ready for use, it emits the "deviceready" signal. the Cordova docs recommend binding all setup code to an event listener tied to that signal. I have done it like this in application.js:
function onDeviceReady() {
console.debug("Cordova initialized.");
setup();
}
document.addEventListener("deviceready", onDeviceReady);
setup() is a function that reads information from the browser Web SQL database and storage (using the Cordova API defined here) in order to maintain user preferences and usage information between application launches.
Now for the problem: I was under the impression that jQuery Mobile would use the jQuery ajax method to load any subsequent pages after the first page, and that in doing so it would strip out the head section and skip straight to the DIV with the data-role="page" attribute and the appropriate ID. What I am observing instead is that the scripts in the head section appear to be reloaded whenever I visit a new page of the application. This happens the first time the page is visited in the session and then stops happening.
It appears that Cordova is being reinitialized and that it is emitting the deviceready signal again. Using LogCat in Eclipse, I can see the debug message I placed in the onDeviceReady function. the setup() function is also being called again. This slows things down considerably.
Does anybody know where I'm going wrong? Is there a way to ensure that Cordova only loads once?
Thanks,
Evan
I'm having the same problem using the phonegap facebook connect plugin. The only workaround is to design the entire app to be one html document with panels that are shown and hidden as your different screens. If you want to keep the panels in separate files, you could use something like require.js
I know that this issue is about 9 months old, but just in case my solution helps someone else with the same issue
Don't build your pages with display per HTML, instead build one long HTML page with each display part in it's own DIV with data-role="page"
Now, when you're changing page, you can use JQM's call of $.mobile.changePage() to change the display page
e.g. your page could look like this:
<div data-role="page" id="startingPage">
<p onClick="$.mobile.changePage('page2')">Page Link</p>
</div>
<div data-role="page" id="page2">
<p>more content here</p>
</div>
I know this seems counter-intuitive for most web development, but working with PhoneGap & JQM means NOT working in standard web development
I've got a strange problem. I'm coding a website and inlcuding jQuery and some plugins, that are stored in 'js' folder. When I try to open it through a browser jQuery, plugins and all my custom scripts aren't working. Maybe it's somehing with my code, but don't think so. Of course when I inlude jQuery externally (Google API's) it works, but got some plugins and scripts which aren't hosted elsewhere. Here's my 'head' tag.
<title>TOMTRANS - International Transport</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- S3Slider CSS -->
<link rel="stylesheet" type="text/css" href="css/s3slider.css" media="screen" />
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<!-- jQuery Effects -->
<script type="text/javascript" src="js/functions.js"></script>
<!-- S3Slider -->
<script type="text/javascript" src="js/s3Slider.js"></script>
<!-- S3Slider Init -->
<script type="text/javascript">
$(function() {
$('#s3slider').s3Slider({
timeOut : 3000,
});
});
</script>
<!-- HTML5 Shiv -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
By locally do you mean a local web server (i.e. http://localhost:12345/) or the file system (i.e. file:///C:/Users/John/Desktop/hello.htm)? If it's the latter, then it's probably the security settings. Some browsers block scripts from the file system by default.
Try to do
"./js/..."
I think it will work as with external jquery.
Thanks
Ok I have solved my problem. It's my IDE fault - Aptana Studio 3. This bug occured because I didn't upload hidden .project file, while I copied it through default file browser (Ubuntu's Nautilus). When I used built-in AS3 ftp manager it also copied .project file, and now it works.
I know this thread is old, but I have't found the answer to this very annoying problem so I am adding my solution.
If your physical folder path includes an underscore, it will fail.
So, if you dropped your website to lets say C:\MyRoot\MyFolder_2\WebSite1\ then it won't work. however, if you remove the underscore and it becomes C:\MyRoot\MyFolder2\WebSite1\ it will suddenly work and jQuery will suddenly be loaded.