Issue with jsFiddle and identical code not working with jQuery

Question

I am currently having an with my jQuery, Below is the code that generates a list via PHP and the list is then clickable to create a list of the sub contents of that folder.

I have a jsfiddle of this working: here

However when run on my page it is not running; the issue seem to be replicated when selecting "No wrap - in ".

I honestly don't know anything about these 4 jsfiddle options, it works in 3 but not 4. This may have been a stupid oversight by me or I may be missing some form of critical info

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<?php
if ($handle = opendir('fileServer')) {
    while (false !== ($file = readdir($handle)))
    {
        if (($file != ".") 
         && ($file != ".."))
        {
            $thelist .= '<LI id='.$file.'>'.$file.'';
        }
    }

    closedir($handle);
}
?>


<script type="text/javascript">
function genCont(){
//  alert(sel + "folder selected")


//This is the alert that works in JSfiddle but not on my Rpi :(
$("#fList li").click(function() {
    alert(this.id); // get id of clicked li used in below PHP
});

//future unused code, suggestion for improvement are, of course, welcome 
//var fName = sel;
<?php
if ($handle = opendir(/*not used yet*/)) {
    while (false !== ($file = readdir($handle)))
    {
        if (($file != ".") 
         && ($file != ".."))
        {
            $thelist2 .= '<LI><a href="'.$file.'">'.$file.'</a>';
        }
        }

    closedir($handle);
}?>
}
</script>


<div class="fsFolder">
<ul id="fList">
<?=$thelist?>   
</ul>
</div>

Thank you ahead of time SO

Kris

@Sergio: If so, that's a really bad title for the question, given that the issue here is that it does work on jsFiddle, just not in the wild. :-) — T.J. Crowder
– T.J. Crowder, Commented Sep 2, 2013 at 20:42
I realize my title is poor retrospecitively as well as the jsfiddle was slightly wrong, but yes it works on jsfiddle and not on my Rpi. — Ziconius
– Ziconius, Commented Sep 2, 2013 at 20:46
@T.J.Crowder :) I thought it would help OP to understand jsfiddle better. But he got good answers now so I remove my comment. Thanks for the sharp eye :) — Sergio
– Sergio, Commented Sep 2, 2013 at 20:47

Anton · Accepted Answer · 2013-09-02 20:35:11Z

1

You need to wrap your code with doc.ready

$(document).ready(function(){/*code*/});

UPDATE

$(document).ready(function () {

    $("#fList li").click(function () {
        alert(this.id); // get id of clicked li
    });

    //$boobies = document.getElementByID("#fList li").this.id
    $boobies = $('#fList li')[0].id;

});

answered Sep 2, 2013 at 20:35

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ziconius Over a year ago

Sorry for not fully understanding do you mean the function genContent() or just: $("#fList li").click(function() { alert(this.id); // get id of clicked li used in below PHP }); or is it that whole script tag?

Anton Over a year ago

@Ziconius check the update, and btw document.getElementByID doesn't work like jQuery $()

T.J. Crowder Over a year ago

ready handlers are for libraries. There are better options if you control the location of your script elements.

T.J. Crowder · Accepted Answer · 2013-09-02 20:37:13Z

0

You've been hit by jsFiddle's really surprising default behavior, which is to wrap all of your JavaScript code in a window load handler. If you look in the upper left-hand corner of the jsFiddle UI, you'll see an unlabelled drop-down box, with the value onload selected. The window load event happens very late in the page load cycle, after all HTML has been parsed, all external resources (including images) have been loaded, etc.

Just put your script tags at the end of your page, just above </body>, so that the elements they act on exist. The problem with your code is that this line:

$("#fList li").click(...);

happens before that element exists, because it's above it in the page source. Just put it below it in the page source.

References:

answered Sep 2, 2013 at 20:37

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

1 Comment

Ziconius Over a year ago

So, if I understand correctly the layout should be; decending order <head>CSS etc/<body> content, THEN onclick <script></body> Is this standard or more unique to this situation?

Collectives™ on Stack Overflow

Issue with jsFiddle and identical code not working with jQuery

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related