JavaScript does not work on phonegap other than the first page? - javascript

I created a phonegap application, the first page navigates to the second page by "href".
in the second page, I have a JavaScript function that I want to execute.
The problem is that the page doesn't know the JavaScript, just if I copy the function to the
first page - it works.
I include the JavaScript in the page.
what is the problem?

For each page in the application you will have to include the JavaScript code you wish to execute on that page. For instance on page1.html you have a referenced function called getData() you will be able to call it on page1.html. If you follow a href to page2.html the function getData() is now out of scope. It is worth mentioning this is exactly how things work in web browsers.
The way around this is to move getData() to an external JavaScript file like main.js. Then you reference main.js via a script tag in both page1.html and page2.html. Now you'll be able to call getData() from either page.

Done use anchor tags with href values to change pages.
Use the jquery mobile function changePage http://jquerymobile.com/test/docs/api/methods.html
to change pages, as changePage wont load a new html fully but would load just the topmost jquert mobile "page" in that html file into the dom.

Related

Call JavaScript function when div is loaded in Partial Page in MVC

I have a Partial page in which I am loading div elements. I want to call a JavaScript function when each div is loaded in my partial view.
<p class="m-0" onload="markMessageAsDelivered('#item.isDelivered')">#item.Message</p>
This is the function I have in my JS in my razor page.
function markChatAsDelivered(isDelivered) {
if (!isDelivered)
alert('markChatAsDelivered');
}
This function is not getting called. I tried to put it in windows onload as well but still it is not working. Please let me know what can be done?
The problem I've had with these things is that onload is called before ASP.NET makes its changes to the page. There's two solutions I use:
$(document).ready() with JQuery waits until the DOM is fully loaded and done, so you can migrate some code into there.
function pageLoad(sender, args) is a built-in ASP JS function (like Page_Load in your code behind) that gets called when the page is done being loaded. You can migrate some JS into here like the first answer.
Personally, even though I like to avoid libraries, I like the first option because you can use more than one per page. This is only really useful if you're calling code in your master page though. The second option is good if you only use it once per page, but obviously if you try to use it in both your master page and current page, it won't work properly. So I'd recommend JQuery, but if you must avoid it, pageLoad works too.

How to add javascript functions to divs loaded externally?

I have page A and pageB.
Page A loads page B into a div.
There are divs in page B that I when I want to execute functions onclick.
The problem is that no matter where I place pageB's javascript it doesn't work.
I assumed that if i had a function ot initalise pagesB's javascript after it was loaded into the div this would work... but no success...
Any responses would be very helpful... regards J
If you're loading Page B with ajax, then most likely the javascript inside Page B is getting stripped out. This is due to a security concern.
An alternative way to get this to work would be that you separate your structure like this
Page A HTML
Page A javascript
Page B HTML
Page B javascript
Now, when you load Page A you should load the following:
Page A HTML
Page A javascript
Page B javascript
Then, when you make your ajax call to load Page B HTML, you simply call the Page B javascript (which is already loaded) and everything should work.
Here's an example of what I'm describing:
http://jsfiddle.net/josephbulger/zSmQE/
How are you pulling in the page B? You need to bring it in raw, some methods of pulling in pages actually process the page and return the results instead of just returning the code. This may be part of the problem, but I wouldn't think it would be.
Also, you should be able to just reference the controls in page B and you can use document.getElementById or if using jquery $("controlID").event and wire functions to them.
actually, you could put page B's javascript into an external file and then add it to page A using script src= because once the code is pulled into the page, they are part of the page.

How to use Ajax to bring a page into my site then wait until it is fully loaded scripts and all

