There is a version problem of library and JQuery mobile UI
I want to add a value to a radio button group by a click button.
Took the test at : http://jsfiddle.net/BUBtL/4/
Thanks in advance
<link rel="stylesheet" href="themes/theme-brixky.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<fieldset data-role="controlgroup" id="field_radio_amis">
<legend></legend>
<label for="cat">Cat</label>
<input type="radio" name="radio_animal" id="cat" class="custom" value="cat" />
<label for="dog">Dog</label>
<input type="radio" name="radio_animal" id="dog" class="custom" value="dog" />
</fieldset>
<input type="button" name="btn_go" id="btn_go" value="Click to set button radio" />
</div>
$(document).ready(function () {
$("#btn_go").click(function () {
$('input:radio[name="radio_animal"]').filter('[value="cat"]').attr('checked', true);
});
return false;
});
This is a compatibility issue, you're using the wrong versions combination.
You need jQuery Mobile 1.4.0 and it's corresponding CSS file to work with jQuery 1.10.1
Change .attr to .prop
$('input:radio[name="radio_animal"]').filter('[value="cat"]').prop('checked', true);
Check jsfiddle
oups !
See my combinaison :
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
Related
This question already has answers here:
How do I redirect to another webpage?
(58 answers)
Closed 1 year ago.
I'm quite new to jQuery and html, looked through google and these forums to no avail.
This is my HTML Code
<html>
<head>
<link rel="stylesheet" href="reset.css" type="text/css">
<link rel="stylesheet" href="index.css" type="text/css">
<script src="./jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<form id="form">
<h1>Koks yra leistingas greitis miesto ribose?</h1>
<input type="radio", id="ats1", name="atsakymas", value="1" ></input>
<label for="ats1"> a</label>
<br>
<input type="radio", id="ats2", name="atsakymas", value="2" ></input>
<label for="ats2"> b</label>
<br>
<input type="radio", id="ats3", name="atsakymas", value="3" ></input>
<label for="ats3"> c</label>
<br>
<button id="Rinktis" type="submit">Rinktis</button>
<button id="close">IĊĦeiti</button>
</form>
</div>
<script src="./index.js" type="text/javascript"></script>
</body>
And this is my jQuery line that I think should redirect me to another page
$("#Rinktis").click(function (){
document.location.href = "http://google.com";
return;
})
but it is doing nothing, am I doing something wrong?
Your code (in JS) should be:
$("#Rinktis").click(function (e) {
e.preventDefault();
window.location.href = "http://www.google.com";
})
The return statement there is unnecesary. The e parameter in the click function represents the Event object. Since you're overriding the form's submit action (not sure why), you need that first line to stop the default action.
I am using Bootstrap Toggle for checkboxes and I have this:
<input type="checkbox" name="hasLabel" data-on="With Label" data-off="Without Label" data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
The problem is that if the input is checked the request.getParameter("hasLabel") returns on, and if it isn't returns null
How can I define that if the checkbox is not checked to return off, false or sth else?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet" />
<input type="checkbox" name="hasLabel" data-on="With Label" data-off="Without Label" data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
use this script to do something before submit form:
<script>
$("form").submit(function(){
if (!$('#my-input').prop('checked')) {
$('#my-input').bootstrapToggle('on')
$('#my-input').val('off')
}
});
</script>
I am trying to intercept and handle changes in a bootstrap checkbox and I have added an 'onchange' event. Unfortunately, I was not successful. Currently, I have a button which can change the state of the checkbox and this is working.
Any hint would be much appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Toggle</title>
<link href="./css/github.min.css" rel="stylesheet">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="./css/bootstrap-toggle.css" rel="stylesheet">
<link href="./css/stylesheet.css" rel="stylesheet">
<script src="./js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap-toggle.js"></script>
</head>
<body>
<div id="events" class="container">
<h3>API vs Input</h3>
<p>This also means that using the API or Input to trigger events will work both ways.</p>
<div class="example">
<input id="chk1" type="checkbox" data-toggle="toggle" onchange="fonctionTest()">
<input id="chk2" type="checkbox" data-toggle="toggle">
<input id="chk3" type="checkbox" data-toggle="toggle">
<input id="chk4" type="checkbox" data-toggle="toggle">
<button class="btn btn-success" onclick="toggleOnOff('#chk1','on')">On by API</button>
<button class="btn btn-danger" onclick="toggleOnOff('#chk1','off')">Off by API</button>
<div id="console-event"></div>
<script>
$(function() {
$('input:checkbox').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
<script>
function fonctionTest(){
console.log("This is a test");
}
function toggleOnOff(selector,state){
console.log("element : " + selector);
console.log($(selector).prop('checked'));
$(selector).bootstrapToggle(state);
}
function toggleOn() {
$('#chk1').bootstrapToggle('on');
isOnOrOff();
}
function toggleOff() {
$('#chk1').bootstrapToggle('off');
isOnOrOff();
}
function isOnOrOff(){
var c=document.getElementById('chk1');
console.log(c.checked);
}
</script>
</div>
</body>
</html>
The documentation says to use jQuery change.
Demo:
$('#chk1').change(function() {
alert($(this).prop('checked'))
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input id="chk1" type="checkbox" checked data-toggle="toggle">
Its working for all the checkboxes as shown in the examples below:
$('input:checkbox').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'));
console.log("Change event: " + this.id);
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input id="chk1" type="checkbox" data-toggle="toggle">
<input id="chk2" type="checkbox" data-toggle="toggle">
<input id="chk3" type="checkbox" data-toggle="toggle">
<input id="chk4" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
EDIT:
Add the code like:
<script>
$(function() {
$('input:checkbox').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
<input id="chk1" type="checkbox" data-toggle="toggle" onclick="fonctionTest()">
function fonctionTest(){
if (document.getElementById('chk1').checked)
{
alert("Checked")
} else
{
alert("Not Checked")
}
}
So I check normalize to add normalize library...
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
I check jQuery and I add the jQuery source after normalize...
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
but if I uncheck normalize, I want it to remove the normalize link, and if I check it again I want to add normalize after jQuery...
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
That's what's suppose to happen but instead when I add say AngularJS, and then normalize, it's suppose to show like this...
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
but instead I get....
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />
So basically what I check I want that library to add after the other libraries I check.
My jQuery is...
// Add/Remove Library from Checkbox
$(".check").on("change", function() {
// Join All Checked Libraries
$(".full-library-code").val(function() {
return $.map($(".check:checked").next().next(), function (el) {
return el.value;
}).join('\n');
});
});
I believe this can happen without Codemirror, and I believe this problem is happening because of how I have my html structured with my jQuery, but I have no idea how to solve it.
$(document).ready(function() {
// Add/Remove Library from Checkbox
$(".check").on("change", function() {
// Join All Checked Libraries
$(".full-library-code").val(function() {
return $.map($(".check:checked").next().next(), function (el) {
return el.value;
}).join('\n');
});
});
});
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<input type="checkbox" class="check" id="norm"> <label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /><br>
<input type="checkbox" class="check" id="jquery"> <label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /><br>
<input type="checkbox" class="check" id="ang"> <label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /><br>
<textarea class="full-library-code" placeholder="full library's code"></textarea>
Instead of looping all the checkboxes every time you should look if the clicked checkbox is 'checked' or 'unchecked'. Based on that, add or remove the text.
$(document).ready(function() {
$(".check").on("change", function() {
var textarea = $('.full-library-code');
var value = $(this).nextAll('input:first').val() + '\n';
if( $(this).prop('checked') == true )
textarea.val( textarea.val() + value );
else
textarea.val( textarea.val().replace( value, "") );
});
});
/* only for demo readability */
textarea { width: 500px; height: 200px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" id="norm" /> <label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' /><br />
<input type="checkbox" class="check" id="jquery" /> <label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' /><br />
<input type="checkbox" class="check" id="ang" /> <label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' /><br />
<textarea class="full-library-code" placeholder="full library's code"></textarea>
Note: please mind A. Wolff's comment, you probably want to add AngularJS as a script... also, in the values I replaced the < and > for < and >
If you're getting the element in reverse order, simply use the reverse() method before the join(), like so:
// Join All Checked Libraries
$(".full-library-code").val(function() {
return $.map($(".check:checked").next().next(), function (el) {
return el.value;
}).reverse().join('\n');
});
What I understand from your question is that you want the later checked libraries to appear later in the textarea. Here is how you can do that
$(".check").on("change", function() {
var $textArea = $(".full-library-code");
var fullLibraryCode = $textArea.val();
var thisValue = $(this).next().next().val() + "\n";
if (this.checked) {
$textArea.val(fullLibraryCode + thisValue);
} else {
$textArea.val(fullLibraryCode.replace(thisValue, ""));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" id="norm">
<label for="norm">Normalize</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />' />
<br>
<input type="checkbox" class="check" id="jquery">
<label for="jquery">JQuery</label>
<input type="text" class="hide" value='<script src="http://code.jquery.com/jquery-latest.min.js"></script>' />
<br>
<input type="checkbox" class="check" id="ang">
<label for="ang">Angular JS</label>
<input type="text" class="hide" value='<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" />' />
<br>
<textarea class="full-library-code" placeholder="full library's code"></textarea>
I have included this:
<link rel="stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="/js/bootstrap3-typeahead.js"></script>
then there is input:
<input type="text" name="name" autocomplete="off" class="typeahead" data-provide="typeahead"
data-items="4" data-source="['aaa','bbb','ccc']" placeholder="Find customer" />
Nothing happens. No error, no suggested items. Why is that? How could I fix it?
I downloaded bootstrap3-typeahead.js form there: https://github.com/bassjobsen/Bootstrap-3-Typeahead
Use jQuery "autocomplete" instead: http://jqueryui.com/autocomplete/