.Js file could not be called from linked html file- JQuery mobile - javascript

I'm using Jquery mobile framework. I have 2 html files which has two buttons each. The clicking on one button will navigate to other html file. Javascript loaded in each html file will handle a click event in the HTML files. Problem here is , .JS loaded from second html file which is navigated from first html file could not be called. It shows error.
Error: p.attr("href") is undefined
Source File: file:///Users/Aspire/Development/JQuery%20Mobile/sample/jquery.mobile-1.0a2.min.js
Line: 96
What's going wrong?
Edited: test.html
html-tags. Under Headertag
<link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.mobile-1.0a2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#test').click(function(){
alert('This is a general button!');
});
});
</script>
<Bodytag>
<div data-role="content">
<div data-role="page">
<a id="test" data-role="button" data-inline="true" data-theme="b">Click here</a>
<a href="~Development/JQuery Mobile/sample/test2.html" data-role="button" data-inline="true" >Navigate to two</a>
</div>
</div>
</Bodytag>
In the second html. test2.html
html-tags. Under Headertag
<link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.mobile-1.0a2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#test2').click(function(){
alert('This is a general button!');
});
});
</script>
<Bodytag>
<div data-role="content">
<div data-role="page">
<a id="test2" data-role="button" data-inline="true" data-theme="b">Click here</a>
<a href="~Development/JQuery Mobile/sample/test.html" data-role="button" data-inline="true" >Navigate to two</a>
</div>
</div>
</Bodytag>
It works fine when test2.html is opened separately in browser. Even after returning to test.html, it gives same error. Javascript is not called. i.e. only one time, Javascript works fine when .html is launched for first time. After navigation to other page, Javascript is not called.

I ran into the same problem, the javascript in second html just doesn't run. I worked-around the problem by adding rel="external" to force unload.
i.e.
Click here
Hope this works for you too.

Clement's answer helped, because there was no ajax call replacing your link.
A normal link (without rel=exteral) is being fetched with ajax call and only the body is taken and added to DOM of the current page.
That's why your js willnot be called.
All js must be linked to all pages in external files.

Related

Jquery mobile fails to load styles after change page

Am creating a mobile application using jquery mobile but after loading an external page(loggedin.html) via changePage the javascript file in the external page arent loaded but only do so after refreshing the page(loggedin.html...loaded via changePage).How can the external script be loaded without page refresh
I have two sets of file:
index.html and loggedin.html.
CODE:
1.index.html
<body>
<div data-role="page" id="indexpage">
<div data-role="content">
Load page 2
</div>
</div>
<script src="custom/scripts/index.js" type="text/javascript" ></script>
</body>
The script (index.js)
$('document').ready(function(){
$('#next').click(function(){
$.mobile.changePage('loggedin.html')
});
});
2.Loggedin.html
<body>
<div data-role="page" id="loggedin">
<div data-role="content">
You are in
</div>
</div>
<script src="custom/scripts/loggedin.js" type="text/javascript" ></script>
</body>
Script(loggedin.js)
$('document').ready(function(){
$('document').on("pageshow","#loggedin",function(){
console.log('loaded');
});
});
Base on this source : http://demos.jquerymobile.com/1.3.2/faq/scripts-and-styles-not-loading.html
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways).
The solution to this problem is : on the next page that is (loggedin.html)..That is placing the script on the page after the (data-role content/footer)
<body>
<div data-role="page" id="loggedin">
<div data-role="content">
You are in
</div>
<script type="text/javascript">
$('#loggedin').on("pagecreate",function(){
console.log('loaded');
......{Continue with stuff}
});
</script>
</div>
</body>

Colorbox doesn't open on second click

I have strange problem with colorbox, the code I have is like:
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<img
src='/someimage.jpg' height="100px" width="100px"
onclick='$.colorbox({inline:true, href:"#inline_content"});' />
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
Some test inline
</div>
</div>
So, first time I click, it fades the page and opens me hidden content as popup, but when I close that popup, then click on the image again, second and all further times, it just fades the page, but doesn't show me popup with hidden content. What it could be? Appreciate any help. Thanks!
Found the problem, I used minified version
<script src="jquery.colorbox-min.js"></script>
when I changed to normal version
<script src="jquery.colorbox.js"></script>
it started to work.

Why is my Phonegap Button Not Responsive

