This seems like it would have a really obvious answer, however I cannot get a simple checkbox to uncheck with JQuery once I add Jquery Mobile.
Here is some very simple code as an illustration:
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
jQuery(function () {
jQuery('#a').change(function () {
if (jQuery(this).is(':checked')) {
jQuery('#b').removeAttr('checked');
}
});
jQuery('#b').change(function () {
if (jQuery(this).is(':checked')) {
jQuery('#a').removeAttr('checked');
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="a"><label for="a">AAAA</label>
<input type="checkbox" id="b"><label for="b">BBBB</label>
</body>
</html>
This is a simple bit of code. When Checkbox 'A' gets checked, it should uncheck checkbox 'B', and vise verse. However it doesn't, and no error is written to the console.
This is using the standard version of Jquery & Jquery Mobile, linked directly to their site
If I remove the Jquery Mobile elements, by removing the following lines, then it works fine
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
Can anyone please enlighten me as to where I am going wrong, since this seems so simple yet I'm at an absolute loss as to what is going on.
Many thanks
Because you need to use .prop and then re-apply styles using .checkboxradio('refresh').
Check
$('selector').prop('checked', true).checkboxradio('refresh');
Uncheck
$('selector').prop('checked', false).checkboxradio('refresh');
Related
AdminLte select2 not working means not showing search in select box, i have included css and js file and used like below and also i have included bootstrap related css and js files
<html>
<head>
<link rel="stylesheet" href="bower_components/select2/dist/css/select2.min.css">
</head>
<body>
<select class="form-control select2" style="width: 100%;" ng-options="t.id as t.name for t in tags" ng-model="t_id">
<option selected="selected">Select Tag</option>
</select>
<script src="bower_components/select2/dist/js/select2.full.min.js"></script>
<script>
$(function () {
//Initialize Select2 Elements
$('select2').select2();
});
</script>
</body>
</html>
It will work
$('.select2').select2();
you may need to load Ajax.googleapis cdn from google. My problem was like as yours.I have faced the problem and solved it. Main problem was select2 doesn't get ajax.googleapis cdn. So, before the jQuery code I have loaded the cdn and it works fine now. You mush notify the version of your cdn. Firstly, the code was
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
The problem is looked like the picture below
Now after solving the problem the code looks like below
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
Now it is seen like below
It works at first open of the page but when i navigate to other pages that uses also the datepicker. It no longer works. Did i missed something in my code? Please see below. Thank you so much.
<link href="css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$('#btnDfrom').focus(function () {
$(this).datepicker();
});
$('#btnDto').focus(function () {
$(this).datepicker();
});
</script>
<span id="filtertxt">Date From: </span>
<input type="text" id="btnDfrom" />
<span id="filtertxt">Date To: </span>
<input type="text" id="btnDto" />
This one does not work also
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
Jquery UI datepicker isn't intended to be called multiple times on the same element, which is what would happen if you call it on a focus event.
All you need to do is call it once on the target element, like so:
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
The datepicker plugin will take care of handling clicks and focus events on the elements by itself, you don't need to.
EDIT: You should also check that you are both including the script files, css files and this code on each page where you use the datepicker (but make sure it's only included once!)
your code is looking cool
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
check your code I think may be jquery is Conflicting somewhere in your pages.
The databox plugin works well in a static jQuery Mobile html page. The scripts defined in header are:
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
The line for the datebox input is:
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "flipbox","useFocus": true}'>
However, once I dynamically inject some other elements into the same page, like
$(document).bind("pagebeforechange", function route(e, data) {
...
$page.trigger('create');
...
As a result, I can see all elements are displayed well, including the datebox button. But clicks on the datebox button would not pop up anything.
I compare the two versions of html codes after enhancement. I found the dynamic one misses the following, which corresponds to the date dialog pop-up:
<div class="ui-datebox-container ui-overlay-shadow ui-corner-all ui-datebox-hidden pop ui-body-b"
...
Why did the dynamic way miss to generate the codes above? How can I correct?
I found a solution myself. It is to change
$page.trigger('create');
to
$page.page();
But I have no idea why and the fundamental difference of these two. Help please!
I'm trying to use JQueryMobile for an POC and it seems even though I use #using (Html.BeginForm()) instead of #using (Ajax.BeginForm()), ajax is enabled by default. It is being injected from one of the script files [ ~/Scripts/jquery.mobile-1.0a2.js ].
So what I want is to simply disable the Ajax for certain forms and do full form posts. This might be pretty abvious, but i simply cant get my head around it.
Any help is appreciated.
/BB
You have to set up the jquery mobile framework correctly to disable its auto - ajax
Here it's documented:
http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
You could do something like this.
<html lang="en-us">
<head>
<title>#ViewBag.Title</title>
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.min.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxFormsEnabled = #ViewBag.EnableAjax;
});
</script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="header">
<h1>#ViewBag.HeaderString</h1>
</div>
<div data-role="content">
#RenderBody()
</div>
<div data-role="footer">
<h1>HTDE</h1>
</div>
</div>
</body>
</html>
Just add the following line to your page, obviously you have too add this under the document.Ready() function:
$.mobile.ajaxEnabled = false;
Note: If you are using Jquery Mobile beta, the configuration parameter for disabling ajax has changed.
http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/
"Use ajaxEnabled to globally set auto-ajax handling."
Here's a link to the documentation for beta configs:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/globalconfig.html
It took me way to long to figure this one out.
there is an easier way.. just figured it out from JqueryMobile documentation
http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
all you have to do is,
ajaxFormsEnabled :false
I must be missing something very basic in the CSS. My jQuery anchor button is functional, but it's rendering as a simple underlined label, not asa rounded-corner UI button. I would be grateful if someone could point out the error in this simple example.
Thanks
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML LANG="en-US">
<HEAD>
<TITLE>button test</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Expires" content="Sat, 22 May 2010 00:00:11 GMT">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(
function() {
$('a','.test').click(function(){showIntro();return false;});
});
function showIntro()
{
document.location.href="intro.htm";
}
</script>
<body>
<div class='test'>Button</div>
</body>
</html>
You need to actually make it a button using .button(), like this:
$(function() {
$(".test a").button();
});
You can see the jQuery UI demos here and a demo of your markup working here.
You need to add the proper class to the link, using jQuery or otherwise.
Try:
Button
You do not need to make it a button you just need
$(".test a").click(function(){showIntro();return false;});
What you are trying to do with your selector passing the second paramater is the Scope.
The second paramater is not mean to be a string (selector) it should be a jQuery Object.
So if you wanted to do it your way your would have to say
var test = $('.test');
$('a',test).click...
But the 1st method is prefered over doing it this way.
Sorry to be providing an answer, if not "the" answer, to my own question, but I have discovered a clue as to what's going on, if not the ultimate cause of the behavior. Below is code cut and pasted from the Button example on the jQuery website; take it to jsFiddle and run it: it works. But if you remove this line relating to the input-button:
$("button, input:submit, a", ".demo").button();
then the anchor-button fails to render properly. Why is the anchor-element's rendering dependent on the existence of the input-button?
<script type="text/javascript">
$(function() {
$("button, input:submit, a", ".demo").button();
$("a", ".demo").click(function() { return false; });
});
</script>
<style>
</style>
<div class="demo">
<button>A button element</button>
<input type="submit" value="A submit button">
An anchor
</div><!-- End demo -->