CODEWITHSUNDEEP
javascript
AntonioJunior
AntonioJunior

Reputation: 959

JavaScript code works when inserted via Firebug, but not when inserted in <head>

I have a javascript code (i) that write several <div><a href="..."></a></div> inside the <div id="subsection"> below. Another javascript code (ii) will define that when an <a href="...">Text</a> is clicked, it is transformed into an input box, which will have "Text" as its content.

I know the code (ii) works, because I tested it in a separated page. Also, when I insert it via the Firebug command line, it works, too. But when I write the code in <head>, it doesn't work.

What is the problem and how do I make it work?

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
   <script type="text/javascript">
    $(document).ready(function() {
    $.getJSON('list.php', 
        { method : 'list', value : 'user' },
            function(data) {
                $('#subsection').append("<p><a class='editable'>teste</a><input type='text' id='boo' style='display:none'/></p>");
                $("a.editable").click(function() {
        $(this).parent().find("input").val($(this).text()).focus().show()
        $(this).hide();
        $(this).parent().addClass("edit");

        $("input").keyup(function(event){ 
            var txt = $(this);
            if(event.keyCode == 13){
                txt.parent().find("a").show();
                txt.parent().find("a").text(txt.val());   
                txt.parent().removeClass("edit");
                txt.hide();
            }
            return false;
        });
    });
            });
});
</script>

<section id="items">
    <div id="subsection" class="space"></div>
</section>
</body>
</html>

EDIT: Ok, I edited to show partially what I'm doing. Thanks to your help, I made it work. I get the json content via the getJSON method and mount it. I think it wasn't working because I loaded the functions inside $(document).ready() mounted the <div>s, but that modified the DOM. So it wouldn't work. Then I loaded the functions right after I modified the DOM, and it worked.

Thank you all!

Upvotes: 0

Views: 295

Answers (4)

Matteo Conta
Matteo Conta

Reputation: 1449

EDITED! Here is the correct example, if you click on the A you edit the input box passing the link value and hiding the link... if you type enter you hide the input and copy the text to the link. I have also added a reference to JQuery.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>
<body>
   <script type="text/javascript">
    $(document).ready(function() {
        $("a.editable").click(function() {
        $(this).parent().find("input").val($(this).text()).focus().show()
        $(this).hide();
        $(this).parent().addClass("edit");

        $("input").keyup(function(event){ 
        var txt = $(this);
        if(event.keyCode == 13){
          txt.parent().find("a").show();
          txt.parent().find("a").text(txt.val());   
          txt.parent().removeClass("edit");
          txt.hide();
          alert(txt.val());
        }

        return false;

      });

            });
        });
    </script>

<section id="items">
    <div id="subsection" class="space">
        the other <div>
        <a class="editable">test link</a>
        <input type='text' id='boo' style="display:none"/>
        </div>s go here
    </div>
</section>
</body>
</html>

Upvotes: 1

Abduliam Rehmanius
Abduliam Rehmanius

Reputation: 928

It looks like your code in head is executed before the HTML body is fully loaded which can break some getElementById logic, you can put the code in a function and then use: onload="yourFunction();" in your body tag

Upvotes: 0

Matteo Conta
Matteo Conta

Reputation: 1449

Are you using jQuery? Do you execute your code on the document.ready or document.onload event or immediately? Are you sure that your code finds something when executed? Wait for the load evet and execute it. Add to this post the a code sample.

Upvotes: 1

FishBasketGordo
FishBasketGordo

Reputation: 23142

It's probably an issue of trying to manipulate the DOM before it's ready. Typically, I would handle this with jQuery's $(document).ready event handler, but if you don't want to go that route, it may be enough just to put your code in a <script> tag at the bottom of the page (just before </body></html>).

Post your actual script. Seeing it may allow for some better answers.

Upvotes: 4

Related Questions