How to track down a page reload in javascript - javascript

I am debugging a page that has a jquery dialog that contains a textbox and an ok button.
When a user hits enter, the page is reloading and the textbox ID & value are being passed to the page reload as get parameters. e.g.
http://example.com?tex_box_id=text_entered_in_text_box
I cannot figure out what is causing this behavior and can't figure out how to best track it down since the page itself is reloading.
I have tried stepping through all the jquery code, but did not have any luck. I can only assume that somebody somewhere attached a key press listener, but I can't figure out who. I know I can work around this by preventing theirs from running, but I still really want to figure out why it is happening.
Note that this does NOT happen if you click the OK button, only if you hit enter when you are in the text box

This will disable all of the forms on the pages from being submitted:
$('form').submit(function() {
return false;
});
While this will "solve" your problem, you should target your form specifically, and use custom JavaScript behavior for submitting the data (e.g. using $.ajax).
For more advanced debugging use the following:
$(window).keydown(function(event) {
var breakpoint = 1; // Place a breakpoint on this line!
// Then use the "step out of current function" button to
// continue through the JS that gets executed... much of it
// will likely be native code, but if you pay attention to
// the native function names, you should eventually see the
// event that is causing the reload.
});

Related

ADF - Client Listener with JavaScript surrounded by a button have a delay

I have a fragment page (jsff) with a numeric keyboard based on buttons surrounded by a client listener which invoke a java script function; every time I click a number it refresh an input text with the value concatenated. I implemented that with JavaScript. Why with JavaScript? Because of the delay using partial triggers showing the value in the input text.
When I test it in the server it works very fine. I click every button and do have a little delay, but It works for the requirements of the develop.
Now, when I insert that fragment inside another jsff which have several components, the result isn't the same. I click every button, and the value is displayed in the input text very fast, but, the button I clicked takes between one and two second to reload for been clicked again. I don't understand what is happening.
Could anyone help me?
Thank you very much.
In Oracle Community I was helped by Florin Marcus:
I quote the answer that works for me:
"Probably you are still propagating the event to the server. You can easily double-check this with a browser plugin like Firefox/Firebug, see if there is any server request being sent.
Normally, you will need to explicitly cancel the event from propagating to the server. For example, if you have a clientListener on a button, you do something like below:
function showPopupFromAction(actionEvent)
{
actionEvent.cancel();
//your logic here
}
"

Calling a Javascript function on focus of a page based on user interaction

I have a requirement where clicking on an icon should open a new window where the user will be able to view and edit certain fields. After the user closes this window and comes back to parent window, the icon color and text should be changed( for eg:- if the user has removed certain data, the icon will change to red color and text is set to null. If the user presses cancel button, nothing changes)
I am planning to implement this using a body onload function which essentially checks with the database using AJAX requests to see if the user has changed the data, then accordingly change the icon and text.
But, I see 2 problems in this approach
1. There will be a AJAX call even if the user has not changed anything.(ie. pressed Cancel button)
2. AJAX is called every time the body is on focus. Eg:- He may be working on some other page (or a different browser altogether) and comes back to this, resulting in an AJAX call.
Can anybody suggest a better approach.
I am using Javacript, JSP, Java
Two ways to implement this
Method 1
You know the methods which changes the database in the opened form. Suppose you have a delete method, write an additional window.opener.location.reload() after the method. The downside is that opener(parent window) gets reloaded every time you change something in the child window. Which is unnecessary.
Method 2 - Using cookies
I am using MDN's A little framework: a complete cookies reader/writer with full unicode support for creating cookies. The plan of action will be this. Create a cookie and set a value for it like this after you change anything in the child window and update it in the database like this docCookies.setItem("isChildFormUpdated", "yes");. You can use the same cookie for every action you do. Now when you navigate back to the parent form, do this.
$(document).ready() {
$(window).focus(function () {
var formCookie = docCookies.getItem("isChildFormUpdated");
if (formCookie !== null && formCookie == "yes") {
//resetting the cookie. you can also remove the cookie
docCookies.setItem("isChildFormUpdated", "no");
//docCookies.removeItem("isChildFormUpdated");
// your ajax call comes here
//or you could simply reload the form so that we get fresh data
//window.location.reload(); // it will be heavier
}
});
});
I hope you get the basic idea.
I think the easiest way to do this would be to set a cookie (learn how here). You can then have the two windows communicate between each other. This wouldn't be AJAX, but it will most likely work.
Another nice way to create a popup-like box is by using a modal box. These can be complicated but they look very nice. You have to make a jQuery plugin in, but you can take the one here and learn how it works. Good luck with your requirement.

prevent the same request done more than once

