I have the following JavaScript code:
<script type="text/javascript"><!--
$(function () {
$('#add').click(function() {
$(this).before($('select:eq(0)').clone());
if ($('select').length > 5) $(this).hide();
});
});
//-->
</script>
Here is the HTML code:
<select name="dropdown">
<option value="a">Apple</option>
<option value="b">Bee</option>
<option value="c">Cat</option>
<option value="d">Donkey</option>
<option value="e">Elephant</option>
</select>
Add
In the jsfiddle demo its working fine, but its not working on my gsp. Any idea or I am missing out something? Whenever I click on the "Add" it just display /# on my url.
The error message I managed to figure out through inspecting the element is as follows:
Uncaught SyntaxError: Unexpected token ILLEGAL
Screenshot
There are probably some illegal characters in the <script> block.
Did you copy/paste it from somewhere else? I would suggest you put cursor at the start and end of each line and delete all characters till you are sure there are no non-visible characters.
Alternatively delete the whole script block and retype it manually
Try uncommented version (w/o <!-- and //-->):
<script type="text/javascript">
$(function () {
$('#add').click(function() {
$(this).before($('select:eq(0)').clone());
if ($('select').length > 5) $(this).hide();
});
});
</script>
You can probably avoid issues like this if you just put the JavaScript in an external file.
Related
I'm hoping this is a stupid question with an easy answer.
(I've googled for a day and a half without joy)
I am writing a casperjs script which changes a pulldown menu
I've dumbed down the test code to get to the crux of the problem
My test HTML is as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body style="background-color:powderblue;">
<form>
<select id="down">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
A working Casperjs script using jquery:
casper.start("http://192.168.0.14/test.html", function(){
//change the pulldown selection
casper.then(function () {
this.evaluate(function(){
$('#down').val('vw').change();
});
});
casper.then(function(){
this.capture("screen.png");
});
});
casper.run();
Now I want to parameterise the code, and use variables instead of strings for the selector and the value. But this code does not work:
var x1='#down';
var y1='vw';
casper.start("http://192.168.0.14/test.html", function(){
//change the pulldown selection
casper.then(function () {
this.evaluate(function(){
$(x1).val(y1).change();
});
});
casper.then(function(){
this.capture("screen.png");
});
});
casper.run();
This shouldn't be difficult (and probably isn't) but all combinations of "window." or square bracket notations have failed me.
jquery is refusing to play nice.
Please help, I didn't think this would put me out of my depth, but it clearly has
Try this:-
this.evaluate(function(x1, y1){
$(x1).val(y1).change();
}, x1, y1);
Anything inside evaluate is sandboxed and you will need to pass in any params you want to use inside
I have a html <select> tag with some <option>s. Something like this:
<select id="season">
<option value="">Select an option</option>
<option value="1">Spring</option>
<option value="2">Summer</option>
<option value="3">Autumn</option>
<option value="4">Winter</option>
</select>
And I have this javascript code:
<script>
$(document).ready(function(){
$("#season").val("1");
});
</script>
This does not select "Spring" option and remain in "Select an option" option! But when I use
$(document).ready(function(){
setTimeout(function(){
$("#season").val("1");
}, 100)
});
This works correct! What is the problem? Any help would be greatly appreciate.
Try This
<script>
$(document).ready(function(){
$("option[value='1']").attr('selected','selected');
});
</script>
Above mention code will work.
even below mention your code will work, but script section should below all the HTML code and before the body close tag. Because once jQuery or javaScript start executing at that time HTML DOM will available and script can able to select that DOM.
<script>
$("#season").val("1");
</script>
In your code once you add setTimeout and your script is able to select the option because you are delaying by 100 micro second, it means before executing your script HTML DOM are available that is why you are able to select the DOM
<script>
setTimeout(function(){
$("#season").val("1");
}, 100)
</script>
on page load is called after all resources is loaded whereas jquery ready is called when dom is loaded so basically ready gets called before on-load. Hence it does not work
This question already has an answer here:
Setting up the jQuery Mobile script
(1 answer)
Closed 8 years ago.
I created a Flip toggle Switch with:
<select id="flip1" data-role="flipswitch">
<option value="true">true</option>
<option value="false">false</option>
</select>
my script code looks like this:
<script>
$( "#flip1").change(function(){
alert("flip");
});
</script>
but if I change the Button, nothing happened. Maybe someone can help me. Thank you
Try this:
with ready function
http://jsfiddle.net/z5stP/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "#flip1").change(function(){
alert("flip");
});
});
</script>
Open your Browser Console (F12) to see the errors on your Page.
Your code works but maybe your jQuery library could not found.
[https://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers][1]
try using below code
<select id="flip1" data-role="flipswitch">
<option value="true">true</option>
<option value="false">false</option>
</select>
<script>
$("document").ready(function()
{
$( "#flip1").change(function(){
alert("flip");
});
});
</script>
Note: Always call ur script after dom is loaded. Enclosing user script inside $(document).ready() function ensures ur script to called after dom element is loaded
I'm working on a project that uses bootstrap. In the project, some additional functionality was needed so that when a user selects a certain option from the drop down it hid/showed certain content. It look as follows:
<select class="form-control" id="state-text" onChange="test()" name="selected-state" >
<!-- Select options here -->
</select>
Then I had the JS as follows:
function test()
{
// Code here
}
Now this didn't work, and would throw an error that function test was not defined. However, when I repalced it with:
test = function test()
{
//Code here
}
it worked as intended. I don't understand why one worked and the other didn't? Does it maybe have something to do with the other JS files that the bootstrap file is importing?
As you tagged the question as jQuery here's a fiddle I made quickly
http://jsfiddle.net/nYmF8/
markup
<select class="form-control" id="state-text" name="selected-state" >
<option value="a">A</option>
<option value="b">B</option>
<option value="b">C</option>
</select>
jquery
$(function(){$('#state-text').on('change', function () {
alert('changed value to to '+$(this).val());
});});
maybe you forgot to put your jQuery in the document ready function?
try to avoid adding JS in the middle of your HTML. Try doing that instead:
$(document).ready(function() {
$('#state-text').on('change', function () {
//Code Here
});
});
I am assuming here that you are using jQuery since it's a requirement for bootstrap. If not, let me know.
I have a JavaScript function:
function redirect(location) {
window.location.href=location;
}
Which I'm using like so:
<select onChange="redirect(this.options[this.selectedIndex].value)">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
I'm expecting for it to redirect to the selected option value, but does'nt seem to do anything? - bare in mind im new to JavaScript.
Hope someone can help! :)
Try this:
<select onChange="redirect(this.value)">
try this
<script>
function redirect() {
var location=document.getElementById("i").value;
window.location.href=location;
}
</script>
<select onChange="redirect()" id="i">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
Your code itself is functional (i tried).
Where have you placed the function definition?
Is there any other javascript code on the page?
In which browser are you testing this?
If you're running it in Firefox check the error console (Tools->error console).
I also noticed that Internet Explorer 8 blocks this javascript, I haD to check allow blocked content for this to work.
can be because location is a short way to call window.location, so just rename your input parameter - _location, newLocation, loc, whatever else.
UPDATE
Nope, this should work. Having only
<select onChange="redirect(this.options[this.selectedIndex].value)">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
<script type="text/javascript">
function redirect(location) {
window.location.href=location;
}
</script>
on the page gave me the desired result, so the error may be somewhere around - just give us more code!