jquery mobile and phonegap javascript not running on click, how to? - javascript

i have an index.html file that holds:
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady(){
var deviceuid = device.uuid; // gets the phoneid
alert('index');
checkUser(deviceuid); // this is some function i made
}
from here if everything works OK i will load another page called page1.html that has some text and a link:
Page 2
the page2.html has some other text and a link that goes back to the homepage:
Go to Index
What happens is that when i start the application i can see the alert and the other script running, but when i click on the link to go back to the index.html the page goes blank and no alert is shown
any ideas ? do i have to run some other code that refreshes the page?
edit:
i could use: <a href="#" onClick="document.location = 'index.html';" >Go To Index</a>
but it doesn't seem to work on the mobile device only in browser

You are describing standard browser behavior.But jQuery mobile performs page loading default per AJAX, see http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html.
This means that the first page ("index.html") is loaded and onDeviceReady is executed. When you click the link to the second page ("page2.html") this page is loaded per AJAX, is inserted into the DOM of the first page and is displayed.
When you click on the link to the first page, no loading occurs because both pages are in the DOM and the first page is displayed again without triggering onDeviceReady - this only happens on the first load.
You can turn off AJAX loading when you add to every link rel="external".
However, you should use AJAX loading and its advantages. Read http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html - it explains in detail when a script is executed. I think you should put your code in the pagechange- or pageshow-event, see http://jquerymobile.com/demos/1.0.1/docs/api/events.html.

Related

Wordpress, how to debug Javascript to check a specific behavior

I need to debug Javascript to check which function is called on a specific behavior.
To be more specific, when we click inside an iframe, all the page or at least the iframe is reloaded, so loaded 2 times.
For example, if you take a look at this page:
https://artetcadres.fr/art-et-images/#collection/hopper/
and click on the artist "Klimt", the main page activate a javascript function, display this image on the entire page and reload the iframe content.
I tried with the Chrome Devtools but can't figure out which function is called display the image "Loading..." and reload the iframe.
It's reloaded maybe because the url is dynamically updated. The anchor #collection/hopper/ will become #collection/klimt/.
This strange behavior appeared after an wordpress upgrade.

jQuery script keeps redirecting me from a page I'm trying to edit

I was trying to make an application in SharePoint and wanted to make it so that if you click on a button, it redirects you to a page and when that page loads I wanted it to instantly redirect the user to another page. ( I couldn't get the button to just redirect to the page I wanted on click, so that's why I tried doing it this way. ) I did this using a jQuery / JavaScript script. I'm new to making scripts so I was just testing and I ended up making this script:
<script type="text/javascript">
$(document).ready(function(){
Redirect();
});
function Redirect(){
$(document).load("url");
}
</script>
My problem is now that whenever that page loads, it just loads a blank page. But I can't get to the edit screen because it instantly redirects me to a blank page. I tried turning off JavaScript in Google Chrome but even though I was able to load the page without redirecting, I wasn't able to get to the edit page because it's in a jQuery AJAX drop down menu which obviously also doesn't work if JavaScript is turned off.
I would appreciate any help
EDIT: When I say edit screen I mean the place where I can edit the script. To do that I have to press a button on the page, but I can't do that since the page instantly redirects to a blank page.
Use the webpart maintenance page which allows you to remove and manage web parts without visiting the page, the instructions are as below.
Lets say your page is example.com/sites/default.aspx add the query string ?contents=1 to the page it will take you to the manage web parts page you can remove the script editor web part from there.
The other way is to use SharePoint designer to remove the web part this will also help you achieve the same result.

alert in page does not appear when loaded through window.history.back()

I have
$(document).ready(function(){alert('Page-A');});
in page A.
It works perectly fine, except when I go to some page B and come back to page A using
window.history.back();
Why does this happen and how do I fix this?
I forgot to mention, this problem occurs only in mobilephone browsers.
In your previous page (the page which is shown when you do a browser back or history.back()), add the following javascript line of code in the <script> tag in <head> section of the page:
window.onbeforeunload=function(e){};
When you attach the onbeforeunload handler, then when you visit the same page via browsers history navigation, the scripts on the page still execute.
Try with window.history.go(-1);

Hyperlink + Javascript = One click?

Is it possible to integrate a javascript into a hyperlink? Or make it into some sort of batch script or whatnot, so when the page has loaded it calls the javascript which is a button on the page?
To explain it further:
We have this page:
http://work.acceptance.XXXX.com/XXXX_Raffle/Lists/Raffle/overview.aspx
The sharepoint page has a survey on it.
To get the "popup" window to show, so you can answer a question in the survey, you need to press a button which calls this script:
javascript:__doPostBack('ctl00$m$g_e999ab40_719f_42fb_bd61_d986f232bdd5$ctl01$ctl00$toolBarTbl$RptControls$ctl00$diidIONewItem','');
So, is it possible to somehow combine the page + the javascript, so all they have to do is press one link or alternatively, a hyperlink which goes to a file on a server which triggers all this, so they instantly get to the page + the javascript automatically pops so they dont have to press the button?
Keep in mind, when I say "hyperlink" I mean the kind of hyperlink you would see in an email. A simple link to a website or a server location.
I'm not very good at everything that has to do with programming and webdesign, but I do have access to the sharepoint, though I'd need serious guiding in how to add anything there other than simple webparts. It's SharePoint Server 2010.
Here is a picture of the button and what happens when you press it.
http://i.stack.imgur.com/gKCG5.jpg
Add an onload event to the page to get it to show the popup:
<script type="text/javascript">
window.onload = showPopup();
function showPopup() {
__doPostBack('ctl00$m$g_e999ab40_719f_42fb_bd61_d986f232bdd5$ctl01$ctl00$toolBarTbl$RptControls$ctl00$diidIONewItem','');
}
</script>
This needs to go on the page that you're linking to so that the link takes you to this page which then fires this onload. Put it before the closing tag on the page.
No. You cannot construct a URL that will load a document and then call some JavaScript.
You would have to modify the page you are linking to so it runs the JS automatically. It could look at the URL and run that function conditionally though (e.g. if (location.hash === '#foo') { ... }.)

jQuery mobile scripts not working?

Here's my situation:
I have two pages. I use this line of code to execute things when a user changes between the two pages. It works, but only when I am loading a page for the first time. If I am returning to a previous page (one that I already visited), it doesn't call this method.
$('div:jqmData(role="page")').live('pagebeforeshow',function(){ ... });
For example:
I visit page A; the code executes.
I click a link on page A to go to page B; the code executes.
I click a link on page B to go back to page A; the code DOES NOT execute.
I then refresh the page (now on page A), the code does again execute.
Any reason why that would happen?
Here is a demonstration I made for you to show when events fire for pages in the jQuery Mobile framework (version 1.0): http://jsfiddle.net/jasper/QjtZW/1/
When you navigate to different pages the pageshow event always fires on the page being shown as you can see in my example.
If you are having issues with pageshow firing as it should then you probably have an error or some errors in your code that are blocking code from running. Make sure your error console is clear.

Categories

Resources