I have an ASP.NET MVC3 application running in a factory intranet. Factory uses Internet Explorer and end users are a little bit impatient. In a page where I'm adding a new object to database, Explorer doesn't respond quickly and users re-press the add button, hence the same object is inserted twice. I'm thinking of ways to prevent it.
I've written a script that makes the button invisible after it's pressed, but I want to make it just not-working. Is there such a javascript function or a server-side implementation that makes submit button doesn't work?
"Not working" clientside:
I would say disabling
document.getElementById("btnAdd").disabled = true;
is a little more safe than just making it invisible. On top of that, consider adding a loading animation in the form of a GIF from http://www.ajaxload.info/ so that the user knows they have to wait.
Ideally, you'd be making ajax calls and could re-enable the button if the action failed or returns a message.
Worst case scenario, you could remove the button from the page altogether, but that's not a very good idea if the action fails and the user will need to press it again.
"Not working" serverside:
On the database level, catch and reject duplicates (to your criteria) to ensure that even if they do slip one past, you don't end up with duplicate data.

How to detect when browser places saved password?

I'm trying to detect when a browser places a saved username and password into the input fields. I've looked at this post , but I don't have the option to change this functionality, and the other solutions on don't work.
Basically, I have a disabled login button if the fields are empty on load. But when a browser fills in the input, it doesn't enable the button. I'm trying to find how to see if it changes.
I'm using jQuery and JS.
I've tried .change, on .ready, on .load, and all. It seems to happen after the .load event.
Does anyone know a solution to this? I would like to avoid using any sort of timeout.
I think there is no way to detect if the browser has some buil-in feature that pre-populates the fields.
You could solve the problem with the a timer that enable the button, if something is there.
Something like this:
setInterval(function (){
if($("#username").val()!=""){
$("#loginbutton").attr("enabled","enabled");
}
},1000)
The key thing is that the field will be populated without there having being any keypresses in the field.
So if you trap .keypress on the input field to know if a key is any pressed, then if you get to submitting the form and find there were no keypresses despite a value being there - then you can be somewhat sure that the browser pre-populated it.
If you want to know before submitting (soon after the page loads), you'd want to run a check on an interval that sees if the value has changed despite no key presses.
As #japrescott pointed out, you might want to check for .focus as well in case the user pastes a value in.
Haven't test this, but couldn't you simply compare the default values of each field to the values of each field after the page is loaded (or .2 seconds after the page is loaded if that's an issue)?
Give a shoot to Jquery .live() function
$('.element').live('load', function(){
enableLogin();
});

Why does Firefox + My code Destroys FireFox refresh

I am soo angry right now. I lost hours and i dont know why this happens. Its a semi rant but i'll try to keep it short
My code would not work, even after refreshing it was broken
I fixed my code or so i thought because it stops working without me changing anything (you would think i am imagining this...)
I somehow decide to make a new window or tab i run my code and verifies it works.
I write more code and see everything is broken again
I write test in a new window and see my code does work
I see my code doesnt work and firebug DOES NOT HELP
I notice when i create a new tab everything works
I realize refreshing does not work and i MUST make a new tab for my code to work.
Then i knew instantly what the problem was. I modify a display:none textbox but i set the values incorrectly. I cant see it because it is hidden. Now some of you might say its my fault because when doing a refresh all of the data may be cache. But here is the kicker. I was using POST data. I posted in between of the refresh each and everytime.
Whats the point of using POST when the same data is cached and use anyways? If theres no chance for a search engine to follow a block user get link then why should i bother making anything post when security or repeat actions are not an issue? POST didnt seem to do anything.
Sounds like you're being hit by form-field-value-remembering.
When you use back and forward (but when the bfcache isn't used in browsers that have it), or in some browsers when you hit reload, the browser attempts to keep the values of each form field that were present when the page was last unloaded. This is a feature intended to allow the user to navigate and refresh forms without losing all the data they're laboriously typed into them.
So you can't rely on the value of a form field being the same at page load time as it appears it should be from the HTML source. If you have DOM state that depends on the value of a form field (such as for example a form where some of the fields are hidden or disabled depending on the value of another field), you must update that state at page load time to reflect the field values that the browser has silently dropped into place (no onchange events occur). And don't use hidden inputs to store scripting variables at all.
The exact behaviour varies across browsers. For example some browsers keep the values of hidden fields and some don't. Mozilla and WebKit put the new values in instantly as the fields are parsed into the DOM, whilst IE only does it on window.onload... and Opera, aggravatingly, does it just after window.onload, so you can only catch it by setting a 0-timeout to update state after onload. It's a nasty mess.

Categories