DOM issue in Safari with buttons - dom

I was wondering if anyone has seen this issue before.
I have two button on a webpage. When I navigate away from the page and hit the back button to return the value of one button is placed in the value of the other.
E.g
<input class="SmallData" type="submit" id="logButton" value="Log In" tabindex="93"></input>
<input class="btn" type="submit" id="acBtn" value="Detailed Quote"></input>
When I come back to the page Detailed Quote replaces Log In e.g.
<input class="SmallData" type="submit" id="logButton" value="Detailed Quote" tabindex="93"></input>
There is no JavaScript causing this to happen. I look at the source everything looks fine but I inspect the DOM I can see that the there is a different value.
Is there something about how web kit handles the dom that it gets corrupted when the back button is used?
Thanks,

Try giving each input element a name="some_unique_name" attribute -- see if that helps Safari differentiate.

Mght it be because of having two submit buttons...?
Just my "random" suggestion though... :)

Check if the same thing happens in Chrome (if you have access to a Windows box) to see if it's a WebKit issue or Safari itself.

Related

Debugging the Facebook crawler for share button

I'm trying to debug/troubleshoot why the content that is displayed in the share link/window continues to show our browser detection content which we do not want displayed. I've updated our code to detect the Facebook crawler and not show this content if it's detected but the share link is still showing this. I've even tried to use the Facebook debugger to refresh the cache but it is still not working.
The share button code I'm using is this:
<div class="fb-like"
data-href="https://www-dev.hoopladigital.com/title/11042831"
data-layout="button_count"
data-colorscheme="dark"
data-action="like"
data-show-faces="true"
data-share="true"></div>
So either the cache is not being cleared, or my browser detection code is still getting executed when it shouldn't be. The text pointed to in the arrow in this screenshot should not be getting displayed.
How do I go about troubleshooting this?
http://note.io/LvbN5K
Your og:description is empty, so most likely Facebook takes the first text content that looks relevant to it … so provide a description!

Form not submitting when there is more than one input text

This is a quite simple issue to describe. This was tested on Firefox (3.6), IE (8) and Chrome (8).
Here is the file doesnotsubmit.html
<form>
<input />
<input />
</form>
When the focus is on one of the input and you press enter, nothing happens.
Below is the file doessubmit.html
<form>
<input />
</form>
When the focus is on the input and you press enter, the form is submitted.
Any insight on this inconsistent behavior ?
I know the form lacks a submit button, and thus is not semantically correct. Anyway, the submit process was meant to automatically be handled through jQuery dialogs buttonpane's buttons, and I wouldn't know how to place an additional <input type="submit" />.
user754151 is correct. This is a known bug but i guess you can get rid of it just intercepting the enter keypress event.
There are two possible solution for this issue.
The simplest solution is to add 1 more input field which will not visible to user.
you can bind the keydown event of that input field, and in that function just check keyCode == 13 then preventDefault().

How do I keep track of when what is the text entered in the form when the user navigates away from the page?

I have a piece of code like this.
<form method="get" action="{$self}" name="addcommentform">
<textarea title="{$enterComment}" name="comment" class="commentarea" </textarea>
<input class="Button" type="submit" value="{$postComment}" />
</form>
How do I keep track of when what is the text entered in the form's textarea when the user navigates away from the page? I want to prompt the user with a warning message so he/she doesn't lose the text.
Thanks.
You could use the javascript/jquery blur event, and if the user hasn't clicked the desired button have it display the form values. This might help JQuery Blur Validation Problem
Stu
Take a look at this Javascript code snippet:
http://www.boutell.com/newfaq/creating/disableclose.html
This takes advantage of the window's onbeforeunload event which fires when the user is about to leave the page.

Workaround iPhone's browser not honoring the <label> element

Just ran into this recently and I thought it'd be helpful to share.
The HTML <label> element is supported in a weird way by iPhone's (v3) browser. Try this:
<input type="checkbox" id="chkTest" /><label for="chkTest">Click me!</label>
Tapping the "Click me!" label has no effect, the checkbox is not checked.
Lack of support in a touch device for <label> elements puzzled me and I tried to overcome this issue by using javascript. The surprise came when a I noticed a void javascript like the one below also did the trick:
<input type="checkbox" id="chkTest" /><label for="chkTest" onclick="javascript:void(0);">Click me!</label>
HTH
Further info:
Also works with an empty handler: onclick=""
Disabling JavaScript inactivates again the label, even if using the empty handler.
After a bit of experimentation it looks like assigning the following CSS rule to is enough to trigger the expected label behaviour on the iPhone:
label {cursor: pointer}

Forms in Webkit HTML Notifications?

Is it possible to use form elements in Webkit HTML desktop notifications? I'm tried to open a HTML notification from a Chrome extension, and the <input> I added appears, but I cannot type in it. I'd like to be able to capture the input from it and save it.
var notification = webkitNotifications.createHTMLNotification(chrome.extension.getURL('input-prompt.html'));
notification.show();
<html>
<body>
<form><input type="text" name="here" value="test" /></form>
</body>
</html>
You can get around this in a pretty simple way. You can create a div that serves as your input box, and allow the content of the div to be edited (look here). Then you can use a button or another div as the submit button, then handle the form submit with javascript.
<div contenteditable="true" id="inputBox"></div>
<div id="submitButton" onclick="submitform();">Submit</div>
While I agree that desktop notifications are probably not meant to contain forms, I have a case where having a form in the notification is actually more convenient. I hope this helps.
Notifications are not meant for interactivity. They are meant to notify.
If you want to have interactivity, use an Action instead.