get the title from a context - javascript

How Do I select the title of the context? I am suppose to select it to change the title of the page.
var handler = function(context){
document.title = //context's title
....
}
//sample context from ajax request
var context = '<!DOCTYPE html><html>\
<head><title>Hello</title></head>\
<body>\
Click Here<p>This is my sentence.</p>\
</body></html>';
.ajax{(
...
success: function(data){
handler(data);
}
});
EDIT: I forgot the doctype just incase it's necessary. The context was from an AJAX Request.

You can use regex to extract the title as well
var matches = context.match(/<title>(.*?)<\/title>/);
var title = matches[1];
Demo
Just discovered a way to do this, the non-regex way
title = $(context).filter("title");
console.log(title.html());
Demo

The second argument to the jquery $ function is the context
So you can try $("title",$(context)).text()

this should do:
var title = $(context).eq(0).text()

var handler = function(context){
$xml=$.parseXML(context);
console.log($($xml).find('title').text());
}
var context = '<html><head><title>Hello</title></head><body>Click Here<p>This is my sentence.</p></body></html>';
handler(context);
http://jsfiddle.net/MdvWq/

Please check http://jsfiddle.net/sethunath/UAt5p/
$(context)[1].innerHTML
returns the title

I don't know why, but nobody mention this. This is a popular method to search for elements in responses:
$(function() {
var context = '<html><head><title>Hello</title></head><body>Click Here<p>This is my sentence.</p>< /body></html > ';
alert($(context).filter("title").html()); //Use filter to get elements you want
alert($(context).filter("a").html()); //Will get HTML of that link (<a>)
alert($(context).filter("body > p").html()); //HTML of <p>
});​
http://jsfiddle.net/DerekL/THdaC/2/

Related

How can I add data params to an HTML string and get a string back?

