Hi Im using jquery ui toggleswitch
toggleswitch.js I can get on off value but
how can i set on /off value programmatically in javascript or jquery
i'm using this code on change but i want to set it on document ready
$('.toggleEmailStatus').toggleSwitch().change(function (ev) {
alert(ev);
try {
console.log("value= " + $(this).val());
} catch (e) {
alert(e);
}
});
You can programmatically turn it on or off by triggering a click on the respective checkbox:
jQuery(document).ready(function($) {
$('.toggleswitch').toggleSwitch();
$("#opt2").trigger("click"); // turn it on
});
<link href="https://raw.githack.com/jamiebicknell/Toggle-Switch/master/toggleswitch.css" rel="stylesheet" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
<script type='text/javascript' src='https://raw.githack.com/jamiebicknell/Toggle-Switch/master/jquery.toggleswitch.js'></script>
<label for='opt1'>Option 1</label>
<input type='checkbox' name='opt1' id='opt1' value='1' class='toggleswitch' checked='checked' />
<!-- Switch is OFF -->
<label for='opt2'>Option 2 (off by default)</label>
<input type='checkbox' name='opt2' id='opt2' value='1' class='toggleswitch' />
Related
I am working on MVC 5, there is have
#Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "Select", new { #id = "DDLServiceCate", #class = "form-control " })
I want to do bootstrap multiselect dropdown with checkbox. For, I have tried:
<script src="~/Scripts/bootstrap-multiselect.js"></script>
<link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$('[id*=DDLServiceCate]').multiselect({
includeSelectAllOption: true
});
});
</script>
But after implementing this, look like below image.
But actually I want look like below image showing.
How can I do this ?
You can use this plugin.
Multiple Select (MultiSelect)
This is the working fiddle.
Here is a working sample
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#lstFruits').multiselect({
includeSelectAllOption: true
});
$('#btnSelected').click(function () {
var selected = $("#lstFruits option:selected");
var message = "";
selected.each(function () {
message += $(this).text() + " " + $(this).val() + "\n";
});
alert(message);
});
});
</script>
<body>
<select id="lstFruits" multiple="multiple">
<option value="1">Mango</option>
<option value="2">Apple</option>
<option value="3">Banana</option>
<option value="4">Guava</option>
<option value="5">Orange</option>
</select>
<input type="button" id="btnSelected" value="Get Selected" />
</body>
</html>
I have done,
<script src="~/Scripts/bootstrap-multiselect.js"></script>
<link href="~/css/bootstrap-multiselect.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$('[id*=DDLServiceCate]').multiselect({
includeSelectAllOption: true, buttonWidth: '200px'
});
});
</script>
And Inside drowpdown I have added '#multiple = "multiple"'
#Html.DropDownListFor(model => model.ShowAdConfigIDs, ViewData["Services"] as List<SelectListItem>, "None selected ", new { #id = "DDLServiceCate", #class = "form-control", #multiple = "multiple" })
Now showing checkboxes inside drowpdownlistfor.
I have found this JSFiddle that clear text from input? http://jsfiddle.net/xavi3r/D3prt/
How do I use this for Html.TextBox in razor View in MVC and then refresh page?
So far my solution is this (it works):
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(function () {
//this part clean text from textboxes
$('#button').click(function () {
$(':input', '#form')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
});
//this part submit my search button - it is like refresh button, returns state as it was in begin - this is the same as I click on search without entering parameters
$('#button').click(function () {
document.myForm.onSubmit.click();
});
});
</script>
using (Html.BeginForm("Index", "LoginUser", FormMethod.Get, new { id = "form", name = "myForm"}))
{
<div class="form-group">
#Html.TextBox("order", Model.Search.Order, new { placeholder="Luška št.", id ="quantity1", #class="quantity form-control"})
<button type="submit" class="btn btn-primary" name="onSubmit">Search</button>
<input type="button" class="btn btn-primary" value="Clear" id="button" />
</div>
}
In _Layout:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="~/scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
Realy thanks for help...
Your view will be rendered like this as html:
<div class="form-group">
<input type="text" name="order" id="quantity1" placeholder="Luška št." class="quantity form-control" value="SomeValue" />
<input type="button" />
</div>
and you can do it with this code:
$(function () {
$('.form-group input:button').click(function () {
$('input#quantity1').val('');
});
});
I am using jquerymobile 1.4.2.This the code which i am using in my page
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script>
</head>
<body>
<script>
function myFunction()
{
document.getElementById("myText").disabled=true;
}
</script>
<p>Click the button to disable the text field.</p>
<select onchange="myFunction()"><option>1</option><option>2</option></select>
First Name: <input type="text" id="myText">
</body>
</html>
The above program works fine But if i change that to this code
<script>
function myFunction()
{
document.getElementById("myText").disabled=false;
}
</script>
<p>Click the button to disable the text field.</p>
<select onchange="myFunction()"><option>1</option><option>2</option></select>
First Name: <input type="text" id="myText" disabled="disabled">
Then its not working please help me how to make text field enable using onchange() function
jQM enhances the input and creates a Textinput widget which has its own enable/disable methods (http://api.jquerymobile.com/textinput/#method-disable)
In your example, to enable the input:
function myFunction() {
$("#myText").textinput("enable");
}
Also, you should use unobtrusive javascript and the jQM page functions. e.g. remove the onclick from the markup:
<select id="theSelect" >
<option>1</option>
<option>2</option>
</select>First Name:
<input type="text" id="myText" disabled="disabled" />
Add the handler in the pagecreate jQM event:
function myFunction(selVal) {
if (selVal == '2'){
$("#myText").textinput("enable");
} else {
$("#myText").textinput("disable");
}
}
$(document).on("pagecreate", "#page1", function () {
$("#theSelect").on("change", function(){
var v = $(this).val();
myFunction(v);
});
});
Here is a DEMO
I tried many ways of using my app as a jquerymobile but didn't succeed.
I know I have to use pageinit instead of document ready. Can you please show me the right way to do it. When I add it, it just simply not working. Here is code
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0, 1);
}
</script>
<script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js"></script>
<script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
try {
$(function() {});
} catch (error) {
console.error("Your javascript has an error: " + error);
}
</script>
<script>
$(document).ready(function() {
$("form").change(function() {
$.post("test2.php",
$("#myform").serialize());
});
});
</script>
</head>
<body>
<div id="my-page" data-role="page">
<form name="myform" id="myform" method="get">
<label for="DogalGaz">Doğal Gaz</label>
<select name="DogalGaz" id="DogalGaz" data-theme="" data-role="slider">
<option value="">Seçiniz</option>
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div>
What i did was, just simply send the form data to test2.php file and process. Thank you for any help
The Flip Toggle Switch should have 2 options instead of 3.
Try this:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0, 1);
}
</script>
<script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js"></script>
<script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageinit', function() {
$("#myform").change(function() { // use #myform instead of form to only serialize one form.
$.post("test2.php",
$("#myform").serialize());
});
});
</script>
</head>
<body>
<div id="my-page" data-role="page">
<!-- include action and method in case javascript handler fails -->
<form name="myform" id="myform" action="test2.php" method="post">
<label for="DogalGaz">Doğal Gaz. Seçiniz: </label>
<select name="DogalGaz" id="DogalGaz" data-theme="" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div>
</body>
</html>
This will post to test2.php every time you switch the toggle.
I am trying to attach onBlur and onFocus handler to a SSN input field. However, I am seeing an error saying object has no method 'ON'. The code is at http://jsfiddle.net/H4Q5f/
As you can see, I commented out to figure out the details, however had no luck so far. Any help is appreciated. For convenience, here is the code:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="../../appjavascript/ssa/mkwr/mytest.js"></script>
</head>
<body>
<div data-role="page" id="MyTestPage">
<div data-role="header" data-position="fixed" data-logo="true" data-tap-toggle="false" data-fullscreen="false" >
<h1> Page Title </h1>
</div>
<div data-role="content">
<div class="content-primary divcontent">
<h1 class='h1title'>Using This App</h1>
<p> Here are the instructions </a>
</p>
</div>
<div class="inputdata">
<br /> <br />
<input type="text" name="accessCode" id="AccessCode" value="" placeholder="Access Code:" /> <br />
<input type="text" id="ssn1" class="ssn" value="" placeholder="SSN1:" /> <br />
<input type="text" id="ssn2" class="ssn" value="" placeholder="SSN2:" /> <br />
</div>
<input type="button" id="myalert" value="Next" />
</div>
<!-- /content -->
</body>
</html>
And here is the java script
if (typeof TEST == "undefined" || !TEST) {
var TEST = {};
}
( function() {
TEST.mkwr = {
init : function() { // this is a public function
$("[data-role='page']").on("pagebeforeshow", TEST.mkwr.hideError());
$("[data-role='page']").on("pageshow", TEST.mkwr.setHandlers());
},
// On Blur, we need to add the '-'s if they doesn't exist so the user
// view edit the entered value formatted
ssnOnBlurHandler : function(input) { // Auto format SSN on blur
if ($(input).val().length == 9) {
var _ssn = $(input).val();
var _ssnSegmentA = _ssn.substring(0, 3);
var _ssnSegmentB = _ssn.substring(3, 5);
var _ssnSegmentC = _ssn.substring(5, 9);
$(input).val(
_ssnSegmentA + "-" + _ssnSegmentB + "-" + _ssnSegmentC);
}
}, // _ssnOnBlurHandler
// On focus, we need to remove the '-'s if they exist so the user
// can edit the entered value
ssnOnFocusHandler : function(input) {
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
if ($(input).val().length == 11) {
var _ssn = $(input).val();
var _ssnSegmentA = _ssn.substring(0, 3);
var _ssnSegmentB = _ssn.substring(4, 6);
var _ssnSegmentC = _ssn.substring(7, 11);
$(input).val(_ssnSegmentA + _ssnSegmentB + _ssnSegmentC);
}
}, // _ssnOnFocusHandler
// Hide all errors
hideError : function() {
$(".error").hide(); // Hide all errors
},
setHandlers : function() {
alert("Set Handlers");
// $(".ssn").each( function() {
// var input = this; input.blur(TEST.mkwr.ssnOnBlurHandler(input))
// });
// $(".ssn").each( function() {
// var input = this; input.focus(TEST.mkwr.ssnOnFocusHandler(input))
// });
}
};
})(); // end the anonymous function
$("[data-role='page']").bind("pageinit", TEST.mkwr.init());
I found a couple of issues with the code on the jsfiddle. Here is an updated one that is working to fire handlers and parse code. It looks like your ssn logic might need to be fixed a little but everything is getting you to there.
http://jsfiddle.net/H4Q5f/10/
The problems I saw were partly what was mentioned before you were using .on instead of .bind given the jquery version. But also you were not setting your handlers but rather firing your handlers. You had this:
input.bind("blur",TEST.mkwr.ssnOnBlurHandler(input))
which would return the result of the function to the set method which is not what you were looking for. So I changed it to this:
input.bind("blur",TEST.mkwr.ssnOnBlurHandler)
So now you are passing the handler to the set method so that it will fire when the event takes place.
Hope this makes sense.
The .on() function was introduced in jQuery 1.7. The code you've posted above includes jQuery 1.6.4 (<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>), which doesn't have that function. You can either upgrade to the latest version of jQuery (recommended) or use the equivalent function - .bind() - for the older versions.