Error appendTo() using div

Question

The question is that I want to append a <script> inside a div. If I use the following code it works fine:

$("<script />", {
    "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("body")

but if I change body for ("#divId") it does not work. I tried using fiddle and works fine using a div id. Anyone know why does not work on my real page and works on fiddle?

http://jsfiddle.net/dperezq/oosttuc0/6/

The problem is that this map should be inside a div to appear only in one tab, because there are many tabs and I want to show it only in one of them. Are there any alternative to div instead body?

Update: The error that show me when I change for #divId is the following:

Uncaught Error: Missing attributes passed to mapView.js

And it goes to the following external .js:

if (
    !script.hasAttribute('data-location')
    || !script.hasAttribute('data-options')
    || !script.hasAttribute('data-size')
) {
    throw new Error('Missing attributes passed to mapView.js');
}

Showing the error "Missing attributes passed to mapView.js", but those attributes are not change only the appendTo() tag.

Update2: Libraries included in my project

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

Do you have a div with id "divId" ? Can you show us the html that you are using this code on? — Taryn East, Oct 27 '15 at 22:37
If you are only adding a script tag it won't matter where you put it since the browser doesn't render script tags. Appending to body should be fine. — developerbmw, Oct 27 '15 at 22:38
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Phil, Oct 27 '15 at 22:38
@TarynEast I update the post showing a fiddle with the html and js code. The Id is not divID. — CapAm, Oct 27 '15 at 22:41
@developerbmw and how can I do to show only in one tab, because I have a tab-pane using bootstrap and if I put on body it appears in all the tabs. — CapAm, Oct 27 '15 at 22:41
The script has no clue about tabs. They are not seperate pages. So if you only want it to load on one, you would need to change how the script initializes. Having no clue what mapView.js is, can't help you there. — epascarello, Oct 27 '15 at 22:47
@epascarello mapView.js is an external script which load automatically a map. I have not access to that file. It has been taken from the website to load a map inside mine — CapAm, Oct 27 '15 at 22:49
@Phil I have been reading that post and is not the same. There, the problem is to load a script before the div is loaded. In my case the div is loaded before the script so nothing to do wit that post. The problem is that only works for body not for any div and the script is called at the end of the code. — CapAm, Oct 27 '15 at 22:57
You're appending the scripts to the divs, but that doesn't mean that the content will appear in those divs. That's up to the script you're loading. — James, Oct 27 '15 at 23:25

score 1 · Accepted Answer · answered Oct 27 '15 at 23:54

1

Mapview.js does the following, near the top:

//Locate the current script tag
var scripts = document.getElementsByTagName("script");
var script = scripts[scripts.length - 1];

//If there are missing required parameters do not continue with the script
if (
    !script.hasAttribute('data-location')
    || !script.hasAttribute('data-options')
    || !script.hasAttribute('data-size')
) {
    throw new Error('Missing attributes passed to mapView.js');
}

So it assumes that the script it was called from is the last script currently on the page, which is almost definitely untrue because of how you are invoking it. This technique of determining which script is current is fairly outdated with the advent of defer, async, and dynamically adding scripts. So - in a nutshell - it probably won't work for you!

answered Oct 27 '15 at 23:54

James

14,812
2
21
36

Sorry but I don't get your point. The script works perfectly when I appendTo `body` but doesn't work within a div. There is any way to put the script and reload when I click on a button and show below this? – CapAm Oct 28 '15 at 00:21
1

Without knowing *all* the details of mapview.js, I imagine that when you append the script to the body, the above code is able to work out which is the "Current script tag" because the one you just appended to body *is the last script on the page*. When you append it to a div, it probably isn't the last script on the page. – James Oct 28 '15 at 00:30
And is there any way to reload the script with the location info or extract that script to make it work in another way? My only aim is to display the map with the location introduced in a textbox and if you introduce a postcode load into the map. It does not matter the way to do it. – CapAm Oct 28 '15 at 00:35
You would have to modify mapview.js to do it, I don't know if cloning mapview.js onto your server and changing it would work. Perhaps you could script the iframe creation that it does yourself. – James Oct 28 '15 at 01:53
I've modified the file cloning in my server and works fine. Thanks a lot – CapAm Oct 28 '15 at 02:09

Error appendTo() using div

1 Answers1