JS doesn't change the DIV by toggle

Question

I tried to use Bootstrap toggle to change div html just like the example in http://www.bootstraptoggle.com/#events with a little change, but it didn't work. (The original didn't worked out with my current js code) what am I do wrong?

        <!DOCTYPE html>
    <html lang="he">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" type="text/css" href="css/onoff.css">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
    <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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>

    <!-- Bootstrap Table -->
  <!--- THE PROBLEM LINES ---->  
    <!-- DataTable -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
   <!--- THE PROBLEM LINES ----> 


    <head>
    <input id="toggle-event" type="checkbox" data-toggle="toggle">
        <div id="console-event"></div>
    </head>



        <script>
       $(document).ready(function($) {
        $('#toggle-event').on('change',(function() {
          $('#console-event').html('Toggle: ' + $(this).prop('checked'))
        })
      )})
        </script>

EDIT

I fixed the "," but it still doesnt work. The "," mistake was only here. my code doesnt have this issue. The Problem is about this lines:

   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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>

every time I add them it doesn't work and when I remove it, it's work just fine.

Closing due to simple typographic error. Please learn to use console to review your JS errors. — Roko C. Buljan, Aug 31 '16 at 10:51
You should check the console of the browser then debug then only post the question like syntactical error — black_pottery_beauty, Aug 31 '16 at 10:52

score 1 · Answer 1 · answered Aug 31 '16 at 10:49

1

Its a minor typo ("." => ',').

on('change'. (function() { => on('change', (function() {

Full Code:

$('#toggle-event').on('change', (function() {
      $('#console-event').html('Toggle: ' + $(this).prop('checked'))
})

answered Aug 31 '16 at 10:49

Surender Lohia

349
3
12

score 0 · Answer 2 · answered Aug 31 '16 at 10:49

0

  $(function() {
    $('#toggle-event').change(function() {
      $('#console-event').html('Toggle: ' + $(this).prop('checked'))
    })
  })

You had extra ")"

answered Aug 31 '16 at 10:49

barha

709
1
7
22

score 0 · Answer 3 · answered Aug 31 '16 at 10:59

0

Your updated script code is :

 $(document).ready(function() {
 $('#toggle-event').change(function() {
  $('#console-event').html('Toggle: ' + $(this).prop('checked'));
});

})

answered Aug 31 '16 at 10:59

bala

177
2
13

Update your original answer instead of giving multiple answers. – vivekkupadhyay Aug 31 '16 at 11:52

score 0 · Answer 4 · answered Aug 31 '16 at 11:03

If you want to use "on", in this line:

 $('#toggle-event').on('change'.(function() {

After 'change' you have ".(", replace it with a coma.

$('#toggle-event').on('change', function() {
    $('#console-event').html('Toggle: ' + $(this).prop('checked'));
});

score 0 · Answer 5 · edited May 23 '17 at 12:22

Your are added multiple times head tag. no need to add one more time.

your updated like this. no worry about that integrity and crossorgin.

Reference : What are the integrity and crossorigin attribute?

<!DOCTYPE html>
<html lang="he">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">   </script>
   <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  >
  <!-- Optional theme -->
  <link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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>
  </head>

<body>
<script>
   $(document).ready(function() {
    $('#toggle-event').change(function() {
     $('#console-event').html('Toggle: ' + $(this).prop('checked'));
   });
 })
  </script>
  <input id="toggle-event" type="checkbox" data-toggle="toggle">
    <div id="console-event"></div>
   </body>

JS doesn't change the DIV by toggle

EDIT

5 Answers5