jQuery Mobile Debug Page Redirection - javascript

I'm progmatically changing the page in my jQuery mobile application, on a click of button. This is the code I'm using:
$("#paymentConfrim").click(function() {
$( ".paymentDetailForm" ).submit(function( event ) {
if(!validatePaymentDetailForm()){ // if false comes from validation
return false;
}
else{
// I'm using changePage instead of jQuery pagecontainer widget as I'm using older version of jQuery mobile
$.mobile.changePage( "#submissionConfirmation", {} );
return true;
}
});
The page is getting changed successfully, but after a second or fraction of a second, the application is returned to homepage. As the application is big, with lot of legacy code, I'm unable to determine what code is causing that page change. As it happens after few milliseconds, I suspect there is some setTimeOut function that is causing that.
Strangely though the page is changed to homepage, the URL remains the same as of #submissionConfirmation page i.e. localhost/mypage.html#submissionConfirmation
How can I debug and know exactly what JavaScript code is causing that redirection?

The reload is caused by the form being submitted. You need to prevent the default form submission behaviour by calling event.preventDefault() as the first thing in your handler.
$(".paymentDetailForm").submit(function(event) {
event.preventDefault();
});

Related

Page failing to redirect and clearing URL parameters

I have a webpage that makes a POST request to a PHP script. Depending on the result of the request, the onclick event for a button sets a redirect to one of two pages.
<button id="button" type="submit">Proceed</button>
...
$.post('script.php', {
key: value
}, function(result) {
if (result != null) {
document.getElementById("button").onclick = function() {
window.top.location.href = "https://example.com/page?otherkey=othervalue";
}
} else {
document.getElementById("button").onclick = function() {
window.top.location.href = "https://example.com/otherpage?otherkey=othervalue";
};
}
});
This works fine on desktop browsers, but on Safari on iOS (specifically tested on iOS 10.3.2) upon clicking the button, the page refreshes and doesn't redirect to the correct site. In addition, it clears any URL parameters that were previously there. So for example if the page with the button is example.com/page?key=value, the page will refresh and become example.com/page?#_=_. I've tried debugging and checking a Javascript console, but it doesn't say anything.
The redirect is a page in my own domain, though the page with the button is integrated into a Facebook app page, if that's relevant.
Also, if I construct the URL on my own and try to go to it normally, it loads fine. I don't know what could cause this, so I'm not sure if there's any other relevant information worth posting, but I can say more if necessary.
Safari does not deal well with return false being done in the function, and especially with no return at all. I would include a onsubmit="return function();" in the html element, which I'm guessing is a form. You also attach this to the submit() event listener via $('[the form ID]').submit(function(){ do something here; return false;});
I was right that I suppose I didn't supply enough detail, but it seems that because the button in question was inside a <form> tag and acting as a submit button, that was messing it up. To solve the issue, I removed the form (since I was not submitting any data anywhere, just using the button to redirect the page) and it solved the issue. Now it works on desktop and mobile browsers.

Form won't submit with jQuery submit() method

I need to close an iFrame after the form within the iFrame was submitted, which I got with this function:
iFrame
$('#addCommentForm').submit(function(event) {
setTimeout(parent.closeIFrame('#popupAddComment{{ poiID }}-popup'), 500);
});
Main
function closeIFrame(iframe){
$(iframe).remove();
location.reload(true);
}
This works fine, even though my Chrome Browser (Version 44.0.2403.155 (64-bit)) won't wait the given time but fires the function instantly.
The problem I can't solve now is that the form will not be submitted to the PHP Symfony2 backend since I implemented the jQuery submit() method.
I did a bit of research and found a possible solution
iFrame
$('#addCommentForm').submit(function(event) {
event.preventDefault();
this.submit();
setTimeout(parent.closeIFrame('#popupAddComment{{ poiID }}-popup'), 5000);
});
Sadly this won't work neither. Can somebody explain me what I'm doing wrong?

JavaScript Setting property of a disabled button

PRE EDIT: It turned out that it was not about the disability of the button, but making some other actions after save. I debugged the page and found out that after making changes on a saved form, then page loses the javascript functionality in the (document).ready part. I've added the solution as an answer.
I have an entry page which has two buttons save and approve. The mechanism is something like, you can fill the form and save, then approve. You can also reach a saved page by refreshing the page or from the list of your saved pages.
The approve button is disabled if the form is not saved. I enable it from code behind after saving. Approve button also has a confirm button extender which takes its confirm text from javascript. I load it in (document).ready and its code is:
$(document).ready(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_btnApprove").click(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_lblMessage").text(GetConfirmTextForApprove());
});
});
,where GetConfirmTextForApproval() makes some calculations and returns the confirm text.
Now, my problem is, as the button is disabled when you open the form, the code above is not rendered at the first page load. This leads to the problem that, when I start to fill a form and save it, then approve it, I don't get any confirm text, because it does not run the function. But after refreshing the page or after I go to a saved form's page from another page, I get the proper confirm text.
So, how can I solve this problem? How can I get the proper confirm text even though the button is disabled at the first page load?
Note: I have to add that after saving, the url of the page is changed. The query string is added. That might also cause the problem.
You can use
// Disable #x
$( "#x" ).prop( "disabled", true );
// Enable #x
$( "#x" ).prop( "disabled", false );
But not when document ready, you need enable button when you want. Then you need create a event listener
$("#button").click(function(){
//Your code
if(GetConfirmTextForApproval()){
//You active the button and the text that you want show.
}
});
Solved my own problem:
As it was said in the pre edit of the question, the problem was caused because of making changes after the save. I've changed my function as:
$(document).ready(function () {
SetConfirmMessageForApproval();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler(sender, args) {
SetConfirmMessageForApproval();
}
function SetConfirmMessageForApproval() {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_btnApprove").click(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_lblMessage").text(GetConfirmTextForApprove());
});
}
This helps, if anyone else needs it.