I am using phonegap like this in my application, also note the app is being styled by jquery mobile,
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
I have this html,
<div id="sync" data-role="page">
<div data-role="header" data-position="inline">
<a data-rel="back" data-icon="back">Back</a>
<h1>Sync</h1>
</div>
<div data-role="content">
<button onclick="sync()">Sync</a></button>
</div>
</div>
I have compiled this for Android and have it working on my Android phone.
But the button there called 'sync' is not always responsive. I click the button and the sync() method doesn't get called every time. I find myself clicking the button a number of times. I can see the button moving when I click it, it is responding by drawing itself being pushed in, but the sync method is not being called.
The sync method starts like this,
function sync()
{
alert("syncing");
$.mobile.loadingMessage = "syncing";
$.mobile.showPageLoadingMsg();
I put the alert in for debugging purposes.
UPDATE:
It has been pointed out that my HTML has an extra tag in it. I have removed it as below but the problem still exists,
<div data-role="content">
<button onclick="sync()">Sync</button>
</div>
I had a similar problem in my application. I tried two different things but I'm not sure wich fixed it.
I added charset="utf-8" in my script tag.
I moved the button click function in to its own script tag. I think there's an error in the other JavaScript block that is preventing the button click function from working when it's in that script block. So you can try isolating the button click JavaScript and see if that helps.
Joke answer: did you push the button hard enough?
Possibly the problem answer:
<button onclick="sync()">Sync</a></button>
^^^^---dangling tag
Is that </a> possibly the cause of the button breaking?

jQuery: is there a way to .LOAD() content that has script references in it?

I have 2 files. One called foo1.php and the other called foo2.php.
Contents of foo1.php:
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
<div class="yoxview">
<img src="files/Desert.jpg" alt="First" title="First image" />
<img src="files/hydrangeas.jpg" alt="Second" title="Second image" />
<img src="files/Jellyfish.jpg" alt="Third" title="Third image" />
</div>
Contents of foo2.php:
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function() {
$('.bar').load('foo1.php');
});
</script>
<div class="bar">this text will be replaced</div>
When I go to foo2.php I get a blank white page with a never ending loading favicon. I think this has something to do with loading the script:
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
in foo1.php since the contents of that page are passed through the .load() function. When I remove that script reference foo1.php loads just fine. I don't think this problem is specific to that particular script. If I try to load any page with a script reference the same result occurs (the blank page/loading favicon).
Is there a way to load content from another page that has script references?
EDIT
Here's the link to the problem script:
http://www.yoxigen.com/yoxview/yoxview/yoxview-init.js
Try using this to intercept the document.write, it's worked for me in the past: https://github.com/iamnoah/writeCapture

$('#id1').html(" ") removes all children of #id1 from DOM, or they are still there?

I do something like this:
$("#id1").html(data);
I refill a div with html but when I try to get the html of a child of this refilled div I get an empty string although it has, it's like the old child is still there but without html.
Edit:
I tried to reproduce my problem, here is the html: (click 2x times on refill and after click open you will see that nothing is going to happen)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/dot-luv/jquery-ui.css"/>
</head>
<body>
<script type="text/javascript">
$(function(){
$("#r1").click(function(){
var x = $("#main").html();
$("#main").html(x);
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<script type="text/javascript">
$(function(){
$("#a1").click(function(){$("#forDialog").dialog();});
$("#a2").click(function(){$("#forDialog").dialog('close');});
});
</script>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
</body>
</html>
I'm generating this javascript dynamically so the scripts that register a1.click and a2.click need to be inside the main div
I'm not quite sure as to the exact goal of your code, but I can make 3 general suggesions:
Use .delegate() to attach to once and future elements.
You can .hide() the HTML for you dialog box.
You can prevent the page from refreshing when a link is clicked using event.preventDefault(); in the click handler of that link.
Applying those suggestions to your code results in the following working code:
<script type="text/javascript">
$("body").delegate("#a1", "click", function(){
$("#forDialog").dialog();
});
$("body").delegate("#a2", "click", function(){
$("#forDialog").dialog('close');
});
$(function(){
// Hide HTML for the dialog.
$("#forDialog").hide();
$("#r1").click(function(event){
var x = $("#main").html();
$("#main").html(x);
// If you don't want the page to refresh by clicking
// on this A element, use the following:
event.preventDefault();
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
jsFiddle example
The old sub-DOM under the element will be gone after you reset its content with .html(stuff). It may exist floating around in memory somewhere, but it's detached from the DOM and you can't get at it.

Categories