I have list of cars models, and i trying to insert the value of select to the cookie with jQuery.
this is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
var singleValues = $("#car").val(); //I NEED TO BE INSIDE
$('#continue').click(function() {
$.cookie("car", singleValues);
})
$('#continue').click(function() {
var singleValues = $("#car").val();
$.cookie("car", singleValues);
})
</script>
</head>
<body>
<select id='car'>
<option value="mazda">mazda</option>
<option value="honda">honda</option>
</select>
<a href='/' id='continue'>#<div id='continue_button'></div></a>
</body>
</html>
but the cookie didnt make.... why?
thank you very much about your help :)
You need to wrap your code in a document ready handler. Try this:
<script type="text/javascript">
$(function() {
$('#continue').click(function() {
var singleValues = $("#car").val();
$.cookie("car", singleValues);
})
});
</script>
Currently your code is attaching the events before the elements exist in the DOM.
Related
I need to dynamically add and remove HTML elements to my product form (attribute addition purpose) and was searching stack overflow.
I found this solution to be very close (except it does not has a remove option plus I sincerely do not know how to retrieve the data of each textbox, but all this later).
https://jsfiddle.net/nzYAW/
The code in the fiddle works fine. But as I tried it on my local machine it fails to produce any result.
Here is what I did
index.html
<!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>
<style type="text/css">
.extraPersonTemplate {display:none;}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('<div/>', {
'class': 'extraPerson',
html: GetHtml()
}).appendTo('#container');
$('#addRow').click(function () {
$('<div/>', {
'class': 'extraPerson',
html: GetHtml()
}).hide().appendTo('#container').slideDown('slow');
});
})
function GetHtml() {
var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=firstname]')[0].name = "firstname" + len;
$html.find('[name=lastname]')[0].name = "lastname" + len;
$html.find('[name=gender]')[0].name = "gender" + len;
return $html.html();
}
</script>
</head>
<body>
<div class="extraPersonTemplate">
<div class="controls controls-row">
<input class="span3" placeholder="First Name" type="text" name="firstname">
<input class="span3" placeholder="Last Name" type="text" name="lastname">
<select class="span2" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div id="container"></div>
<i class="icon-plus-sign icon-white"></i> Add another family member</p>
</body>
</html>
and this is the result
Where did I go wrong at copy paste?
You need to load jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You need to include jQuery. If you check your javascript console (which you definetly should) you will probably find this error:
$ is not defined
That is because jQuery wasn't loaded before you try to use it. Add this to your page before your javascript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can see in the JSFiddle that you include these libraries, but you don't include them when you just copy paste this.
Include these javascripts
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
Move the JavaScript to be right above the </body> tag.
I think if you're trying to access elements before the page has loaded them, then it won't work.
Also as other answers have pointed out, be sure you've included jQuery in the <head></head> section of your page.
I'm using JSF 2.1, PrimeFaces 3.3.1.
Trying to put Yandex Maps on my page, to show events on map.
So, my xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
...
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition template="./Template.xhtml">
<ui:define name="content">
<script src="//api-maps.yandex.ru/2.0/?load=package.full;lang=ru-RU" type="text/javascript"></script>
<script src="/js/yMapsEditableCircle.js" type="text/javascript"></script>-->
<script type="text/javascript">
var myMapRes;
ymaps.ready(init);
function init() {
myMapRes = new ymaps.Map('resultMap', {
center:["#{calculatorGeo.cgm.selectedCity.latitude}", "#{calculatorGeo.cgm.selectedCity.longitude}"],
zoom:12
});
//taking coordinates from bean to js
var coords = ['#{calculatorGeo.cgm.coords}'];
//#{calculatorGeo.cgm.coords} - String variable containing smth like this: [54.9888,56.3434],[54.458,56.3456],...,[58.23458,55.2345]
var myCollection = [];
for (var i = 0; i<coords.length; i++) {
myCollection.push(new ymaps.Placemark(coords[i]));
}
var clusterer = new ymaps.Clusterer({preset: 'twirl#redClusterIcons',
gridSize: 100,
synchAdd: false,
minClusterSize: 2});
clusterer.add(myCollection);
myMapRes.geoObjects.add(clusterer);
}
</script>
<div id="resultMap" style="width:800px; height:600px; border: 1px solid"></div>
</ui:define>
</ui:composition>
</h:body>
Error in for statement in javascript, what am I doing wrong?
Error text: Fatal Error: Element type "coords.length" must be followed by either attribute specifications, ">" or "/>".
Tried to put js up to the tag, not worked too.
As you are writing XHTML you should define everything inside the script tag as CDATA:
<script type="text/javascript">
//<![CDATA[
// Your JS-Code
//]]>
<script>
The error is because of the < in the head of the for loop.
How do I get a variable in an iframe from the parent if I do not know how many iframes are on the parent page and the order of the one in question. For instance, I know the iframe in question is the second one, so I can select windows.frames[1]. But if I didn't know know it was the second one, how would I select it by ID.
<!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" />
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#getValues').click(function(){
//This works, but I don't want to select the iframe by the number since I don't know it.
console.log(
window.frames[1],
window.frames[1].window,
window.frames[1].window.getMe
);
console.log(
window.frames['myIFrame'],
window.frames['myIFrame'].document,
window.frames['myIFrame'].window,
document.getElementById('myIFrame'),
document.getElementById('myIFrame').window
);
});
});
</script>
</head>
<body>
<button id="getValues">getValues</button>
<div><iframe src="otherIframe.html"></iframe></div>
<!-- iframe3_get.html only sets global variable getMe to something. -->
<div><iframe id="myIFrame" src="iframe3_get.html"></iframe></div>
</body>
</html>
In the bellow example, getM1 and getMe2 will be equal. This doesn't seem to be a very good answer, but it is the only one I have. If it is a bad answer and you elect to vote it down, please provide a better answer.
$('#getValues').click(function(){
var getMe1=window.frames[1].window.getMe;
for (var i = window.frames.length - 1; i >= 0; i--) {
if(window.frames[i].frameElement.id=='myIFrame'){
var getMe2=window.frames[i].frameElement.getMe;
break;
}
}
});
I am working on a clipboard functionality...
I am facing mouse-events issues... In below code, when I remove label tag and style="display:none" class="hide" , my clipboard functionality is working, but clipboard functionality is not working..
Please kindly check below code: what changes I need to make so that it works perfectly?
<!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>
<title>Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery</title>
<link href="_assets/css/Style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="_assets/js/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript">
function myfunc2() {
var selectedobj=document.getElementById('texter');
if(selectedobj.className=='hide'){ //check if classname is hide
selectedobj.style.display = "block";
selectedobj.readOnly=true;
selectedobj.className ='show';
}else{
selectedobj.style.display = "none";
selectedobj.className ='hide';
}
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
var clip = new ZeroClipboard.Client();
clip.setText('');
jQuery('#copy-button').click(function(){
clip.setText(jQuery('#texter').val());
});
});
$(document).ready(function () {
var clip = new ZeroClipboard.Client();
clip.setText(''); // will be set later on mouseDown
clip.addEventListener('mouseDown', function (client) {
// set text to copy here
clip.setText(jQuery('#texter').val());
// alert("mouse down");
});
clip.glue('copy-button');
});
</script>
</head>
<body>
<label onmouseover="myfunc2()">Click here</label>
<textarea name="texter" id="texter" style="display:none" class="hide" readonly>sdfdsfsdfgdfdfg</textarea>
<input type="button" value="Copy to clipboard" id="copy-button" />
</body>
</html>
html code :
<!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>
<script type="text/javascript" src="script.js">
</script>
</head>
<body bgcolor="#FFFFCC">
<center>
<form>
<select id="newLocation">
<option value="1.jpg">index</option>
<option value="script.js">posts</option>
<option value="2.jpg" selected="selected">blog</option>
</select>
</form>
javascript :
window.onload = startInit;
function startInit() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById("newLocation");// what does this statement return ?
var newPage = newLoc.options[newLoc.getSelectedIndex].value;
if(newPage != "")
window.location = newPage;
}
Why don't get to to new page i.e the value when i select an option from the combo box ?
Also what does document.getElementById("newLocation"); this statement (the first statement of the function jumpPage) return ?
You can try
var newPage = newLoc.options[newLoc.selectedIndex].value;
The statement
var newLoc = document.getElementById("newLocation");
just finds the DOM (HTML) element <... id="newLocation" ...>, i.e. your <select id="newLocation"> .
document.getElementById("newLocation") will return you the SELECT object (i.e., the reference to your drop-down).
Regarding the JS, it has an error. You should change newLoc.getSelectedIndex to newLoc.selectedIndex.