ブートストラップトグルは、私は、AJAXを通じて、このトグルHTMLをロードし、ページにこのスイッチをロードし、/の無効状態を有効にしようとしていますAJAXによってロードされたときに作業し、2回

-1

のイベントの呼び出しをしないスイッチ製品。しかし、私はそれが働いていないajaxを介して呼び出すとき。

出典

2017-01-05 Atmiya Kolsawala

following..iが同じ問題に直面しているが、私は以下のように解決し確認してください。 –

ajaxからの応答が成功した後に、スイッチコードを初期化する必要があります。

私は一週間ほど前に同じ問題を抱えているあなたは、そのスイッチ

出典

2017-01-05 04:36:25

のためのすべてのものを再初期化する必要があるという理由で、あなたが動的にコンテンツを追加しているので、そのスイッチに結合するすべてのイベントはAJAX応答の後に行われなければなりません私は以下のような問題を解決しました。

test.phpを

<html> 
    <head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script type="text/javascript"  src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript">window.jQuery || document.write('<script src="classes/commons/jquery/jquery-1.7.1.min.js"><\/script>')</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> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 


    </head> 
    <body> 
    <form id="myForm" name="myForm" action="audio_alarm.php" method="post"> 
     <input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" checked> 
    </form> 
    <br><br> 
    <div class="panel panel-default"> 
    <div class="panel-heading" id="heading"></div> 
    <div class="panel-body" id="body"></div> 
    </div> 
    <div></div> 
    <script> 
     $('#toggle').change(function(){ 
     var mode= $(this).prop('checked'); 
     // // submit the form 
     // $(#myForm).ajaxSubmit(); 
     // // return false to prevent normal browser submit and page navigation 
     // return false; 
     $.ajax({ 
      type:'POST', 
      dataType:'JSON', 
      url:'audio_alarm.php', 
      data:{mode:mode}, 
      success:function(data) 
      { 
      var data=eval(data); 
      message=data.message; 
      success=data.success; 
      $("#heading").html(success); 
      $("#body").html(message); 
      } 
     }); 
     }); 
    </script> 
    </body> 
    </html>

そして

audio_alarm.php

<?php 

$mode=$_POST['mode']; 

if ($mode=='true') //mode is true when button is enabled 
{ 
    //Retrive the values from database you want and send using json_encode 
    //example 
    $message='Hey my button is enableed!!'; 
    $success='Enabled'; 
    echo json_encode(array('message'=>$message,'$success'=>$success)); 
} 

else if ($mode=='false') //mode is false when button is disabled 
{ 
    //Retrive the values from database you want and send using json_encode 
    //example 
    $message='Hey my button is disable!!'; 
    $success='Disabled'; 
    echo json_encode(array('message'=>$message,'success'=>$success)); 

} 
?>

出典

2017-01-05 04:40:28

ブートストラップトグルは、私は、AJAXを通じて、このトグルHTMLをロードし、ページにこのスイッチをロードし、/の無効状態を有効にしようとしていますAJAXによってロードされたときに作業し、2回

答えて

関連する問題