How to append a script using javascript inside a div

Question

I want to append a script generated in javascript inside a div created before in HTML, the problem is that only works if

$("<script />", {
        "src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
        "data-location":"http://en.parkopedia.co.uk/parking/" + search_field2,
        "data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
        "data-size":"650:400",
        "id":"script_map",
        "type":"text/javascript"
    }).appendTo("body")

but if I change that for "$('#divId')" does not work, so the questions are:

How can I append that script generated inside a div when you click into a button?
How can I prevent to duplicate the script when I click twice in the button? Because it's working inside the body, but when I click again it shows two script windows. So i should remove the script before create a new one or if I get to put inside the div, clean all the childs inside.

I've created a demo here:

Update: The main aim is to update the data-location when you click on the button and send the text inside the box to the data location to search there and show the script map below the textbox. Maybe it is another simple way to do it.

Why do you need the script to be inside a div? That doesn't make any sense. — Jared Smith
– Jared Smith, Commented Oct 27, 2015 at 14:17
Why do you think you need to append a script "inside a div"? — Mike Brant
– Mike Brant, Commented Oct 27, 2015 at 14:18
scripts belong in the <head>, not in the <body>. and if you only want it to happen once, then set a flag variable and check for it next time. e.g. if (!script_set) { ...insert script ... ; script_set = true; } — Marc B
– Marc B, Commented Oct 27, 2015 at 14:18
just tried changing to <div id="map", it works fine ! jsfiddle.net/kishoresahas/oosttuc0/1 — Kishore Sahasranaman
– Kishore Sahasranaman, Commented Oct 27, 2015 at 14:24
this is for your 2. requirement (aviod duplicates) jsfiddle.net/kishoresahas/oosttuc0/3 — Kishore Sahasranaman
– Kishore Sahasranaman, Commented Oct 27, 2015 at 14:38

Kishore Sahasranaman · Accepted Answer · 2015-10-27 14:45:41Z

1

This will answer your first question.

.appendTo("#map")

And for second question.

 if ($("#script_map").length > 0) {
            $("#map").html("");
        }

DEMO :

http://jsfiddle.net/kishoresahas/oosttuc0/4/

Code :

window.scripting = function () {
    if ($("#script_map").length > 0) {
    	$("#map").html("");
    }
        var src_fld = document.getElementById('txt_f').value;

        $("<script />", {
            "src": "//en.parkopedia.co.uk/js/embeds/mapView.js",
                "data-location": "//en.parkopedia.co.uk/parking/" + src_fld,
                "data-options": "l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
                "data-size": "650:400",
                "id": "script_map",
                "type": "text/javascript"
        }).appendTo("#map")
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="tab-pane carpark" id="main_view">
    <input type="text" id="txt_f" name="txt_f">
    <input type="submit" class="btn btn-default" id="btn" value="Submit" onclick="scripting(); return false;">
    <div id="map" name="map"></div>
    <iframe style="border:none" width="100%" height="500px" id="iFrame2" name="iFrame2"></iframe>
</div>

answered Oct 27, 2015 at 14:45

Kishore Sahasranaman

4,2504 gold badges27 silver badges52 bronze badges

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

3 Comments

CapAm Over a year ago

That's that I wanted, but in jsfiddle work fine, however in my project doesn't work. I click on the button and doesn't show anything, it happens the same in the above Run code snippet but my goal is to make it work as your jsfiddle. Maybe it's some library problem or something. I don't know but thanks for helping

CapAm Over a year ago

This is the example that does not work, and is exactly the same as yours: jsfiddle.net/dperezq/oosttuc0/6 You can try with some location - i.e -> "London"

Kishore Sahasranaman Over a year ago

just went through your fiddle. issue there is the JS and CSS files were not loaded , reason is the resource URLs are in HTTP protocol but as the jsfiddle is HTTPS , page blocks them from loading. try this ... jsfiddle.net/dperezq/oosttuc0/6

Emir Marques · Accepted Answer · 2015-10-27 14:31:41Z

Look this:

function scripting(){
	var src_fld = document.getElementById('txt_f').value ;
    
    $("#main_view").find("script[id='test']").remove();
    console.log("Size: " + $("#main_view").size());
  
	$("<script id='test'/>", {
    	"src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
		"data-location":"http://en.parkopedia.co.uk/parking/" + src_fld,
		"data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
		"data-size":"650:400",
		"id":"script_map",
		"type":"text/javascript"
	}).appendTo($("#main_view"))
    
    console.log($("#main_view").html())
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane carpark" id="main_view">		
    <input type="text" id="txt_f" name="txt_f">
    <input type="button" class="btn btn-default" id="btn" value="Submit" onclick="scripting(); return false;">
    <div id="map" name="map"></div>
    <iframe style="border:none" width="100%" height="500px" id="iFrame2" name="iFrame2"></iframe>
</div>

Abdulla Nilam · Accepted Answer · 2015-10-28 04:57:36Z

0

Run the Date input line

DateInput('creneau_2',true,'DD-MON-YYYY');

you could just try and do it all in jQuery rather than mixing javascript selectors.

$("#test").append("<script type='text/javascript'>DateInput('creneau_2',true,'DD-MON-YYYY');</script>");

edited Oct 28, 2015 at 4:57

Abdulla Nilam

39.7k18 gold badges85 silver badges115 bronze badges

answered Oct 27, 2015 at 14:18

Shivam Dokania

12 bronze badges

Collectives™ on Stack Overflow

How to append a script using javascript inside a div

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related