Change script data-location for a <script> inside HTML

Question

I would like to modify one tag using javascript. I have a textbox to introduce a postcode and a button to find car parks near the position. The HTML tag is the following:

<script src="http://en.parkopedia.co.uk/js/embeds/mapView.js" data-Location="http://en.parkopedia.co.uk/parking/ST84JF/" data-options="l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2" data-size="750:400" type="text/javascript"></script>

I have two questions:

Can I modify the data-location to add the text write inside the textbox to search in that location?
Can I activate the script only when the button is clicked using javascript or jquery? The main problem here is that the should be inside the HTML code and I don't know how to put it inside the javascript file.

Code updated:

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

"Can I modify the data-location to add the text write inside the textbox to search in that location?" Not certain interpret this portion of Question correctly ? How would data-location attribute be modified ? — guest271314
– guest271314, Commented Oct 27, 2015 at 2:39
At the end of the data-location I would like to put the postcode introduced in the textbox using javascript. But the problem is that loading the script in the HTML, I don't know how to reload the script when I click in the button to search. — CapAm
– CapAm, Commented Oct 27, 2015 at 2:56

guest271314 · Accepted Answer · 2015-10-27 03:00:19Z

3

Try modifying data-location of script element before appending script element to body at click event of button element . Could alternatively use $.getScript() to retrieve script from external source

$("button").click(function() {
  var val = $("input").val();
  // Can I activate the script only when the button is clicked
  $("<script />", {
    "src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
    // Can I modify the data-location to add the text write inside the textbox
    // to search in that location?
    "data-location":"http://en.parkopedia.co.uk/parking/ST84JF/" + val,
    "data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
    "data-size":"750:400",
    "type":"text/javascript"
  }).appendTo("body") 
})

answered Oct 27, 2015 at 3:00

guest271314

1

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

7 Comments

PC3TJ Over a year ago

Never knew you could dynamically append script tags after page load and them actually execute! Learn something new every day

PC3TJ Over a year ago

However; is this wise to keep appending a new instance of the script each time the search parameters are changed with no way of ending whatever may be in progress by the first instance?

CapAm Over a year ago

This solution works fine for me, the problem is that you have to control the number of clicks, because when you click on the button once works fine, but if you click again it shows two windows, so the first one should be removed

guest271314 Over a year ago

@UKAndroid Could add an id to script element , remove script id="id" before creating, appending new script to page

CapAm Over a year ago

I've been searching about that and I think that a script cannot be removed. Maybe if I place it inside an iframe can be done. The main problem is that the script should be reloaded each time that I click on the button and your method works, but show a different windows each time.

|

PC3TJ · Accepted Answer · 2015-10-27 02:29:39Z

0

Yes the data-location is simply a custom attribute i believe so just use

document.getElementById("SCRIPTTAGID").setAttribute("data-location", "newValue");

As far as activating the script to execute when a button is pressed you will need to encapse it in a function then call the function in the onClick event of the button.

answered Oct 27, 2015 at 2:29

PC3TJ

8425 silver badges16 bronze badges

2 Comments

CapAm Over a year ago

Maybe that works, but I don't know how to reload the script after press the button and change those attributes. I'm going to find how to do this to test your point.

PC3TJ Over a year ago

The best way would be to encapse the entire script into a function then call that function to start/restart the script

Collectives™ on Stack Overflow

Change script data-location for a <script> inside HTML

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related