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.
Related
I'm having problems in several cases when attempting to update data / onscreen controls and then use these controls with jQuery, especially images. My present case is the following:
button click ---> call angularJs function that creates div controls on the screen ---> angularJS function at the end call JS function ---> JS function call JQuery selectors for the created divs.
The problem is that JQuery can't find the created divs.
What is the best/indicate solution for this case? (not only for this case, but for the cases where we need to wait for the dom render complete)
Regards.
There could be several cases that could apply depending on your implementation. First make sure jQuery doesn't override angularjs functionality or vice versa. Second angularjs makes any JavaScript code in script tags invalid. You have to include your JavaScript in your controllers. You can use debugging tools like Firebug to see what's going on. Posting some code here would also help a lot.
I'm working on an website with some dynamic jQuery content.
If the user pushed a button ("show menu") on the page, an javascript function runs. Let this function call loadMenu().
The loadMenu() function loads a menu (web conent) from server using ajax. Part of this loaded code is javascript/jquery. 2 functions of this code make some elements on the page draggable, 2 other functions make some elements on the webpage droppable. These functions are all started at $.ready-Time (if the DOM is ready).
All this works fine.
Now i added an "MenuAlwaysVisible" feature. This means: if the web-page is loading and finished (ready) the user doesn't need to press the button "show menu", because the javascript loadMenu() now fires automatically, if the page is ready
The problem now is, it looks like, the draggable handler are attached and worked as defined, but droppable does not work.
I'm not sure, but probably the droppable function runs on a time, where the DOM elements doesn't like to be droppable? Ore maybe some other jQuery codes overrides this? (but there are no other droppable elements on the page)?
So the question is: how to analyze that problem: how to debug DOM manipulation, using Windows and Firefox/Firebug or Safari, Chrome .. whatever...
Thank you!
One debugging trick I have found endlessly useful for dealing with JQuery is the insert obvious code trick. Slap in a .hide() command on some obvious, identifiable part of the page, and see if the code ever runs. Lets you track which code pieces are not behaving as intended, and which are simply never being used in the first place.
To answer my own question: i did not found any alternatives way than using firebug and console.info() or console.warn() to debug the code.
Thanks # all for the comments
I just installed firebug and want to see and debug jquery and javascript methods when fired.
Suppose that a jquery function will be called when button is clicked. When the site is huge and the page includes many js files then it is very difficult to point out which function will be called and where it is defined, because people attach button events in a different way. I mean the event is attached sometime based on css. So sometimes I just cannot find out which method is going to be invoked.
So please give me some tips so that I can see those functions invoke and the function body at run time wherever it is defined. Thanks.
You can try using FireQuery. From the site:
jQuery expressions are intelligently presented in Firebug Console and DOM inspector
attached jQuery data are first class citizens
elements in jQuery collections are highlighted on hover
jQuerify: enables you to inject jQuery into any web page
jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)
I've used it a few times and it makes debugging (when using jQuery) much easier.
EDIT
Using the plugin, you can look at the element and see the events bound to it. Your other option is to search your codebase for anything that identifies the element (id or css class perhaps). Then you should also be able to see what gets bound.
Take a look at http://firequery.binaryage.com/ (FireQuery). It's an extension to FireBug that allows you to see jQuery calls. I haven't used it that much, but it might be what you're looking for.
). I'm playing with some Opera User JS. I included "1jquery.min.js" in my User JS folder (1 in front because Opera loads them alphabetically). Unfortunately, it doesn't appear to be working.
window.onload = OnWindowLoad;
$(document).ready(function()
{
alert ($('#area_19'));
});
function OnWindowLoad ()
{
alert ($('#area_19'));
alert(document.getElementById("area_19"));
}
What's interesting about this code is that the first two alerts come back in NULL, but the last one does find the object! So the element definitely exists in the page, but my jQuery seems unable to get it. What's even stranger is that the jQuery "ready" function works, indicating that I do have jQuery capability.
I'm quite puzzled about all this ::- /. Hopefully somebody can give me a clue ::- ).
I suspect you are running the script on a page that uses another JS framework, probably Prototype.js.
If Prototype were included by the target page it would overwrite your jQuery copy of $ with its own that gets an element by ID, not selector. Since there is no element with ID #area_19 (# not being a valid character in an ID), it would return null. jQuery would never return null for a non-existant element, you'd only get an empty wrapper object.
(The $(document).ready() code would still execute because the $ was called before Prototype was included and changed the behaviour of $.)
Try using the explicit jQuery function rather than the $ shortcut.
These sorts of interferences are common when mixing multiple frameworks, or even mixing two copies/versions of the same framework. From jQuery's side its interactions can be reduced, but not eliminated, with noConflict. Personally for code like user scripts that might have to live in a wide range of contexts not controlled by myself, I would avoid using wide-ranging frameworks like jQuery.
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.