How to check page is reloading or refreshing using jquery or javascript?

I have to do some kind of operation on the page refresh or reload. that is when I hit next page or Filter or refresh on the grid. I need to show some confirmation box over this Events.
is there any event which can tell you page is doing filer? refresh or paging? using javascript?
Thanks
If it is refreshing (or the user is leaving the website/closing the browser), window.onunload will fire.
// From MDN
window.onunload = unloadPage;
function unloadPage()
{
alert("unload event detected!");
}
https://developer.mozilla.org/en/DOM/window.onunload
If you just want a confirmation box to allow them to stay, use this:
window.onbeforeunload = function() {
return "Are you sure you want to navigate away?";
}
You can create a hidden field and set its value on first page load. When the page is loaded again, you can check the hidden field. If it's empty then the page is loaded for the first time, else it's refreshed. Some thing like this:
HTML
<body onLoad="CheckPageLoad();">
<input type="hidden" name="visit" id="visit" value="" />
</body>
JS
function CheckPageLoad() {
if (document.getElementById("visit").value == "") {
// This is a fresh page load
document.getElementById("visit").value = "1";
}
else {
// This is a page refresh
}
}​
There are some clarification notes on wrestling with this I think are critical.
First, the refresh/hidden field system works on the beginning of the new page copy and after, not on leaving the first page copy.
From my research of this method and a few others, there is no way, primarily due to privacy standards, to detect a refresh of a page during unload or earlier. only after the load of the new page and later.
I had a similar issue request, but basically it was terminate session on exit of page, and while looking through that, found that a browser treats a reload/refresh as two distinct pieces:
close the current window (fires onbeforeunload and onunload js events).
request the page as if you never had it. Session on server of course has no issue, but no querystring changes/added values to the page's last used url.
These happen in just that order as well. Only a custom or non standard browser will behave differently.
$(function () {
if (performance.navigation.type == 1) {
yourFunction();
}
});
More about PerformanceNavigation object returned by performance.navigation

jQuery: submit() not working on history:back

I'm using jQuery's submit() method to do some basic form validation before the user is sent to the next page
$(document).ready(function(){
$("form").submit(function() {
// form validation, set errors_detected = true on errors
if(errors_detected)
{
alert("error");
return false;
}
});
});
The problem is that if the user has passed the validation and clicks the Back button in the browser, the jquery code stops working. I'm using Opera.
Because usually when the user hits the back button, the browser shows the cached copy of the page, and doesn't run the $(document).ready() stuff again, AFAIK.
Not sure of the best way around this. Maybe setting a no-cache header?

Categories