JQuery slideToggle problems

sure there is a obvious answer to this one but I don't know it. I am dynamically loading a page using JQuery .load() On the "loaded" page there is a form with form elements e.g. input type="number" (HTML5).

Is there any reason why if I slideToggle() the form the form elements always revert back to input type="text" yet if I toggle() - (just toggle()) the elements remain "true" Likewise if I add toggle('slow') the form elements always revert back to input type="text"

Ok. The HTML code on "page1" looks like this:

<form method="post" id="frmcreate">
<ol></ol>
<input type="submit" id="testit" />
</form>

it is loaded into this like this - yes doc ready() etc.

$('ul#fieldtypes li a').click(function(){
var id_timestamp = new Date().getTime();
var id = $('.inputlength').length;
$( "#frmcreate ol" ).append('<li id='+id_timestamp+' class="inputlength"></li>');
$('#'+id_timestamp).load('test1.php?y='+id);
return false;

});

This is the form that is loaded

Type <input t开发者_C百科ype="text" name="fieldmeta<?php echo $y; ?>[type]" /> <?php echo $error; ?> 
<br/>
Name <input type="text" name="fieldmeta<?php echo $y; ?>[name]" value="<?php echo $y; ?>" /> <?php echo $error; ?> 
<br/>
<div class="optoggle">OPTIONS</div>

These are the "options" loaded from another page:

<li>Cols<input type="number" name="fieldmeta<?php echo $y; ?>[cols]" /> <?php echo $error; ?></li>
<li>Rows<input type="number" name="fieldmeta<?php echo $y; ?>[rows]" /> <?php echo $error; ?></li>
<li>Size<input type="number" name="fieldmeta<?php echo $y; ?>[size]" /> <?php echo $error; ?></li>

They are loaded like this:

$('.optoggle').live('click',function(){
    $(this).next('div').toggle();
});

Like @jwegner pointed, your problem isn't with jQuery but is with browsers support to HTML5.

Resuming, today Google Chrome is the only that understands <input type="number" />. I mean "the only" because it does on a final version. Both Firefox 4 and Internet Explorer 9 promisses that will understand this attribute, but are on Beta or RC now and can't be considered.

Like pointed too, Chrome have a bug: when a parent is being animated, the children arrows on the number field stays hidden. If you focus your input and you use keyboard arrows, you'll see that it yet works as an number field. "Just" the appearance is wrong.

It does not happens with toggle() because the parent isn't animated, just turns hidden and visible again. But with toggle("slow") an animation happens, then the described bug too.

I posted a workaround here: http://jsfiddle.net/4fBvL/2/, wich is based on this: when sliding out, you can use animations. But to show up again, it must be imediatelly.

Another workaround is to use fadeIn() and fadeOut() instead of slideUp() and slideDown(). By some reason, fades doesn't causes the bug.

Anyway, the best option is to avoid type="number" for now. After all, you do not want your page to work only in Chrome, right?

On FF (3.6.13) it alerts "text", on Chrome "number". Guess as FF does not know the "number" type" it reverts to the default of "text".

It looks like your problem is a combination of things.

I've created this updated fiddle to help display the problems: http://jsfiddle.net/KmMBd/10/

In firefox and IE, Chris is exactly right. Firefox doesn't support the "number" type, so it always treats it as "text". If you load the fiddle, and hit alert it will display "text". Obviously this is incorrect, but firefox doesn't know how to handle the "number" type. If you inspect the input box in firebug, you will see that it does in fact say type="number", and just alerts wrong. This behavior will stay true no matter what kind of toggles or slidetoggles you do.

In chrome it looks like a bug. Given that HTML5 is not an official standard yet, this is understandable, and is a wonderful opportunity for a bug report. It looks like Chrome doesn't render the number type correctly when it redraws it. In the fiddle, if you slideToggle 1, and then slideToggle 2, the number spinner will come back. This is what makes me think it is a problem with redrawing it - something with child/parent stuff, I bet. This link has info about reporting bugs in Chrome: Report Chrome Bugs

In safari, the issue is a bit different. The number type is supported, but not actually handled. In short, this means that Safari recognizes that the input is different from a "text" box, but doesn't actually do anything with that information. Essentially, treat Safari the same as Firefox/IE.

In short, I guess the true answer to your issue is to avoid number inputs right now. They're not supported in most browsers (just one), and in the ones where they are supported (really, just Chrome) they are buggy. Wait a while - HTML5 will be awesome soon :)