Changing toggle switch from On to Off or Off to On using if else

Question

I am working on asp.net MVC 5. I have placed a bootstrap toggle switch button having input type checkbox

Bellow is the image of my toggle switch

From my query i am getting a command name cmd_Name in which there is On or Off value in it and based of this value i just want to change the toggle switch from On-Off or from Off-On

Bellow is my razor syntax for toggle

@using (Html.BeginForm())
{
//var cmd_Name = Session["cmd_Name"];
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset style="height:60px">
    <legend style="text-align:center;  font-size:large; font-family:'Times New Roman'; background-color:#C8E6C9; color:red">Remote On/Off</legend>
    <input id="test_id" name="cmdName" type="checkbox" checked data-toggle="toggle">

</fieldset>}

Bellow is my script for toggle

<script type="text/javascript">
var search = '@Session["search"]';
var cmd_Name = '@Session["cmd_Name"]';
var data = {}
//alert(cmd_Name);
$(window).on('load', function () {

    // here cmd_Name i having On or Off value 

    // i want to put a check like bellow

    if(cmd_Name == "On")
    {
      // then the toggle switch (checkbox) moves to On
     // what should place here that moves the switch from on to off and vise versa
    }
    else
    {
      //then toggle switch (checkbox) moves to Off
    }

})</script>

Updated Code

Bellow is image for my updated code and error

Updated Code 2

I have following declarations in my headsection in layout

<head>
<title>@ViewBag.Title</title>
@*All the javascript and css files that are required by the
    application can be referenced here so that there is no
    need to refrence them in each and every view*@


<script type="text/javascript" src="~/Scripts/jquery-3.1.0.min.js"></script>
<script src="~/Scripts/bootstrap-toggle.js"></script>
<link href="~/Content/bootstrap-toggle.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />    
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?key=MyKey"></script>


<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="~/favicon.ico" /></head>

See bundle.config

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

I have tried many things in if...else like $("#test_id").checked = true/false also i have tried document.getElementById("test_id").checked

But all in vain, any help would be appreciated

Now, what is the actual problem? `data` doesn't change? AJAX is not send? Are you sure bootstrap will render the checkbox like you've written it, i.e. is `#test_id` present in the rendered source? — Teemu, Sep 30 '16 at 06:51
@Teemu the .on("change") event is working only when the switch is changed from On to Off or Off to On and then in ajax it's passing data and search(serial number) and in controller i have placed a insert query and it's insert data into database — , Sep 30 '16 at 06:55
@Teemu then a fetch query is placed from which i have carried out the command name (cmd_Name) and then stored in a session variable and then passed this variable in my JavaScript. Here i just want to change the switch based command name value — , Sep 30 '16 at 06:57
@Teemu please look into the if..else part right after window on load — , Sep 30 '16 at 07:00
It's still bit unclear what you're asking. `window.onload` is supposed to be executed only once. If you want to change the value of `cmd_Name`, you've to do it in the `onchange` handler, or in the callback of `AJAX` call, as `cmd_Name` being global. Notice, that everything you say you've tried, refers to `#test_id`, not to `cmd_Name`, and now it appears, that the problem is with `cmd_Name`. That's why the question is so confusing. — Teemu, Sep 30 '16 at 07:03
@Teemu there is a search functionality which searches the particular serial number and the page is refreshed when clicking on a button and based on that serial number the command name is fetched from the query and using that command name i want to change the switch value — , Sep 30 '16 at 07:09
If you uncomment `alert(cmd_Name);`, what does it show you? Check also the length of the variable, just in case of leading/trailing white-space characters. — Teemu, Sep 30 '16 at 07:14
@Teemu it will show me the current value of 'cmd_Name' and the length is okay i have checked it — , Sep 30 '16 at 07:17
@Teemu don't get confuse with the test_id, i simply want to move the switch to respective value if it's On then it remains at On if it's Off then it's shift to Off — , Sep 30 '16 at 07:20
Back to my first comment then, is `#test_id` present in the source? And is it the same element you really see on the screen? Have you taken a look at the console, there might be some error messages? — Teemu, Sep 30 '16 at 07:22
`$("#test_id").is(":checked")` should work. What's the issue with that? — Akshay, Sep 30 '16 at 07:26
@Akshay Yes `$("#test_id").is(":checked")` is working but it's for my `onChange` event i just simply want to change the value of switch button from On to Off or Off to On based on `cmd_Name` — , Sep 30 '16 at 07:31
@Akshay as per you answer i have tried but get an error. also see the update code — , Sep 30 '16 at 07:42

score 0 · Accepted Answer · answered Sep 30 '16 at 07:28

0

Try this -

if(cmd_Name == "On") {
    $("#test_id").attr("checked", "checked");
} else if(cmd_Name == "Off") {
   $("#test_id").removeAttr("checked");
}

You can do it this way as well

if(cmd_Name == "On") {
    $("#test_id").bootstrapToggle("on")
} else if(cmd_Name == "Off") {
   $("#test_id").bootstrapToggle("off")
}

answered Sep 30 '16 at 07:28

Akshay

530
7
20

For both i am getting same error `error CS0103: The name '$' does not exist in the current context` – Sep 30 '16 at 07:35
That means you need to add reference to jquery – Akshay Sep 30 '16 at 08:35
jquery is in my layout and the toggle code is in my partial view – Sep 30 '16 at 09:40
The error you got comes if you haven't included jquery or you are executing your code before it gets loaded. Also make sure that you are not loading jquery twice – Akshay Sep 30 '16 at 09:42
So what to do in that case ? I can't add jquey reference in my partial view as it will conflict the reference in layout – Sep 30 '16 at 09:49
Include your reference in `head` in layout – Akshay Sep 30 '16 at 09:55
I have added the toggle code and script in my layout where there is the reference for jquery but still i am getting the same error, and all of my references are in the head section – Sep 30 '16 at 09:57
Make sure jquery in not loaded from a bundle. Check your bundle.config – Akshay Sep 30 '16 at 09:58
Kindly see my **Updated Code 2** – Sep 30 '16 at 10:01
I can see that you have added jquery reference in bundle as well as layout. Are you referencing that bundle somewhere in layout? – Akshay Sep 30 '16 at 10:07
No there is not bundle reference in my layout – Sep 30 '16 at 10:09
Not sure what's wrong but the references seems to be conflicting or missing somewhere. It is hard to tell without looking into the code. – Akshay Sep 30 '16 at 10:15
My change function and all other javascript functions which contains `$` in them are working well and giving results, i don't know what is the problem in toggle case – Sep 30 '16 at 10:26
Write your code in `$(document).ready(function(){})` instead of `window.load` – Akshay Sep 30 '16 at 10:44
I am following all the links [https://www.tunnelsup.com/jquery-checkbox-checked-reading-and-setting/], [http://stackoverflow.com/a/8328125/6856823] [http://www.electrictoolbox.com/check-uncheck-checkbox-jquery/] Many other links as well but still unable to do my task :( – Sep 30 '16 at 11:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/124640/discussion-between-akshay-and-fasi). – Akshay Sep 30 '16 at 11:59

Changing toggle switch from On to Off or Off to On using if else

1 Answers1