Getting current DOM script object in ajax request (jquery)

Question

I have an html component that includes some javascript.

A component is a file in the template engine, so you can use it

• in the initial rendering of the entire html page
• as standalone html created using ajax request

javascript should be applied to the object in the template, i.e.:

<div class="grid" > <div class="item" id="item_13"> This is item 13 </div> <div class="item" id="item_14"> This is item 14 </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(HOW_DO_I_GET_PREVIOUS_ELEMENT???).someEffect(params) }) </script> 

I checked this similar question , but the best answers seem to rely on the current script being the last in the 'scripts' variable, as the next they are not loaded yet. If I add html and js using an ajax request, this will not be the case.

To be 100% understandable: the question of getting the previous object WITHOUT reference to any particular attribute: there is no unique identifier for the tag, no random identifier, since theoretically there is always the possibility that it will be displayed twice, there is no unique attribute class, since exactly the same component can be displayed in another part of the HTML document.

Answer 1

A simple solution that includes a two-step process:

1) find out which element has a script tag

2) find the previous brother of this item

in code:

 <div id="grid"> <!-- ... --> </div> <script type="text/javascript"> var scripts = document.getElementsByTagName("script"); var current = scripts[scripts.length-1]; var previousElement = current.previousSibling; // there may be whitespace text nodes that should be ignored while(previousElement!==null && previousElement.nodeType===3) { previousElement = previous.previousSibling; } if(previousElement!==null) { // previousElement is <div id="grid"> in this case $(document).ready(function(){ $(previousElement).someEffect(params); }); } </script> 

Is this good web programming? Not. You need to know which elements should act on them depending on what you create. If you have a div with id, this identifier is unique, and your generator may say that if it generates this div, it will also need to generate js, which sets the jQuery effect for it.

But let him ignore it; it works? How lovely.

Answer 2

If you can pass the <script/> Id block, you can easily call prev() to get the previous element.

 <script type="text/javascript" id="s2"> $(document).ready(function(){ $("#s2").prev().append("<h1>Prev Element</h2>"); }) </script> 

Jsfiddle example.

Answer 3

You will need to get a link to the script tag immediately after the "grid" div. As @Mark said, the easiest way to do this is to give the script tag a unique identifier. If this is uncontrollable, but you control the contents of the script (implicit in the fact that you are creating it), you can do something like this:

 var UniqueVariableName; var scripts = document.getElementsByTagName('script'); var thisScript = null; for(var i = 0; i < scripts.length; i++){ var script = $(scripts[i]); if(script.text().indexOf('UniqueVariableName') >= 0){ thisScript = script; break; } } if(thisScript){ thisScript.prev().append("<h1>Prev Element</h2>"); } 

Hack? Yes. It works? In addition, yes.

Answer 4

Something works here that works in FF, Chrome, and IE 8, somewhere else. It looks at the element before the last element on the page (which the script is processing), saves it locally (with a self-starting function), so the load handler can use it.

http://jsfiddle.net/MtQ5R/2/

 <div class="grid" > <div class="item" id="item_13"> This is item 13 </div> <div class="item" id="item_14"> This is item 14 </div> </div><script>(function(){ var nodes = document.body.childNodes; var prevSibling = nodes[nodes.length - 2]; $(document).ready(function(){ console.log( prevSibling ); }) })();</script> 

Having said that. I still have to mention that you are closely linking the behavior (JS) and the HTML, putting them in the same file, which goes against the internet stream of separating them. Also, I don't know how you expect this to work with an AJAX request, since you are not just adding it to the HTML as it is being displayed. In this case, it would be very easy to get the link to the html that you just pasted.