I'm having a problem with the jQuery hide() and show() methods. Below is a snippet from a project I'm currently working on. This code comes from a multi-page form which is loaded in it's entirety, then jQuery is used to show and hide the various pages. I should metion that this technique works in every broswer except IE7.
//Hide all pages of the form
$("#client_form div[id*='client']").hide();
//Show just the first page
$("#client_form div#client1").show();
The issue is not that the hide() fails but that the subsequent show() doesn't bring the desired page back. I've tried using different methods like slideUp() and slideDown(), I've tried doing css("display","none"), various other ways to perform the hide/show.
I've also tried chaining methods, doing callbacks from hide to then show. Nothing seems to work properly in IE7.
Any thoughts oh mighty Stack Overflow hive mind?
Many thanks,
Neil
Have you tried just using the id(s) of the DIVs? Since they are unique to the page, you shouldn't need to make them relative to the form.
$("div[id*='client']").hide().filter('#client1').show();
Note the chaining so it doesn't need to retraverse the DOM, but simply filters the elements that it has already found.
What about just:
$("#client1").show();
Not sure that's it, but give it a shot? IDs should be unique so no need for the hierarchical selectors.
have you tried adding a class to all the divs you are trying to hide, and hiding that class.
Also change your show selector to use $("#client1") instead of that huge selector.
Have you done a simple test to make sure that your second jQuery is returning the correct object(s), if it's returning anything at all? eg:
alert($("#client_form div#client1").length);
or
alert($("#client_form div#client1").get(0).innerHTML);
or
alert($("#client_form div#client1").eq(0).text());
etc?
This would be the first place I would start - you'd then know whether you had a problem with the show() method, or the behaviour of the jQuery selector.
You might also try running your final HTML markup through a validator to see if there are any errors. IE7 is more strict than most other browsers.
Related
I'd like to append some data to the HTML element, so I've used the following code:
$("#bookListDiv").append(data.HTMLString);
and everything has working, but then I'd like to add a fadein animation while displaying this element, so I've modified it to:
$(data.HTMLString).hide().appendTo("#bookListDiv").fadeIn(1000);
Animation is working on Chrome but on Firefox I see the following error in console:
TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element.
I'm using jquery 1.8.2.
Could you advise me what can be wrong? I supposed something with data, but in the first approach everything is working correctly.
You will also get this if you call getComputedStyleon <html>. It should be common sense, but I had a recursive function that was bubbling up from inner elements with this function and giving the error when it ended up at the document root.
I've found the solution by adding the delay before fadeIn function.
Code after changes:
$(data.HTMLString).hide().appendTo("#bookListDiv").delay(100).fadeIn(1000);
As I've noticed the number in delay is should be adjusted to the size of data, in my case for 7KB json data it is working, but I've started from 1000.
This problem was wontfixed in jQuery: http://bugs.jquery.com/ticket/12462.
The workaround is to wrap your HTML in a single element before giving it to jQuery.
Try making sure you're using correct markup syntax as well.
I'm using AngularJS to dynamically change the disabled button state while at the same time hiding/showing a button... this made Firefox freakout with the "Window.getComputedStyle does not implement interface Element" error (but Safari/Chrome/IE).
In my case the real issue was that the markup I was working with did not have matching opening/closing tags: <button ng-disabled="!x">Click</div>
Once corrected: <button ng-disabled="!x">Click</button> things were fine.
Strangely, both previous answers were partial solutions though: wrapping a $timeout around my hiding/showing as the first-posted answer suggested worked (but the delay had to be a substantial amount) and wrapping the element in an additional element worked as well but was not the implementation I needed (and created other issues).
I've tried but simply cannot get a code sample working to reproduce this issue.
I am attempting to integrate jQuery UI tabs with knockout and I'm having a problem with tabs added at the start of my js. They seem to have a class ui-tabs-loading and I'm not sure why.
Here is the fiddle: http://jsfiddle.net/edhedges/mPbAL/
As you can see at the bottom of the js I am removing that class, but if you comment that out it breaks the first three tabs.
To "answer" your question, the ui-tabs-loading class appears to be added when an ajax request is spawned to fill the tab content (source: line #801 - https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.tabs.js). As to why this particular case is being treated as ajax by jQuery UI, I'm still looking into that because I'm curious.
I know that jQuery plugins historically don't work well with javascript data-binding frameworks, but there's definitely always a work around.
I'll update my answer if I figure something out.
I have some code that I'm using to create a dropdown menu that changes depending on what is checked. The JavaScript and html separated from the page work fine but once its loaded at the same time as the jQuery and everything is placed into a dialog box I receive an error which is like this
I can see this error thru Firebug on my client but it doesn't seem to appear in jsfiddle but when it appears the dropdowns don't work ...
document.form1a.damage is undefined
[Break On This Error]
document.form1a.damage[i].options.length=0;
I have managed to work out this much: that its caused by the dialog box part of the jQuery code, not the other jQuery that I'm using and that once the dialog boxes are removed the dropdown menus work absolutely fine. I have uploaded all me code to JsFiddle
Jsfiddle
Your form is empty when that code executes. Jquery ui dialog will move its entire html structure into its own div (typically at the bottom of the page) with all the applied styling, classes, etc.
To see this in jsfiddle, change the code load event to no wrap (head), it's above the framework select. You will get the error you mention.
Use firebug/chrome inspector to look at the html structure at that time. You have:
<form name="form1a" method="post" id="form1a"></form>
<div dialog1></div>
<div dialog2></div>
<div overlay></div>
As a solution to the issue, consider giving the selects their own id's and using:
document.getElementById('selectDamage0').options.length = 0;
... or continue using the by class name and index, etc instead of using the form notation.
Update:
Here is a jsfiddle showing another approach, just binding the onchange with jquery and setting the options through that. Commented a bit to show flow -- the function is near the bottom:
http://jsfiddle.net/xCMU6/
Update 2:
An old way of managing id's at the base level this way is to use a common prefix/suffix. So your first select is type-0 with damage-0. Then to reference the other you swap out the words (or split on -).
The problem is that jsFiddle is wrapping your code in a $(window).load function which makes fill_damage a variable defined in the $(window).load function. Once the $(window).load function has finished executing, the fill_damage function is no longer in scope, which means you cannot use an onchange handler to reference it.
The solution to this is to either:
include it in your $(function) and assign it to a click handler using jQuery (recommended since you're already using it) or through more traditional JavaScript methods (like addListener (not recommended since you're already using jQuery).
or to change your framework selection to noWrap (head) or no wrap (body).
I re-wrote your fiddle (with a lot of comments). You can see it here: http://jsfiddle.net/9YTwv/7/
Hope this helps.
On a call to show() or hide() the animation always plays twice for me. It is much easier to understand here.
A second related problem is that the animation for hide will play even if the object is already hidden (choose the first option from the drop-down and then choose the second option).
I think the problem is that you've got that setup script inside the dialog <div>. Move that code down to the script at the bottom of the page and it should work better.
There's still the problem that it calls "hide" unnecessarily when the target box is already hidden, but that should be pretty easy to fix.
Well, I don't know if I save it correctly on JS Bin but here it goes:
http://jsbin.com/umira4/19/edit
I hope this is what you were looking for :)
Take a look at .toggle( showOrHide ), http://api.jquery.com/toggle/
This will handle it for you automatically.
As Aaron said, there are some functions in jQuery that will take care of toggling the display of the inputs for you automatically. I think the one you are looking for is slideToggle().
Not exactly sure what the issue is, but when you clean up your JS into a separate file and use the slideToggle method it seems to work fine.
Here is what worked for me: http://jsbin.com/umira4/20/edit
I've got few divs on my website - on the load I want some of them to be hidden, some shown. I am hiding the ones I don't want like this:
$(".divToHide").hide();
It works well in Chrome, Firefox, IE8 an Opera... It doesn't in IE6 (I haven't tested on previous version yet...) - when I load the page all the divs are hidden properly. When I click a link that makes one of them visible it appears correctly. The problems shows when I click on a different link that's supposed to hide the first div and show another. The text of the first div is hidden, but the image stays and obstructs the newly shown div. I'm pretty sure it's a bug - when I zoom in or out of the page the divs that were supposed to be hidden disappear suddenly - they're only visible when I load the page.
Is there a way around it?
EDIT: I'm using jQuery v1.3.2
EDIT: Unfortunately the solution of using addClass to add css class that states display: none doesn't really work - it seemed like it did at first, but the problem is still there.
UPDATE: The js file I wrote can be found here, while the html here. The problem I have is that when you go from one portfolio to the other, the image of the first one stays there obstructing the next, even though it should be hidden (text underneath changes correctly). Wrong disappears when you try to zoom in/out of the page.
I used to hide all portfolios using $("#divId").hide(), but as was pointed out below, I now use $(".classToHide").hide().
UPDATE: The problem is solved on IE8 - I forgot to include the standards mode declaration... However, on IE6 it's still the problem.
You're hiding multiple div's by using an ID selector?
Try giving those div's a class "divToHide" and then use:
$(".divToHide").hide();
Maybe IE8 handles duplicate id's in another way than those other browsers..
Just a thought: you're not using an old (pre-IE8) version of jQuery, are you?
Edit: No, grycz is using the current version.
Edit: simplified to use toggleClass()
You could try doing it manually, like toggling a css class called "hidden." It might look something like this:
function myToggle(element_id)
{
mydiv = $('#' + element_id);
mydiv.toggleClass("hidden");;
}
And your css file would have:
.hidden
{
display:none;
}
I haven't tested this, but this is the kind of workaround I imagine you'd want to think about if this is, indeed, a bug in jQuery/IE8.
Are you sure that hide() function call is even getting called on the page load? Try putting an alert('hi') right before that function call, and see if that happens in IE8.
try
$("#divToHide").css('display:none');