Setting button radio with JQuery mobile - javascript

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

not redirecting to other page using jQuery [duplicate]

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.

Checkbox with Bootstrap Toggle returns null if the input isn't checked

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>

Onchange event in a bootstrap checkbox

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")
}
}

Add/Remove values from checkbox

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>

Bootstrap typeahead does not work

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/

Categories