The below working code fetch all meta tags from head and displays the text inside a div on a web page. On keyup, i would like to copy input text val and replace head meta description and also update div so I can see that the text has been entered correctly from the front-end.
http://jsfiddle.net/michelm/JCWgA/
Two things that I am having issue with:
copying the new value of the input text box and replace the "content" of the meta name="description" content="new text added" (inside the div)
copy the val of the input text box and replace 'content' of the head meta description
Some of the code below:
<h2>Meta Description</h2>
<!-- I have head meta tags inside the below div to read the tags on the web page -->
<div class="all">some text</div>
<!-- input text on keyup to 1. update head meta description, 2 update meta description inside the div (<div class="all">some text</div>) -->
<input type="text" name="metadescription" id="metadescription" />
<!-- this part of jquery is working -->
<script type="text/javascript">
var foo = '';
$("head meta").each(function () {
foo += $(this).clone().wrap('<div>').parent().html();
});
//alert(foo);
var b = $('.all').text(foo);
// the below is part is not quite working
$description = $('.all').find('meta[name=description]').attr('content');
$('#metadescription').keyup(function(){
// $('.all').find($description).text($(this).val());
//the below just replace all the text, but I want it to replace the 'content'
$('.all').text($(this).val());
//alert(foo);
});
</script>
I got this to work, a big part goes to thanking softsdev for the most of the code :))
* Below is the FULL working code!!!! **
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="This is the meta description of some sort" >
<meta name="keywords" content="some, content, added" >
<title>change meta content</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function(){
$('.content').keyup(function(){
$('meta[name=description]').attr('content', $(this).val());
});
});
</script>
</head>
<body>
<h2>Meta Description</h2>
<div class="all">some text</div>
<h4>Update meta description</h4>
<input type="text" name="content" class="content"/>
<script type="text/javascript">
$('.content').keyup(function(){
$('.all').text('<meta name="description" content="'+$(this).val()+'">');
});
$('.all').append(($('meta[name=descritption]').attr('content')));
var tt = jQuery.metadata.get(name=descritption)
$('.all').text(tt);
$('meta[name=description]').attr('description').insertAfter('body');
</script>
<script language="JavaScript">
if (document.getElementsByName) {
var metaArray = document.getElementsByName('description');
for (var i=0; i<metaArray.length; i++) {
// document.write(metaArray[i].content + '<br>');
$('.all').text('<meta name="description" content="'+ metaArray[i].content +'">' );
}
}
</script>
</body>
</html>
you can do like example
change
$('.all').text($(this).val());
with
$('.all').text('<meta http-equiv="content-type" content="'+$(this).val()+'">');
Updated Answer
if you want to do it in your html then you can try this and check in firebug content will change of meta tag
but it will reflect only on client side
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="This is the meta description of some sort" >
<meta name="keywords" content="some, content, added" >
<title>change meta content</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function(){
$('.content').keyup(function(){
$('meta[name=description]').attr('content', $(this).val());
});
});
</script>
</head>
<body>
<input type="text" name="content" class="content"/>
</body>
</html>
Related
Showing listview data in html5 from database using java script and json. Click listview is Show detail. I can make show listview but can't show detail. The changing page. Listview 1 page, Detail 1 page.
This is code run successful. but can't show detail.
$(function() {
var people = [];
var json = "your url";
$.getJSON(json, function(json1) {
$.each(json1, function(key, data) {
$('#myUL').append('<li data-id="' + data.VendorCode + '"><img src="http://Order%20Custumer/images/'+data.VendorCode+'.png"/><h3 style="color:#FFCC00">' + data.LocalDesc + '</h3><p style="color:#FF9">' + data.EngDesc + '</p></li>');
});
$('#myUL').listview('refresh');
});
});
<!DOCTYPE HTML>
<!--
Intensify by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Salad Lovers</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<ul id="myUL" data-role="listview" data-inset="true">
</ul>
</body>
</html>
Include Jquery Library in your HTML file before tag and try running it.
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
your HTML File seems to be:
<!DOCTYPE HTML>
<!--
Intensify by TEMPLATED
templated.co #templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Salad Lovers</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<ul id="myUL" data-role="listview" data-inset="true">
</ul>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
this is still really new to me. I just need to know where I have gone wrong. I want to change the text inside the DIV when the button is clicked. I followed a youtube link (below), because it's been the easiest to follow so far.
However it's still not working.
https://www.youtube.com/watch?v=pyfKqrjmAl4&list=PLKOf7m55-0tHTUAeef0nFy4FNlC6DBnz8
Here is what I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="book">
<h1>Price</h1>
<div id="main_section">
<div id="tablef">
<div id="table">
<div id="cell"><h3>Day Time Packages 9am-3pm</h3></div>
</div>
<div id="table2">
<div id="cell2"><h3>Night Time Packages 3pm-Late</h3></div>
</div>
</div>
</div>
<div id="button_section">
<input type="button"id="my_button" value="Click me"/></div>
</div>
</body>
<script type="text/javascript">
$( document ).ready(function() {
$( "#my_button").click(function() {
$("main_section").html("this is the updated text"); //the code that changes the content of the div
});
});
</script>
add hash # before main_section
$( document ).ready(function() {
$( "#my_button").click(function() {
$("#main_section").html("this is the updated text"); //the code that changes the content of the div
});
});
$("#main_section").html("this is the updated text");
the selector should be #main_section because it is an ID, i.e. add # before main_selection
So your JS code becomes
$( document ).ready(function() {
$( "#my_button").click(function() {
$("#main_section").html("this is the updated text"); //the code that changes the content of the div
});
});
Just go through jQuery Selectors for better understanding.
$( document ).ready(function() {
$( "#my_button").click(function() {
$("#main_section").html("this is the updated text"); //the code that changes the content of the div
});
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="book">
<h1>Price</h1>
<div id="main_section">
<div id="tablef">
<div id="table">
<div id="cell"><h3>Day Time Packages 9am-3pm</h3></div>
</div>
<div id="table2">
<div id="cell2"><h3>Night Time Packages 3pm-Late</h3></div>
</div>
</div>
</div>
<div id="button_section">
<input type="button"id="my_button" value="Click me"/></div>
</div>
</body>
You just missed # sign in the jquery selector! ($("#main_section"))
I have three meta variables: Concept, DocType and Path that I want to add to my URL so that I up with something in my browser that looks like "http://www.mywebsite.com/page.html?concept=var1&doctype=var2&path=var3
Right now my page has the following code on it, but I am very new to JS and not sure if this is correct:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
this.document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&path=" + Path.content;
}
</script>
</head>
<body>
Line of text
<script>
if (location.search.indexOf("concept") !== -1) refresh();
</script>
</body>
</html>
This gives me the following error with no changes to my url:
reflow: 0.1ms
reflow: 0.11ms
reflow: 0.14ms
1406128139877 Services.HealthReport.HealthReporter WARN No prefs data found.
Use querySelector instead of getElementByName, and instead of concept.value, use concept.content. So your code would look like this:
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&iapath=" + path.content;
}
</script>
Also, iapath.content is an error, use path.content, that's your variable's name.
In addition, you have to call the method refresh somewhere; otherwise it won't run:
<body>
Line of text
<script>
if (location.search.indexOf("concept") === -1) refresh();
</script>
</body>
This piece of (static) html works perfectly on my local server on all browsers I have access to (chrome, firefox, IE...):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<title>Test</title>
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&iapath=" + path.content;
}
</script>
</head>
<body>
Line of text
<script>
if (location.search.indexOf("concept") === -1) refresh();
</script>
</body>
</html>
hi2all i write code which change the color of webpage when the user click the div
but doesn't work here is my code what's wrong with it
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
<script type="text/javascript">
var x=document.getElementById("m");
x.addEventListener("click",function{
document.body.style.backgroundColor = "red";
});
</script>
</head>
<body >
<div id="m">kfjgflg</div>
</body>
</html>
You should use something such as:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
</head>
<body>
<div id="m">kfjgflg</div>
<script type="text/javascript">
var x=document.getElementById("m");
x.addEventListener("click",function(){
document.body.style.backgroundColor = "red";
});
</script>
</body>
</html>
Because you have two problems in your original code:
Is missing a important () after the token "function".
The Javascript only recognizes a element after the page or element has ready. In this case, the element only is read to be recognized if your code has after the Javascript Codes that recognizes it.
The code above fixes this.
A important observation: In some IE's, this code can not work, because of the use of x.addEventListener, in this case, you can transform the anonymous function in a normal function (with a name) and listen with addEventListener (if available) and onclick (recommended for old IE's).
In this way,the code looks like:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
</head>
<body>
<div id="m">kfjgflg</div>
<script type="text/javascript">
function changeColor(){
document.body.style.backgroundColor = "red";
}
var x=document.getElementById("m");
if(!!x.addEventListener){ //If exists
x.addEventListener("click", changeColor);
}
x.onclick = changeColor; //It's a property, and ALWAYS can be set (but in some cases is not recognized)
</script>
</body>
</html>
Here is a working example with this code: http://jsfiddle.net/fjorgemota/qCXH3/
If you had opened your JavaScript error console it would have told you that you cannot access the property/method addEventListener of undefined.
You need to look for the element m after the DOM tree has been built. Either place into a function which gets called on DOMContentLoaded:
document.addEventListener('DOMContentLoaded', function() {
/* ... */
}, false);
or place your script at the end of your <body>.
The send page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script>
function send() {
var chinese = document.getElementById('chinese').value;
window.location = 'receive.html?' + chinese;
}
</script>
</head>
<body>
<input id="chinese" type="text" name="chinese" value="" />
<button onclick="send()">Submit</button>
</body>
</html>
The receive page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script>
window.onload = function () {
var chinese = location.search;
document.getElementById('chinese').value = chinese;
}
</script>
</head>
<body>
<input id="chinese" type="text" name="chinese" value="" />
</body>
</html>
The problem is that the receive page does not receive/display the Chinese characters correctly. For example, instead of 首页 it displays ?%E9%A6%96%E9%A1%B5, though it does display well in the query string in the browser address bar.
The value should be URI-encoded before you form the URL:
window.location = 'receive.html?' + encodeURIComponent(chinese);
Now that may not be all you have to do, because it's possible that the server could be causing problems, but you generally want to do that encoding anyway with input provided directly from an text field.