I am using jquery mobile in a cordova app.
I have multiple links (jquery mobile buttons), some of which follow a normal href link, others call some code in onclick.
When pressing my buttons making use of onclick, they work for multiple presses . I can press them multiple times, each time envoking the code.
However, when I press on of my buttons with a normal href link, my buttons making use of onclick seems to break. The moment I press a button following a normal href link, my other onclick buttons stop working.
It is worth noting that my buttons making use of onclick, also NEVER shows the "pressed" animation that jquery mobile adds when clicked. The normal href buttons ALWAYS shows the "pressed" animation when clicked.
My links all navigate to outside of the app, either activating an intent, or navigating to an external website using InAppBrowser. The normal href buttons always works.
I have tried to reload the page in place when a button is clicked, but this does not work.
$("#ctel").on('click', function (e) {
$.mobile.changePage("#businessCard");
});
My links:
As #Sithys was suggesting, I actually did have an error not relating directly to the jquery mobile buttons. I was re-writing my url's to point to another stats url, from which it then redirected to the appropriate url.
It seems some of the intents did not like this redirect, and probably caused an undesired effect/error somewhere in the android/cordova eco system. I removed the stats url, and by implication the redirect to the intent, and all is working as it should.
Strangely, I did however test this in Ripple emulator, and there it works perfectly fine with the stats tracking url and redirect.
I ended up doing a manual ajax post to track my clicks, and just activated the intents as per normal.
Related
I have a very rudimentary SPA built in vanilla JS. There are two buttons that the user can use to navigate between pages, for example:
buttonProfile.addEventListener("click", function () {
window.history.pushState({}, "", "profile/");
var updatePage = new Event("update-page");
dispatchEvent(updatePage);
});
Somewhere in the app, I have an event listener that listens to update-page to refresh the content that needs to be refreshed (without ever reloading the page) based on the current URL. Everything works fine.
However, I noted two odd behaviours:
If the user starts on Page A and then moves to Page B, the user will need to go back twice (button on the browser) in order to go back to Page A.
If the user goes back from Page B to Page A, once they are back to Page A the "forward" button on the browser will become greyed out.
EDIT
In case it helps, I noted I have the same issue when I use other people's SPAs that have a similar implementation. See this simple demo for example: DEMO | CODE
Steps to reproduce:
Click on About, then Contact, then again About, then again Contact.
Now, if you press Back once you'll go back to About. However, if you press it again you'll stay on About. You'll have to press it again to move to Contact and once you do, the Forward button will be disabled.
EDIT 2
I just realize that both my site and the site I posted above work fine when I run my browser in Incognito. There must be some other problem with my Chrome (though I have no idea what).
Okay, I found it. It was the Matter official Chrome extension. Not sure what exactly caused the issue though.
I am using PhoneGap 2.9 on a Galaxy S3 Android 4.2.1 to develop an application. In the application i have overridden the default back button behavior. The back behavior is simply a call to :
window.history.back();
I have 4 html pages. After navigating all the way to page4.html, I hit the back button and successfully navigate to page3.html. On page3.html I must hit the back button twice in order to successfully navigate to page2.html. It seems to behave this way regardless of the navigation plot. The first "back" works fine, all subsequent ones require a double tap of the back button.
Stangely, when I put an alert("going back!") just before the call to window.history.back(),it displays properly for every "back" tap in the navigation. What could be causing this?
I'm not exactly sure how you are calling window.history.back() but you could do something like this:
$("#backButton").bind("click", backClicked);
function backClicked(){
window.history.back();
}
and I highly recommend incorporating the fastclick.js library to any project that you want responsive buttons.
I want a link that submits some POST data. This works:
Bar
However, if I middle-click (Google Chrome: open link in new tab) on links that are formed like that, the page doesn't open in a new tab; rather, the link gets followed in the current tab. This isn't nice and it's unexpected behavior to boot (one expects middle-clicking would work on this link just like on any other).
How do I make this link act more like an actual link, particularly, by making this middle-click behavior work as usual?
You'll probably have to handle that logic in the onclick event manually, by detecting what button is pressed and then behaving accordingly.
I have an aspx page on my SharePoint site, which I have included tags. For some reason, every button on the page will reload the page when clicked. Even the buttons with no attributes (id, class, etc) or functions will reload the page when clicked. How can I fix this issue? I can't even see what's going on in the debugger because I'm not calling any reload functions, so I have no idea where to place a breakpoint.
Thank you in advance for your help, I really appreciate it.
The problem here is with the <button> tag. Its default behavior is to act as a submit button unless otherwise declared and will reload.
To keep your <button> tag, add type='button' to the button element. I think that prevents the reload.
Or you could go with the ole <input> tag with a type='button'. That keeps the reload from happening as well.
Or some other html element with an onclick event will work too.
First search for a function called doPostback and set a breakpoint on the entry point and click a button. If you hit this breakpoint it could mean that auto post back is turned on for the control generating the button. However if you trigger that breakpoint you should be able to look at the stack trace to figure out how you got there.
If that doesn't work, use the F12 tools in the browser, start with the HTML section and search (Ctrl-F) for the word "click". Then go to the script tab and do the same for each JavaScript file. If all of the buttons exhibit the behavior there is most likely a click event registered. Possibly with jQuery that looks like this $('button') so that it matches all buttons on the page and registers a click handler.
If that doesn't find it, and you have access download one of the master pages from http://startermasterpages.codeplex.com/ and temporarily replace your master page with one of these. Take a screenshot of the scripts that are loading on your page first. Then add them to the starter master page one at a time until the unwanted behavior returns. Then set a breakpoint on every function entry point in that script and click a button and see where you land.
Is it possible to capture the right click open in new window/tab or mouse wheel open in new window/tab event using jQuery?
UPDATE 1
Here is why I need it. I have codeigniter application which uses pagination class. I use this class to display a grid. The pagination links have been bind with a method that uses AJAX to load the next page in a container div. Now some one can right click and open the next page in new tab/window which I don't want. IMHO, the only way to handle this is to some how trap the (right click or mouse wheel button click) open in new window/tab event.
UPDATE 2
I just realised all my AJAX requests are being served by one CI controller which actually acts as a proxy to other classes/libs. In this controller I can look at the request and if it isn't an AJAX request I can redirect the user to another page.
A workaround solution is to replace all applicable <a> elements with buttons, where (obviously) the buttons would call JavaScript that does the appropriate navigation.
If you're really keen you can apply CSS to make the buttons look like <a> elements, though I don't recommend it because it confuses users who might try to treat them as standard links and right- or middle-click them.
(You could even get it to work for users that don't have JavaScript enabled by, e.g., making each button a submit button in its own little form.)
At the very least you can catch a right-click, using .mousedown() (or, presumably, mouseup()). See this StackOverflow answer about right clicks for more. And by catching it, you should be able to do a standard event.preventDefault() and then do as you like from there. That may be overkill, however, as it could prevent the user from doing other things you want to allow them to do.
I almost fixed a similar issue now for a page which I am working on. My fix was to do some changes in the page if that has been opened in a new window....
Assume that you open a page "B" from page "A" in a new window.
If you want to check the page "B" is opened in a new window from page "A", then follow the below steps..
If (document.referrer == "A" && window.history.length > 1) {
alert("I am page 'B' and opened from page 'A' in a new window");
}
If you don't want people to access link the usual way or fallback when the JS is disabled, then it shouldn't be a link. Just use any element you like (span, div, button, whatever you like) and style it like a link. Then bind the action using JS. Or you can use a link with href="#" or href="javascript: void(0)". That way if users right click it and choose to open in a new window, then they will end up in the same page they were before.