Executing javascript inside div

Question

Question updated. Update at the bottom-

I have to put script on a page. Unfortunately, I don't have control over the header or footer or even the body tag. All, I have is a set of inner html that goes inside a wrapping DIV which sits inside the body tag. Something like this:

<body>
     <div id="wrap">
         <!-- My controlled content -->
     </div>
</body>

Now, I have to place some javascript. So, I obviously put it inside the section that I control. The problem is that the javascript is not being executed. I even put an alert but there is NO alert box popping up. The final code looks something like this:

<body>
     <div id="wrap">
         <div id="mycontent">
              <script type="text/javascript" language="javascript" src="somesource"></script>

              <script>
                  var x, y; 
                  //Do something here with x,y;
                  alert("hello");
              </script>
         </div>
     </div>
</body>

Any idea what could be wrong? And how I can fix it?

Thanks.

UPDATE: I am not sure if this makes any difference, but I forgot to mention that all this HTML is present inside a frame tag (under a frameset). Will that make a difference?

Did you mean to say there is NO alert popping up with your code? This line is confusing: "I even put an alert but there is alert box popping up" — Kai Qing
– Kai Qing, Commented Apr 1, 2013 at 17:06
Does your <script> appear in the source code of the resulting page? Do you get any error messages? Is your <script> valid for the page's doctype (i.e. do you need to set a type attribute)? — Paul S.
– Paul S., Commented Apr 1, 2013 at 17:07
If its possible for you try opening the url in chrome, then open developer tools (Ctrl + Shift + I) and see the network section. If you see your script name in the list then it is getting loaded properly, or an error will be shown if browser fails to load the script — vdua
– vdua, Commented Apr 1, 2013 at 17:08

What have you tried · Accepted Answer · 2013-04-01 17:16:13Z

1

EDIT:

I see you are trying to load an external javascript file - are you sure that file exists?

Instead, put some javascript wrapped in the document ready event:

The below is a way to run code when the dom loads using jQuery. However, if you don't want to use jQuery, see the last part of this answer.

$(document).ready(function(){
// dom ready
   alert("hello");
});

You can further control the div my content like so:

$(document).ready(function(){
// dom ready
   alert("hello");
   $("#mycontent").hide(); // for example, hide the div
});

Non jQuery:

At the bottom of your HTML page, place your code in <script> tags - this way the code will run after the elements on the page have loaded.

edited Apr 1, 2013 at 17:16

answered Apr 1, 2013 at 17:04

What have you tried

11.2k4 gold badges35 silver badges45 bronze badges

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

10 Comments

nicosantangelo Over a year ago

he didn't tag the question with jQuery (and you don't even mention that you're using it)

What have you tried Over a year ago

@Nicosunshine Let me know if the recent update is what you were looking for, I think it is :)

What have you tried Over a year ago

@RichardTurner heh, thanks. Sometimes I just assume the jQuery way as it's much more natural to me, but it was wrong in this case I guess.

Kai Qing Over a year ago

By bottom of your HTML page, you may be referring to the bottom of the accessible part of the wrapper div he has access to.

nicosantangelo Over a year ago

I would take out the negative but I voted 7min ago, sorry. I still don't think this is the actual problem. I mean, a script with an alert in the middle of the page should work fine

|

Andre Silva · Accepted Answer · 2013-06-24 13:24:51Z

1

Disable the XSS filter.

As a security auditor, I just realized that Chrome nor Internet Explorer (IE) were rendering my alert().

Run chrome with:

C:\Program Files (x86)\Google\Chrome\Application>chrome.exe --disable-xss-auditor

edited Jun 24, 2013 at 13:24

Andre Silva

5,0169 gold badges58 silver badges69 bronze badges

answered Jun 24, 2013 at 13:00

Alejandro Hernández

111 bronze badge

Comments

Oliver Watkins · Accepted Answer · 2013-06-24 13:18:44Z

0

Javascript needs an event to be triggered. Like another poster mentioned, document.ready is the document loaded event. Most other events are user triggered like a mouse click etc. You can't just put Javascript halfway down an HTML file and expect it to execute. It needs to be tied to an event.

answered Jun 24, 2013 at 13:18

Oliver Watkins

13.4k40 gold badges136 silver badges254 bronze badges

Comments

Jan Turoň · Accepted Answer · 2013-06-24 13:31:12Z

0

Just a comment: document.ready: is not javascript, $(document).ready is jQuery. Use DOMContentLoaded instead:

$(document).ready(function(){
// dom ready
   alert("hello");
});

In modern browsers (see the support in the link above) it is equivalent to

window.addEventListener("DOMContentLoaded",function() {
// dom ready
   alert("hello");
});

answered Jun 24, 2013 at 13:31

Jan Turoň

33.2k24 gold badges139 silver badges180 bronze badges

Collectives™ on Stack Overflow

Executing javascript inside div

4 Answers 4

10 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related