Add/append '<script>' tag to html using javascript/jquery [duplicate]

Question

Use Case: I am working on a template builder application.A user can build html templates using different components like text box,picture box,slideshow etc.

Issue: The issue we am facing is with the slideshow component.We are using a nivoslider plugin for building it.The slider must have settings like the user can change transition time,select transition etc.The user can add more than slide-shows.
Now the issue is when we add multiple slideshows,each one may have its own parameters for it,so we cannot have a common function.Also,the user can come back to edit the template,so we need to have independent script for each slideshow.

Reasearch: We have the basic structure working,but stuck at one place.We need to append a script tag to each slideshow added to the page by the user.

    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 script tag at the end of the code is what we are trying to append to the HTML and save it to the database.We tried having a blank <div id="temp"></div> and appending the script tag in it,but I believe jQuery executes the script and does not save it so we get a blank div.How can we store the script tag in the HTML structure and save it to the database?

may have its own parameters for it,so we cannot have a common function. - can't you make a function that accepts those parameters to differentiate between the sliders? — Andy
– Andy, Commented Mar 7, 2013 at 14:22
Even if each can have seperate params, you could still have one function. Just allow the user to choose from a list of parameters and then account for all of them inside the function. if the user didn't select a param, then it is excluded — Jeff Shaver
– Jeff Shaver, Commented Mar 7, 2013 at 14:23
It is also going to fail if you add more than one since you can only have ONE id on the page. Ids are singular! — epascarello
– epascarello, Commented Mar 7, 2013 at 14:26
My favorite principle in college was the simplification principle. It states that if you cannot solve a complex problem, reduce it to smaller more simple problems and try to solve them. Try creating a very simple jsFiddle that has only this basic functionality you are looking for and post it here. — Alex W
– Alex W, Commented Mar 7, 2013 at 14:28
#Andy #Jeff #epascarello Yes I am working on the same lines of having a common function and passing the parameters,but even if I try to append the parameters the script gets executed.As far as the id's are concerned those will be dynamic and I added it here as a single for reference purpose.Thank you all for responses. — KillABug
– KillABug, Commented Mar 8, 2013 at 4:13

Ben McCormick · Accepted Answer · 2013-03-07 15:43:49Z

5

Instead of writing out the script tag directly, create it as an object and then append it. The browser should respect it when you've created the element directly instead of passing it a string.

var script = document.createElement( "script" );
script.type = "text/javascript";
script.src = "scriptname.js";
$("#temp").append(script);

Then you can just put the javascript you want to execute in the external script file and it should work fine

answered Mar 7, 2013 at 15:43

Ben McCormick

25.8k12 gold badges56 silver badges71 bronze badges

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

2 Comments

KillABug Over a year ago

Yes ben tried it,but the problem is that i have to later publish it(i.e save it) to different domain created by user,so I want to have it inline instead of external!Any other work around?Thank you for the response

huykon225 Over a year ago

how can i add data-attribute to that script?

Collectives™ on Stack Overflow

Add/append '<script>' tag to html using javascript/jquery [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related