Getting the current script DOM object in a (jquery) ajax request

Question

I have a html component that includes some javascript.

The component is a file in a template engine, so it can be used

in the initial rendering of the whole html page
as stand-alone html rendered through an ajax request

The javascript should be applied to an 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've checked this similar question but the best answers seem to rely on the current script being the last one in the 'scripts' variable as the next ones are not loaded yet. If I append the html and js with an ajax request, it will not be the case.

To be 100% clear : the question is about getting the previous object WITHOUT reference to any specific attribute : no unique id for the tag, no random id as there is theoretically always a chance it will show up twice, no unique class attribute,as exactly the same component could be displayed in another part of the HTML document.

By previous element you mean $("item_14")?. If so, who's generating those ids? It sounds like the same thing that generates those ids could easily tell the JavaScript to insert it. — Ruan Mendes, Mar 11 '11 at 01:46
By previous element i meant the grid div. The question is about the possibility of referencing the previous element without reference to unique ids as any object could be represented in several DOM objects in the current page. I usually put the numeric id references in the class attribute rather than the id, for that matter. id was used here for example's sake — Lucas T, Mar 11 '11 at 01:48

Mike 'Pomax' Kamermans · Accepted Answer · 2018-03-28T15:03:42.543

Simple solution involving a two step process:

1) find out which element your script tag is

2) find the previous sibling of that element

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 = previousElement.previousSibling; }
    if(previousElement!==null) {
        // previousElement is <div id="grid"> in this case
        $(document).ready(function(){
            $(previousElement).someEffect(params);
        });
    }
</script>

Is this good web programming? No. You should know which elements should have effects applied to them based on what you're generating. If you have a div with an id, that id is unique, and your generator can tell that if it generates that div, it will also have to generate the js that sets up the jQuery effect for it.

But let's ignore that; does it work? Like a charm.

the line previousElement = previous.previousSibling; sould be previousElement = previousElement.previousSibling; ?? — Roberto, Mar 28 '18 at 13:05

score 3 · Answer 2 · answered Mar 11 '11 at 01:50

3

If you can give your <script/> block an Id you could 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>

Example on jsfiddle.

answered Mar 11 '11 at 01:50

Mark Coleman

40,542
9
81
101

[Monte Hayward](http://stackoverflow.com/users/738942/monte-hayward)'s comment: "@Mark : The id attribute is not supported in the script element. I've seen this affect execution in Chrome. http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.1 " – Peter O. Oct 28 '12 at 02:49

score 3 · Answer 3 · answered Mar 11 '11 at 02:53

You will need to get a way to reference the script tag immediately after the "grid" div. As @Mark stated, the easiest way to do this is by giving the script tag a unique id. If this is beyond your control, but you do have control of the script contents (implicit by 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. Does it Work? Also, yes.

score 0 · Answer 4 · answered Mar 11 '11 at 18:01

Here's something that works in FF, Chrome and IE 8, untried anywhere else. It looks at the element before the last element on the page (which is the script being parsed), stores it locally (with a self calling 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're tightly coupling the behavior (JS) and HTML, by putting them into the same file which kind of goes against the web flow of separating them. Also, I don't know how you'd expect this to work with an AJAX request since you're not just adding it to the HTML as it's being rendered. In that case, it would be very easy to get a reference to the html you just inserted though.

Getting the current script DOM object in a (jquery) ajax request

4 Answers4