Develop Reference

How to set hyperlink dynamically from inputted text in angular2 and make it clickable with url?

In my angular component,
<div contentEditable="true" id="mytext" ></div>
<button type="button" (click)="goSee()">SEE ME !</button>
In class,there is goSee() method because I want to change selected text(later url) to a real clickable href.
goSee()
{
var startIndex = window.getSelection().getRangeAt(0).startOffset;
var endIndex = window.getSelection().getRangeAt(0).endOffset;
var slicedText = document.getElementById("mytext").innerText.slice(startIndex, endIndex);
document.getElementById("mytext").innerHTML.anchor(slicedText);
}
Entering url to "mytext" and selectedText works,,But NO hyperlink and clickable link appears .... Please Suggest me and Thank you all in advance..

First, you have to use link method to create anchor with the href attribute. Second, innerHTML is a property and you have to set it. Assuming that slicedText is a url you want to put into href attribute, you can achieve what you're trying to do like this:
var existingLinkText = document.getElementById("mytext").innerHTML;
document.getElementById("mytext").innerHTML = existingLinkText.link(slicedText);
Also, if your template is part of the component's template, I would suggest to use ElementRef to get access to the DOM instead of global document.

How to change div content while generating a new URL - AJAX?

sorry for the basic question!
I currently have a website and I need a feature where the content of a div is replaced when a user clicks on a hyperlink
I've achieved this using the following:
Click here
<script type="text/javascript"><!--
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>
However, I have 2 quick questions - the in the div once the button has been clicked is written as a string in the JS - is it possible to pass in a HTML file that has this text?
I need to make it so that the new text has a new URL - is this possible? (e.g. once a user has clicked on the button, the text is displayed and a new direct URL is available)

I'm assuming you mean something like this:
$('#my-link').on('click', function() {
$('#my-div').load('/file_to_load.html');
$(this).attr('href', "new_url");
});
If you can provide a bit more clarity, I'll refine my answer!
Here's how this works.
jQuery looks for the dom element with the id #my-link, then on click the function block is fired. jQUery $.load will load the content of that url into the div with the id my-div, then change the href attribute of $(this), "this" being the button to "new_url".

get the html of element itself using jquery .html()

How to get the html of element itself using Jquery html. In the below code I would like get the input element inside div using JQuery as shwon below
<div id="content">content div</div>
<input type='text' id="scheduledDate" class="datetime" />
$(function() {
console.log($('#scheduledDate').html('dsadasdasd'));
$('#content').html($('#scheduledDate').html());
});
EDIT:
Can I get the $("#scheduledDate") as string which represent the real html code of the input box, because my final requirement is I want to pass it to some other SubView( I am using backboneJS) and eventually use that html code in a dust file.
My original requirement was to get that input field as string so that I can pass it to some other function. I know, if I keep it inside a DIV or some other container, I can get the html by using .html method of JQuery. I dont want use some other for that purpose. I am just trying to get html content of the input box itself using it's id.

If you want to move the input element into div, try this:
$('#content').append($('#scheduledDate'));
If you want to copy the input element into div, try this:
$('#content').append($('#scheduledDate').clone());
Note: after move or copy element, the event listener may need be registered again.

$(function() {
var content = $('#content');
var scheduledDate = $('#scheduledDate');
content.empty();
content.append(scheduledDate.clone());
});
As the original author has stated that they explicitly want the html of the input:
$(function() {
var scheduledDate = $('#scheduledDate').clone();
var temporaryElement = $('<div></div>');
var scheduleDateAsString = temporaryElement.append(scheduledDate).html();
// do what you want with the html such as log it
console.log(scheduleDateAsString);
// or store it back into #content
$('#content').empty().append(scheduleDateAsString);
});
Is how I would implement this. See below for a working example:
https://jsfiddle.net/wzy168xy/2/

A plain or pure JavaScript method, can do better...
scheduledDate.outerHTML //HTML5
or calling by
document.getElementById("scheduledDate").outerHTML //HTML4.01 -FF.
should do/return the same, e.g.:
>> '<input id="scheduledDate" type="text" value="" calss="datetime">'
if this, is what you are asking for
fiddle
p.s.: what do you mean by "calss" ? :-)

This can be done the following ways:
1.Input box moved to the div and the div content remains along with the added input
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").append($inputBox);
});
2.The div is replaced with the copy of the input box(as nnn pointed out)
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
var $clonedInputBox = $("#scheduledDate").clone();
$("#content").html($clonedInputBox);
});
Div is replaced by the original input box
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").html($inputBox);
});
https://jsfiddle.net/atg5m6ym/4485/
EDIT 1:
to get the input html as string inside the div itself use this
$("#scheduledDate").prop('outerHTML')
This will give the input objects html as string
Check this js fiddle and tell if this is what you need
https://jsfiddle.net/atg5m6ym/4496/

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

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")
}

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")
})

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.

Change href value with JS from select box

I have this select box that gets its data from my DB.
What I want to do is add Edit and Delete buttons next to my select box that will do the respective actions on the current selected option.
So I added two buttons that direct to php scripts that do all this work.
My problem is with JavaScript where I need to update the elements of the buttons.
However my JS function doesn't work.
It appears that it isn't even fired.
http://jsfiddle.net/y5g42/33/
HTML:
<select name='selectHotel' onChange='updateButtons(this.options[this.selectedIndex].text)'>
<option value="volvo.php">Volvo</option>
<option value="saab.php">Saab</option>
<option value="mercedes.php">Mercedes</option>
<option value="audi.php">Audi</option>
</select>
<a href='' id='editButton'><button>Edit</button></a>
<a href='' id='deleteButton'><button>Delete</button></a>
JavaScript:
function updateButtons(var) {
element = document.getElementById('editButton');
element.href = var;
}​

You can't use var as variable name - var is javascripts reserved word.

You have several problems with your logic and the fiddle itself.
Best way without using JavaScript library is to attach the onchange handler in the onload of the window and handle everything there:
window.onload = function() {
var oDDL = document.getElementById("selectHotel");
oDDL.onchange = function updateButtons() {
var oLink = document.getElementById('editButton');
oLink.href = oDDL.value;
};
oDDL.onchange();
};
To have it work, add id="selectHotel" to the <select> element and remove the inline onchange from it.
Updated fiddle.
In your initial fiddle you didn't choose proper framework properties.
Note that I am calling the onchange manually one time to reflect the selected value, otherwise clicking the button before selecting other value won't work.

jsFiddle's onLoad option wraps your code in a callback function.
Therefore, your function definition isn't visible outside the code.
You need to select No Wrap instead.

You just passed value rather than text on onchange function
onChange='updateButtons(this.options[this.selectedIndex].value)'
You can try something like this :
window.updateButtons = function(value) {
element = document.getElementById('editButton');
var url = window.location.href;
element.href = url + value;
console.log(element.href);
}
See Demo : http://jsfiddle.net/y5g42/46/