jQuery append script not fully working - javascript

I am making an ajax request to a file and as part of the returned html, there are a few scripts. I am appending the results to a div in my file.The problem is that the code I am inserting has bind tags and they apparently don't work. I have tried replacing my bind functions with a quick console message and I see that it is inserting the script. How do I get a click event to work while appending the script, is this even possible? Thanks so much!
PS. I know .append() doesn't add the script to the DOM and that I can't view it while browsing the code.

So, I made a quick fiddle...
http://jsfiddle.net/xqnWF/4/
And, as you can see if you click "Trigger" and then "Button", it works as intended. Could you shed some more light on the sequence of events or the dom model at the time of binding?

You should use the eval(); function on the data once appended

Related

Can we attach a script element tag to document object before DOM gets loaded? using javascript

I tried it by using DOMNodeInserted but i didnt got the proper solution.
I want to attach my own script through addon-sdk before DOm gets ready. I have got contentscriptwhen option which provide this facility using its property "start". but; its not working as it unable to make changes in dom before it gets loaded
im sure you can do this using the nsITraceableChannel
http://forums.mozillazine.org/viewtopic.php?f=19&t=2800667&sid=77eeb915eef4615cb9f00ae144fbfa88
but i couldnt figure it out myself but im right there im sure

JavaScript not running because of jQuery dialog

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.

How to debug DOM manipulation by jQuery?

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

Javascript document loading event

Is there any javascript document loading event which which will activate after: the html is loaded but the not displayed in the browser?
HTML is displayed as it loads, so no, there's not an event like that. Are you perhaps looking for something like jQuery's $(document).ready()[API Ref] event?
If not that, then give us a little more context and we'll try to help you out.
You could load the HTML through an AJAX call and display it when you feel like it, but that would be a (slightly) more manual process.

Calling a user defined JS function inside returned AJAX content

I have a system that loads a div with content through the use of AJAX. All is well, I can get the div to load perfectly with details from my database and it works great.
The problem is this:
Inside the returned div, I have a couple of buttons with onClick events. The onClick events cause an error when I attempt to call a user defined function onClick="my_function();" but the onClick events do not cause an error when I call a JS defined function onClick="alert('success');".
Anyone know why this would be? my_function() is defined in the head of my page. Although, I have also tried to define it in the content returned by AJAX, still with no luck.
Any help will be greatly appreciated
if you are using prototype, jquery, etc.. (any JS framework), you need to be sure you have set the param "evalJS" to true. this last example I put works in prototype.
check here for prototype
You could try adding event handlers via JavaScript instead of onclick handlers on the actual elements.
Then you could use anonymous functions.
If you're simply updating the innerHTML of a DIV element with the result of an AJAX request, keep in mind that the browser parses only HTML not scripts.
Probably that's why you're recieving the JavaScript Error.
To parse also the scripts you need to consult the documentation of your library. For instance, if you're using ASP.NET you can call ScriptManager.RegisterClientScriptBlock in order to instruct the AJAX client componenet to parse the scripts in the result.
On the other hand, if you're doing it by hand (one thing I did awhile back), you need to detect and parse the scripts yourself.
OK, here is the simple answer.. I had the button element name and id as the same as the function which it was trying to call.. stupid mistake I know.. anyhow, it is now working.. however, I do have another problem.. my ajax only fires once.. it works great the first time, but after that the function doesn't work
here is my code:
function delete_account(account_id) {
create_request();
var url = "accounts_ajax.php?action=delete_account&account_id=" + account_id;
show_div('action_window');
document.getElementById('action_window').innerHTML = '<div class="please_wait"><img src="images/working.gif"><br>Loading...</div>';
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState!=4)return;if(xmlHttp.status==200){reload_div('action_window', xmlHttp.responseText);}};
xmlHttp.send(null);
}
it just causes an error second time around.

Categories