JQuery/AJAX Toggle Switch POST PHP-Datei ohne Navigation

ich versucht haben, diese Funktion zu erhalten mit verschiedenen Methoden wie $ Schnipsel in Javascript und mit einem jQuery-Plugin hier: http://jquery.malsup.com/form/JQuery/AJAX Toggle Switch POST PHP-Datei ohne Navigation

Ich habe gescheuert und Stackoverflow Google nach einer Lösung, aber ohne Erfolg.

Grundsätzlich versuche ich, einen Schalter zu aktivieren (aktivieren/deaktivieren), der beim Anklicken das Ergebnis über AJAX an ein PHP-Skript sendet, ohne die Seite zu navigieren oder neu zu laden.

Einer dieser Kippschalter um genau sein: http://www.bootstraptoggle.com/

Im Folgenden werde ich es bekommen kann das PHP-Skript ausgeführt werden soll, wenn das Kontrollkästchen „umgeschaltet“ wird, aber es navigiert auf die leere PHP-Datei-Seite (Ich habe keine das PHP-Skript macht alles auf Erfolg).

<html> 
<head> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <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="form" method="post" action="audio_alarm.php"> 
    <input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" checked> 
    </form> 
    <script> 
    $('#toggle').change(function(){ 
     $('#form').submit(); 
    }); 
    </script> 
</body> 
</html>

Jetzt unten ist das, was ich dachte, sollte es sicher machen, aber die Meldung jQuery-Plugin scheint nicht wie in der Werbung zu arbeiten .. Es sei denn, ich eine einfache Aufsicht gemacht haben ..

<html> 
<head> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <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> 
    <script> 
    $('#toggle').change(function(){ 
     // submit the form 
     $(#myForm).ajaxSubmit(); 
     // return false to prevent normal browser submit and page navigation 
     return false; 
    }); 
    </script> 
</body> 
</html>

Quelle

2016-12-13 Shane Buckley

Sie Rückkehr falsch auf dem Änderungsereignis, nicht vor. Schauen Sie [hier] (https://github.com/malsup/form#ajaxsubmit-options-) –

Das scheint nur zu funktionieren, wenn der Benutzer einen Absenden-Button klickt, ich benutze keine Absenden-Taste .. –

Jetzt Ihr Code ist richtig, aber Sie können keine Änderungen sehen, weil Sie keinen Event-Handler haben, nachdem jQuery erfolgreich war. – Miron

Nachfolgend finden Sie die vollständige Lösung für Sie.

HTML

<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>

Wenn Sie aktivieren oder deaktivieren Taste macht es ajax Aufruf audio_alarm.php .Und Daten werden ajax.Hope abgerufene verwendet, wird es Ihnen helfen, eine Menge.

Code für audio_alarm.php ist wie folgt:

<?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 enabled!!'; 
    $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 disabled!!'; 
    $success='Disabled'; 
    echo json_encode(array('message'=>$message,'success'=>$success)); 

} 
?>

Quelle

2016-12-13 15:15:50

JQuery/AJAX Toggle Switch POST PHP-Datei ohne Navigation

Antwort

Verwandte Themen