Append `<script>` tag to html using jquery/javascript

Question

I am working on a slide show where I need to return a portion of HTML with a <script> tag and a piece of javascript function in it.I want to add it as I can have multiple slide shows and each one with different properties like transitions,slide speed etc.This function consists the parameters of the slider properties.

  return    '<div id="slider" class="nivoSlider">'+
                '<div class="">'+
                    '<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide01.jpg" data-thumb="images/slideShow/thumb/slide01.jpg" alt="" />'+
                '</div>'+
                '<div class="">'+
                    '<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide02.jpg" data-thumb="images/slideShow/thumb/slide02.jpg" alt="" />'+
                '</div>'+
                '<div class="">'+
                    '<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide03.jpg" data-thumb="images/slideShow/thumb/slide03.jpg" alt="" />'+
                '</div>'+
                '<div class="">'+
                    '<img id="" class="image mover" style="position:absolute;left:0px;top:0px;" src="http://localhost/gobiggi_VS_2_2/images/slideShow/slide04.jpg" data-thumb="images/slideShow/thumb/slide04.jpg" alt="" />'+
                '</div>'+
            '</div>'+'<script>$("#slider").nivoSlider({effect: "sliceDown",animSpeed: 500,pauseTime: 3000,startSlide: 0,controlNavThumbs: true,controlNavThumbsFromRel:true, pauseOnHover: true,manualAdvance: false});</script>';

The function inside setTimeout is the one I need to store inside the HTML I tried to achieve it by storing it in a variable and attaching it inside the setTimeout().I used .toString() and .append() .html .text but the script directly runs or executes instead of storing it in the html structure.How can I just store the function inside the script tag in the HTML structure?

setTimeout() doesn't wait for other code. If code is not done yet, or has a bit of delay the code can collide. — user1467267
– user1467267, Commented Mar 7, 2013 at 10:03
jQuery evaluates any script tags in your HTML, then discard them. — Salman Arshad
– Salman Arshad, Commented Mar 7, 2013 at 11:09
@SalmanA Can you suggest a way how can I store it to the HTML as I need to execute the function once the user publishes his website. **FYI:**I want it to be stored along with the html to the database,becoz this is a website builder kind of application.User can save and publish it on the web,so after publish I need to have the function or properties stored somewhere in the html structure so that the slideshow works.And each instance of slideshow may have different parameters set against it,so I cannot have a common <script> tag in the page — coderunner
– coderunner, Commented Mar 7, 2013 at 11:17

Potatoswatter · Accepted Answer · 2013-03-07 10:03:28Z

1

If you want the contents of the script tag to be stored as a function, you need to give that function a name. Simply enclose it all in a function setSlideShowTimeout() { setTimeout(function … ); };

answered Mar 7, 2013 at 10:03

Potatoswatter

139k29 gold badges281 silver badges435 bronze badges

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

2 Comments

coderunner Over a year ago

Thanks for the prompt response.setTimeoutwas added for testing.What we are trying is to save the entire <script> tag with the function properties in the html and have it saved to the database.**EDITED the question for it.Please have a look**

coderunner Over a year ago

the id #slider would be attached dynamically for each slider

bipen · Accepted Answer · 2013-03-07 10:06:47Z

1

your setTimeout function is incorrect..

 '<script>setTimeout(function slideShow(){$("#slider")......</script>';
                      //------^^^^^^^^---here you are creating a function `slideShow`

it should be

'<script>setTimeout(function(){$("#slider")......</script>';

OR

 function slideShow(){
      $("#slider").nivoSlider({
            effect: "sliceDown",
            animSpeed: 500,
            pauseTime: 3000,
            startSlide: 0,
            controlNavThumbs: true,
            controlNavThumbsFromRel:true, 
            pauseOnHover: true,
            manualAdvance: false
      })
  }

 setTimeout(slideShow,100);

and i don't think you need to add this in return.. add this in your main page.. and it should work

answered Mar 7, 2013 at 10:06

bipen

36.6k9 gold badges51 silver badges62 bronze badges

6 Comments

coderunner Over a year ago

setTimeoutwas added for testing.What we are trying is to save the entire <script> tag with the function properties in the html and have it saved to the database.**EDITED the question for it.Please have a look**

coderunner Over a year ago

the id #slider would be attached dynamically for each slider.

RobG Over a year ago

There is nothing wrong with using a name with a function expression, it's optional (though usually omitted).

bipen Over a year ago

why don't you store the script in another div without the <script> tag , with display:none, give it an id... and take it out when need....have you tried that too ??

coderunner Over a year ago

I want it to be stored along with the html to the database,becoz this is a website builder kind of application.User can save and publish it on the web,so after publish I need to have the function or properties stored somewhere in the html structure so that the slideshow works.And each instance of slideshow may have different parameters set against it,so I cannot have a common <script> tag in the page

|

Collectives™ on Stack Overflow

Append `<script>` tag to html using jquery/javascript

2 Answers 2

2 Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Related