I have a site which pulls pages into a dynamic interface. Currently, the main page requires that any javascript the external pages will need be loaded with the main page. Most javascript the external pages have are objects that are built when the page gets pulled in, but first, which causes issues.
It's a little hard for me to explain for some reason so here's a simple walk through of process.
1.Request a page be pulled in
2.Based on a variable passed to function create a specific object which will be associated with the physical html coming from the page ( This is the external Javascript)
3.Load page into the objects frame
This flow requires that the external javascript be attached to the main page not the page being pulled in.
I want to switch steps 2 and 3, but I assume that I will need a way to know that the page and all its scripts have fully loaded before attempting to create the designated object, but I have no idea how to do that.
I am using jQuery and hope that this can be accomplished without a plugin but if it is needed then so be it.
Thanks
Update
Good questions. So the pages are local pages that we build at this point, so we know what to expect. Also the pages are loaded just into basic div structure.
Specifically the main page makes a request to get a page. That page is returned in the form of a string and is then pasted into a div element that is on the main page. The pages are more like fragments I guess. But they can range from fairly complicated and require a bit of javascript to not using any javascript at all.
And the external javascript would generally be added via a script tag and is not inline.
Due to the dynamic nature of the page we do NOT use IFRAME's, they cause issues with the movement of our modules.
If you're using an iframe then I imagine you are changing it's src attribute. To get an alert on when that iframe is done loading you should include a script on the page within the iframe:
<script>
$(window).load(function() {
alert("All Done");
});
</script>
If you are just requesting a string version of a page via AJAX and populating a div you need some extra JavaScript to detect when those dynamically loaded script files have finished downloading to the client.
I would visit this link to get you started.
A combination of Nick and Mic's solution.
In your IFRAME pages, you need a way to determine when the content is done loading, or ready, and then alert your main page:
<script>
$(function() {
parent.frameReady();
});
</script>
In your main page, you can code in the hook from your IFRAMEs:
<script>
function frameReady() {
// attach custom js to iframe here
}
</script>

Document.ready script not working when page called into a tab

I have several pages that are called onto an ajax tabbed area. the pages that are called have javascript on them however the document.ready function will not load for each of these pages when loaded onto the tab. Instead I have had to put a button on the pages to load the function manually. Iv tried putting the document.ready function on both the page being called and the pages calling it but it still wont run. Is there any other way i can use rather than having a button? I dont want buttons displaying on my pages that have to be clicked before it looks good =(
Heres the code that calls the the page:
onclick="createNewTab('dhtmlgoodies_tabView1','Remote Access','','RemoteAccess.html',true);return false">Remote Access
All the javascript files are connected to the main page.
A button is located on the remoteaccess page:
input type='button' value='Load.' onclick='loadlightbox()'
The loadlightbox function is inside a javascript file that is conected to the main page:
loadlightbox = (function() {
$('#gallery a').lightBox({fixedNavigation:true});
});
There is no document.ready event being fired when you load the content into the page with JavaScript. Most libraries just stick what is returned with innerHTML. Most libraries just rip out the JavaScript code from the responseText and run it through eval().
You probably want to forget the whole document.ready and just stick the code block at the end.
The document.ready function won't fire because the page (document) is already loaded. The remote page is loaded as content not as a document.
Since you are using jquery you should take advantage of the .load function and also you should take a unobtrusive approach to attaching the onclick to your link. This allows your JS and code to be separate.
//Using Jquery load
$("#id_of_link").click(function(e){
e.preventDefault();
$('#dhtmlgoodies_tabView1').load("RemoteAccess.html",
function(){
//callback code here
})
})

called a page in jqtouch using ajax, now want to run javascript?

Just like in the kitchensink demo, I'm calling outside .html pages in from the index page using jqtouch, and that's working fine. There's video on the outside .html page, and I'm using submlime player to run it. The whole thing is very vanilla - but I need to be able to run the javascript inside that new .html page to run the video.
So on my index page, the code that uses ajax to pull in the new page:
<li class="arrow">play the video<small class="counter">2</small></li></li>
And on the videopage.html, I have:
<script type="text/javascript" src="http://cdn.sublimevideo.net/js/pagbioaz.js"></script>
I'll be using lots of videos - is it possible to run something before that just takes care of it always? Or what can I do on the index page to make it go?
Thanks!
I think you can put the pagbioaz.js link in index.html and use jqt's $(document.body).bind('pageInserted'... ) to fire whatever code you need to run.

Categories