I have a (multiple) select in my JQM page.
I need to force option with value 'A' de-selection on any other option selection.
HTML is like this:
<select name="select-1" id="select-1" multiple="multiple" data-native-menu="false" />
<option value='A'>a</option>
<option value='B'>b</option>
<option value='C'>c</option>
</select>
I'm using some code like this, with no success... :-(
$("select#select-1").change(function() {
$("select#select-1").val('A').attr("selected", false).trigger("refresh");
});
It looks like the option I'm trying to de-select is selected, and all others are de-selected (excluded the current one) ... :-(
A jsfiddle is here.
I played around a little bit with your problem and assuming I did not misunderstand your problem (see comments), this snippets works (however probably there are simpler solutions...)
If option with value='B' is selected, then option with value='A' will be deselected.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>if B selected, deselect A</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- if B selected, deselect A -->
<div data-role="page">
<div data-role="content">
<select name="select-1" id="select-1" multiple="multiple" data-native-menu="false" />
<option id="option-A" value='A'>a</option>
<option id="option-B" value='B'>b</option>
<option id="option-C" value='C'>c</option>
</select>
</div><!-- /content -->
</div><!-- /page -->
<script>
$("#select-1").change(function() {
var mySelection = $(this).val();
if (mySelection !== null) {
if (mySelection.indexOf('B') >= 0) {
$("#option-A").attr("selected", false);
$('#select-1').selectmenu('refresh');
};
};
});
</script>
</body>
</html>
EDIT updated now with $('#select-1').selectmenu('refresh'); and it now also works in the jsfiddle
Related
I would like to show or hide elements of my kendo template based on whether or not a field in my model has changed or not.
First attempt:
<input type="text" data-bind="value: schedulerEventFieldOne"/>
<input type="text" data-bind="value: schedulerEventFieldTwo, visible: schedulerEventFieldOne.dirty"/>
Attempt two is to have a 'schedulerEventFieldOneOrigValue' field added to my model, then doing this:
<input type="text" data-bind="value: schedulerEventFieldOne"/>
<input type="text" data-bind="value: schedulerEventFieldTwo, visible: schedulerEventFieldOne != schedulerEventFieldOneOrigValue"/>
But this gives me an error stating that schedulerEventFieldOne is not defined. It seems that it doesn't like the equality test. Which is odd since, using a < o r > test seems to work fine: "visible: schedulerEventFieldOne > 0"
Is there a way to accomplish my task using the kendo binding? Or will I have to resort to jQuery again?
You do not state any concern, so why dont you do it on the view model with the second approach? It's possible to do this i believe :
$(document).ready(function() {
var vm = kendo.observable({
form: {
country: ""
},
original: {
country: ""
},
isDisabled: function() {
return this.get("form.country") != this.get("original.country");
},
save: function() {
}
})
kendo.bind($("#test"), vm);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="test">
<input type="text" data-bind="value: form.country" />
<button data-bind="click:save, visible:isDisabled">Save</button>
</div>
</body>
</html>
It seems select2.js 3.4.6 is broken in Firefox. First here is my setup:
VS2013 with a brand new empty asp.net website
Nuget select2 version 3.4.6 and put content\css in root of folder.
jquery 1.7.2.min.js (this I can't change)
I tried it with the latest version of jquery as well 2.1.3.min.js but it still not does not work.
Here is the guts of my default.aspx:
.....
<head runat="server">
<link href="select2.css" rel="stylesheet" />
<script src="scripts/jquery-1.7.2.min.js"></script>
<%--<script src="Scripts/jquery-2.1.3.min.js"></script>--%>
<script src="Scripts/select2.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="testddl" runat="server">
<asp:ListItem Text="SELECT 0" Value="0"></asp:ListItem>
<asp:ListItem Text="SELECT 1" Value="1"></asp:ListItem>
<asp:ListItem Text="SELECT 2" Value="2"></asp:ListItem>
<asp:ListItem Text="SELECT 3" Value="3"></asp:ListItem>
</asp:DropDownList>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#<%= testddl.ClientID %>').select2();
});
</script>
</body>
In IE and Chrome, you get what you expect when you click on the dropdown list you get the choice to either search or click an option.
In FireFox with jquery 1.7.2 nothing happens at all with no errors or anything.
With jquery 2.1.3 the click event registers and the search appears. In firebug console you get the error:
elem.dispatchEvent is not a function
Anyone else replicate this or shed some light on select2 and Firefox?
Kevin: here is the viewsource with jquery 1.7.2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><link href="select2.css" rel="stylesheet" />
<script src="jquery-1.7.2.min.js"></script>
<script src="Scripts/select2.js"></script>
<title>
</title></head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="rzorPxUMAwO3Ap172UChrRo4HUD4DtvNTx+VojgNlTE4Z1WmG3D212ozs0UVxLT8Q50uK2YscIaU24HMNCX6c5MQGDfn61HSvool3WGTuKU=" />
</div>
<select name="testddl" id="testddl">
<option value="0">SELECT 0</option>
<option value="1">SELECT 1</option>
<option value="2">SELECT 2</option>
<option value="3">SELECT 3</option>
</select>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="t9N12Ik6h7qTjLhTZkuIejUWEi90srmhi63V8Xxh5pkkbjq561Ko2F9PQuAmdKwKaoeu6f472sorebw82ieEjsj2IhbFITiMDWEoVejMoYSzIHNQlnDslXkhYImzMFQthR/syFIMC/KRkWmmML5c1zyVI+iICo/RNEMphVUXC8H2k7ppUV9WGf1v/Qtt4r5f" />
</div></form>
<script type="text/javascript">
$(document).ready(function () {
$('#testddl').select2();
});
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"b325ea7bc00946f380770a778efc9ccb"}
</script>
<script type="text/javascript" src="http://localhost:16589/250bbcfce1e348a18cc7ff513cc14ddf/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
UPDATE
This apparently is not a jquery or select2 issue. When I closed my firefox browser and re-opened it from scratch everything worked, BUT, when I hit F12 to open firebug the select2 dropdown stopped working! Even closing firebug does not re-enable the dropdown. I have to close all my FF browser sessions to get it working again.
UPDATE 2
This is directly related to the issue when FireQuery not Firebug is enabled noted here:
https://github.com/select2/select2/issues/2614
I'm using JQuery Mobile with a form that changes server side. I need to reload the page so the most recent form is included on the page. The form also needs validation.
I'm able to get the validation to work once but once until a submit. The page successfully is refreshed and the form appears but the validation is gone and if I submit, a standard submit is done instead of a changePage.
The on pageinit seems to be firing every time. I've been pulling my hair out on this one. It seems like this should be so simple.
<?php //
session_start();
if (isset($_SESSION['mytest']))
$_SESSION['mytest']++;
else
$_SESSION['mytest'] = 1;
$s = $_SESSION['mytest'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mytestout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> </script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
</head>
<body>
<div data-role="page" data-theme='b' id="testit" >
<div data-role="content" class="content" id="cart" style="margin-top: 25px; margin-left: 40px">
<p> counting session var = <?=$s?> </p>
<form id="myform">
<input type="text" name="myname">
<input type="submit">
</form>
</div>
</div>
<script>
function submitme(e) {
$.mobile.changePage( "#testit", { transition: "slideup", changeHash: false, reloadPage: true, allowSamePageTransition: true });
}
$(document).on('pageinit', function(){ //
$("#myform").validate( {
rules: {
myname: "required"
}
,submitHandler: function(e) { submitme(e);}
});
});
</script>
</body>
</html>
The problem here is the 'pageinit' event, which runs just once per page (its also deprecated). You'd have to use the pagecontainershow event, which runs each time the page is shown. That should initialize the form validation again, making it work for each time its rendered. Note that I haven't tested that solution, yet.
I'm working on a microsite for a client, and things are working almost fine, except when I tried viewing it on firefox, I was surprised by how mis-placed things looked like..even though I disabled horizontal scrolling, in firefox u could still do it ( dont see the horizontal scroll but if you scroll horizontally it shows), even the webfont is different, although the webfont displays perfectly on firefox in other pages..and the third problem is the page top-margin, in the page properties I specified the margin to be 0 and in safari it worked, but in firefox it doesn't. could anyone please tell me what to do..I only have a spry menu bar and easing (animate2id) plugin which could be causing the problem maybe? in Safari it looks the way I want it to look..thanks in advance..
maybe I should mention that I'm a novice and I know what I know by self-learning.
here's the code in case..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Annual Report 2012</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href="micro-site.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #39949C;
overflow-x: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<link href="muli-fontfacekit/stylesheet.css" rel="stylesheet" type="text/css" />
<body leftmargin="0" topmargin="0">
<div id="rotator-controls" class="panel span2">
<div id="rotator-slides">
<a class="" href="micro-site.html" onclick="Animate2id('.slide-content'); return false" title="Go to 1st content with the default easing">1</a>
<a class="" href="#slide-content2" onclick="Animate2id('#slide-content2','easeInOutExpo'); return false">2</a>
<a class="" href="#slide-content3" onclick="Animate2id('#slide-content3','easeInOutExpo'); return false">3</a>
<a class="" href="#slide-content4" onclick="Animate2id('#slide-content4','easeInOutExpo'); return false">4</a>
<a class="" href="#slide-content5" onclick="Animate2id('#slide-content5','easeInOutExpo'); return false">5</a>
</div>
<div id="rotator-nav">
‹
›
</div>
</div>
</div><!--end of header -->
</div><!--end of slide-container -->
</div><!--end of body -->
<div id="Sitemap"></div>
</div><!--end of container -->
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
function Animate2id(id,ease){ //the id to animate, the easing type
var animSpeed=2000; //set animation speed
var $container=$("#slide-container"); //define the container to move
if(ease){ //check if ease variable is set
var easeType=ease;
} else {
var easeType="easeOutQuart"; //set default easing type
}
//do the animation
$container.stop().animate({"left": -($(id).position().left)}, 2000, easeType);
}
</script>
Using Firefox 3.5.7
The following test page should behave like Opera, Safari and Chrome.
Key presses (arrows or 1-5) should have no effect (i.e. The events should be cancelled so that the number never changes from the initial default "3").
[I have separate working code for IE too].
Many thanks to anyone who can make it work?
<html>
<head>
<title>Test</title>
<script type='text/JavaScript'>
function stop(evt)
{evt.preventDefault();
evt.stopPropagation();
};
</script>
</head>
<body>
<select onkeydown='stop(event);' onkeypress='stop(event);'>
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
</select>
</body>
</html>
This works for me (looks pretty evil, I haven't found any other solution on FF so far):
<html>
<head>
<title>Test</title>
<script type='text/JavaScript'>
function stop(evt) {
evt.preventDefault();
var elem = document.getElementById('mysel');
elem.blur();
setTimeout('refocus()', 0);
};
function refocus() {
document.getElementById('mysel').focus();
}
</script>
</head>
<body>
<select id="mysel" onkeydown="stop(event);">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
</select>
</body>
#icktofay: This is a simplified test page demonstrating the problem. What I am actually doing in the main code is replacing the select-box's intrinsic keystroke handling with explicit actions.
#boxofrats: Yes, that is evil... but effective. Thanks.