How can I make this jQuery work in IE explorer? - javascript

Working with the following code to dynamically change the submit buttons to image based buttons.
marker2 = jQuery('<span class="marker"> </span>').insertBefore('input#ResetDatesButton');
jQuery('input#ResetDatesButton').detach().attr('type', 'image').attr('src',theme_folder+'/style/images/ResetDatesButton.png').insertAfter(marker2);
marker2.remove();
This works beautifully in FF, Chrome and Safari but fails totally in IE6, 7 and 8. Then button is removed, but not replaced. How can I achieve the same result in IE?

IE doesn't allow you to dynamically change the type attribute of form inputs.
The only option you have is to delete the element and replace it with a new one of the correct type,

Internet Explorer doens't allow input[type] changes on the fly. Here is another thread discussing it: change type of input field with jQuery
Then, jQuery can do nothing to it works.
You will to:
Use CSS on your input[type=button] to show the image you want and hide the text.
Or hide the input, put an a tag with the image you want and set the click() to call the input.click().
EDIT:
Here is a little sample showing how to replace the input[type=button] with another control (you can use CSS to show it how you want) and then trigger the button click as well.

Related

JQuery Datepicker: how to deny it using my css

I have a Javascript JQuery datepicker attached to 2 text fields.
In Chrome, this works perfectly. In IE9, whenever I click on the text fields, the calendar field opens BUT when I want to select a date, the control flickers because the hover effect does inherit from some CSS.
I want to know if there's a way for me to deny the control to be using my css (such as or ) and just revert to the base browser visual style.
This way, I can start building it up from scratch and test where the flickering occurs.
Does this help?
pointer-events: auto | none

Can't focus on text field inside of jQuery UI button with Internet Explorer

I'm writing a single-page application that involves dragging "items" from one box into another box, and optionally sorting the items in that second box. Some of these items will consist only of static text labels, while other items will include text input boxes.
I am using jQuery UI to support the dragging/dropping/sorting, and am styling the "items" as jQuery UI buttons. The demo fiddle is at:
http://jsbin.com/oxotep/3/edit
This works great in WebKit-based browsers and Firefox, but doesn't work right in Internet Explorer (even IE 10). IE handles the drag-n-drop and sorting just fine... but if you try to enter text on any of the "items" with text fields, the text field won't hold the cursor focus.
Even with the jQuery UI "button" styling, there doesn't seem to be any standards-compliance issues that I know of in the resulting HTML. Any ideas?
As discussed in the comments on the original question, the issue was with "jsbin.com" itself rather than the code I was testing there. When you test code inside of jsbin's frames, using Internet Explorer, input focus gets stolen by the body tag.
You can work around the problem by popping-out the results as a separate window, rather than running it inside of a frame. Also, "jsfiddle.com" doesn't have this issue in the first place.

Make label inside input element disappear with saved passwords

I have placed labels in my input fields to have explanatory text display in the background and when the user types in the field, the text disappears. I'm using the example explained here: How to create a label inside an <input> element?
and specifically at http://attardi.org/
When the password though is saved by the browser such as in Google chrome, the text becomes garbled as in this image (this is currently on my local computer):
The background text is not disappearing for saved passwords. Any help would be appreciative - thanks.
You could also take advantage of the new placeholder attribute. Read about it here.
No IE support, though.
Option 2 would be using Jquery. Since you're already using Jquery for the label solution, you could add code that checks the value of the input after the document has loaded then show or hide the label accordingly.
This code would go inside the document ready function:
$(function() {
// Handler for .ready() called.
});
Just use the placeholder attribute – it's so simple:
<input type="email" placeholder="email" />
Literally, that's it; the browser will take care of the behavior.
Yes, it won't work in IE (until IE10 is released) – but you've already got labels next to the fields anyway, so it's not like IE users won't be able to tell which fields are which.
I investigated further, and this only occurred in Google Chrome and not Mozilla Firefox. My setup was correct and looks like it might in fact be a bug in Chrome. See issue log: http://code.google.com/p/chromium/issues/detail?id=117661
This also looks like it will occur for the placeholder attribute too when Chrome tries to do password autosave process and doesn't look to see if there is a previous inputted value.
Thanks for the input from all.

Innerhtml not retaining selected options for Selectbox and Radio in Mozilla and Chrome but works fine in IE

I have an application with several tabs, each of them having couple of fields. The last tab is Preview tab wherein I would like to show all the controls from all tabs in grayed color in uneditable mode. To do that, I am taking innerhtml of all tabs and showing the same in Preview tab.
While this logic works fine for Text fields, Select fields and Radio fields are not retaining their selected options in Mozilla and Chrome. It works as expected in IE 7, 8 and 9 too.
Any clue on this?
Try using the clone() method to make a copy of it instead of using the innerHTML property.
Example in JSFiddle: http://jsfiddle.net/jLB5s/

Manipulating selection and retrieving parent properties

User comment looks something like this:
<div id="comment23" class="commentholder">
<p>
This is a sample comment. It may contain different kinds of html.
like <strong>strong text</strong>
or anything that markdown supports.
</p>
</div>
When text in comment23 div is selected, I would like to display a button near it. If button is pressed I want to take the selected text, prepend ">" to each line (to make it blockquote in markdown) and paste it in an input box.
How can I achieve this in javascript, preferably jquery?
You'll need to read up on Selection objects. If you want to support IE < 9, which has a completely different selection API from other browsers, you'll need to read up about that too. You'll also need to simulate the selectionchange event, which exists in WebKit and IE but not Firefox and Opera.
I've answered all the constituent parts of this on SO before. Here's a couple of links:
How to bind a handler to a selection change on window?
how to get selection inside a div using jquery/javascript

Categories

Resources