I got a string like this:
var select_string = '<select><option>1</option><option>2</option></select>';
I need to add some data params to select in this string and get this string back in order to get the following:
select_string = '<select data-param1="param1" data-param2="param2"><option>1</option><option>2</option></select>';
I tried to use jQuery functions like .html() or .text() but it did not work. Like this:
select_string = $(select_string).data('param1', 'param1').html() //or .text()
Any ideas how to make it work would be helpful. Thank you.
You can use attr to add that attributes to the element
var select_string = '<select><option>1</option><option>2</option></select>';
var select = $(select_string).attr({
'data-param1': 'param1',
'data-param2': 'param2'
});
console.log(select.prop('outerHTML'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Since your attribute name starts with data-, if you want to get the value, you can use:
select.data('param1'); // param1
select.data('param2'); // param2
EDIT: Titulum is right, jquery is not needed here.
But here is the working example usign jquery
var selectString = '<select><option>1</option><option>2</option></select>';
var $select = $(selectString);
$select.attr("prop_key","prop_value");
var selectChanged = $select.prop('outerHTML');
console.log(selectChanged)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You don't need jQuery for this:
const myElement = document.createElement('div');
myElement.innerHTML = "<select><option>1</option><option>2</option></select>";
const selectElement = myElement.getElementsByTagName("select")[0];
selectElement.setAttribute("data-param1", "param1");
selectElement.setAttribute("data-param2", "param2");
You could use indexOf and substr() to split it into 2 parts, insert your new text, and put it back together again.
var first_half = select_string.substr(0, select_string.indexOf('>'));
var second_half = select_string.substr(select_string.indexOf('>'));
select_string = first_half + ' data-param1=\"param1\" data-param2=\"param2\" ' + second_half;

Unexpected Token error while passing some parameters to onclick function

i know this question is so common but I don't know why I can't seem to fix this. most solutions were just fixing some misspelled words , misused symbols etc. pls help me. I kept having unexpected token }.
this is my code
<a href='#' id='editTmModal' data-toggle='modal' data-target='#editTMModal' onclick='showDialog(\'"+data+"\')'>"+data+"</a>
function showDialog(data,e){
var name=data;
alert(name);
}
pls. help me :(.
this code works on integer but not on String.
Assuming that this link-element is dynamically inserted into your website. Hope this helps:
var data = "23";
var linkElement = "<a href='#' id='editTmModal' data-toggle='modal' data-target='#editTMModal' onclick='showDialog("+data+",event)'>"+data+"</a>";
document.body.innerHTML = linkElement;
function showDialog(data,e){
var name=data;
alert(name);
alert(e);
}
You might find it easier to add event listeners in the JS, and use dataset.
I'm assuming that you're inserting the HTML into the document with JavaScript somehow, so my example reflects this.
const name = 'Bob';
const html = `Test`;
document.body.innerHTML = html;
function showDialog(){
let name = this.dataset.name;
console.log(name);
}
const edit = document.querySelector('#editTmModal');
edit.addEventListener('click', showDialog, false);

Passing a jquery variable

i'm having trouble with the following jquery code
$this->registerJs(
'jQuery(document).ready(function($){
$(".member").on("change",function(){
var id = $(this).attr("id");
// alert(id);
var n = $(this).val();
// alert(n);
$.post("'.\Yii::$app->getUrlManager()->createUrl(['death/stl_set_relation','id'=>'+id'])
.'&name="+id)
});
});'
);
i want the ajax link to be like this http://192.168.1.4/~user/church/backend/web/death/stl_set_relation?id=20&name=1
but with my code i'm not able to pass value of id correctly.
what my code creates is the following url
http://192.168.1.4/~user/church/backend/web/death/stl_set_relation?id=%2Bid&name=20
i also tried like this
$.post("'.\Yii::$app->getUrlManager()->createUrl(['death/stl_set_relation','id'=>'"+id"'])
.'&name="+id)
but it didn't give me the desired result
how can i pass the value of id correctly?
try like this may be it will work..
$.post("'.\Yii::$app->getUrlManager()->createUrl(['death/stl_set_relation','id'=>'"+id+"'])
.'&name="+n);
You can do this in another way that is by using yii\helpers\Url class.
For example :
$this->registerJs(
'jQuery(document).ready(function($){
$(".member").on("change",function(){
var id = $(this).attr("id");
// alert(id);
var n = $(this).val();
// alert(n);
$.post( "'.Url::toRoute('death/stl_set_relation').'", { id: id, name: id });
});
});'
);
I solved the problem using following code
$.post("'.\Yii::$app->getUrlManager()->createUrl(['death/stl_set_relation'])
.'?id="+id+"&relation="+n)
Try this line
$.post("<?php echo \Yii::$app->getUrlManager()->createUrl([\'death/stl_set_relation\']) ?>?id="+id+"&name="+id).
Whatever you are writing in single quotes here will be printed as it is in the JS. You are printing + sign as it is here. Also you are using id inside PHP scope which should not be the case.

Using document.getElementById() inside a function

I have this code:
<div id="com_22">
<a onclick="delete(22);">delete entry</a>
</div>
and the javascript code:
function delete(url){
var tupu = document.getElementById("#com_"+url+"");
alert(tupu);
}
the problem is I'm having a null alert
I want to get the id
document.getElementById("#com_22");
How I can solve it
update
this is my code:
function confirmDel(url){
$(document).ready(function(){
$.ajax({
type: 'POST',
url: '/files/assets/php/ajax/blog-stream.php?act=del',
data: 'url=' + url ,
success: function(h){
var status = h.status
if (status == "si" ) {
$("#com_"+url+"").fadeOut("slow");
}
}
});
});
}
the code excecutes so well except for the id didnt fade out
$("#com_"+url+"").fadeOut("slow"); <--- no working
See :: getElementById(), that should have been:
function delete_something(url){
var tupu = document.getElementById("com_"+url);
alert(tupu);
}
btw, try avoiding use of js pre-defined names as function name see:: delete
Don't include the hash when you're selecting by id. You're not using jQuery or querySelector.
var tupu = document.getElementById("com_"+url);
There is also no need to concatenate the empty string there at the end so I removed it.
Remove the '#' from within the bracket.
The function getElementById gets the element ID as a string, not a CSS-style selector. Change to:
var tupu = document.getElementById("com_"+url);
As can be extracted by javascript levels:
[{"file": ". m3u8" in this page: http: //ivm.antenaplay.ro/js/embed_aplay_fullshow.js? id = 6eI6sLVBfOL

Display html link with javascript

In some part of an html page, I have a link with the following code :
<a id="idname" class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
I would like to automatically display the same link in another part of the same page by using a javascript.
What would be the script to insert in my page ?
Thank you in advance for any help in this matter.
Patrick
Try this:
myVar = document.getElementById("idname");
varLink = (myVar.attributes.href);
As son as you know the target id:
<div id="targetID">New Link: </div>
<div id="targetID2">New Link 2: </div>
And If you are using jQuery you can do like this:
var link = $("#idname").clone();
link.attr("id",link.attr("id") + (Math.random() * 10));
$("#targetID").append(link);
If not:
var link = document.getElementById("idname");
var newLink = document.createElement("a");
newLink.href = link.href;
newLink.className = link.className;
newLink.innerHTML = link.innerHTML;
newLink.id = link.id + (Math.random() * 10);
document.getElementById("targetID2").appendChild(newLink);
See this Example
<script>
window.onload = function() {
// get data from link we want to copy
var aHref = document.getElementById('idname').href;
var aText = document.getElementById('idname').innerHTML;
// create new link element with data above
var a = document.createElement('a');
a.innerHTML = aText;
a.href = aHref;
// paste our link to needed place
var placeToCopy = document.getElementById('anotherplace');
placeToCopy.appendChild(a);
}
</script>
Use code above, if you want just to copy your link to another place. JSFiddle
First, I want to point out that if you will just copy the element that will throw an error because the copied element will have the same id of the first one, so if you will create a copy of your element you don't have to give it the same id.
Try this code:
function copyLink(newDestination){
var dest=document.getElementById(newDestination);
var newLink=document.createElement("a");
var myLink=document.getElementsByClassName("classname")[0];
newLink.href=myLink.href;
newLink.className = myLink.className;
newLink.innerHTML = myLink.innerHTML;
newDestination.appendChild(newLink);
}
The newDestination parameter is the container element of the new Link.
For example if the new Container element has the id "div1":
window.onload = function() {
copyLink(div1);
}
Here's a DEMO.
Thank you very much to everyone for so many prompt replies.
Finally, I was able to use Jquery.
So, I tried the solution given by Andrew Lancaster.
In my page, I added the codes as follows, in this order :
1-
<span id="span1">
<a class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
</span>
<p>
<span id="span2"></span>
</p>
and further down the page :
2-
<script type="text/javascript">
var span1val = $('#span1').html();
$('#span2').html(span1val);
</script>
Therefore, the two expected identical links are properly displayed.
But, unfortunately, I forgot to say something in my initial request:
the original link is in the bottom part of my page
I would like to have the duplicated link in a upper part of my page
So, would you know how to have the duplicated link above the original link ?
By the way, to solve the invalid markup mentioned by David, I just deleted id="idname" from the original link (that I could ignored or replaced by other means).
Thank you again in advance for any new reply.
Patrick
Using Jquery you could wrap your link in a span with an ID and then get the value of that ID and push it into another span id.
HTML
<span id="span1">
<a id="idname" class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
</span>
<p>
<span id="span2"></span>
</p>
jQuery
var span1val = $('#span1').html();
$('#span2').html(span1val);
Example can be found here.
http://jsfiddle.net/3en2Lgmu/5/

Categories