Bootstrap Toggle для изменения MySQL TINYINT без обновления страницы с помощью AJAX

Question

Bootstrap Toggle для изменения MySQL TINYINT без обновления страницы с помощью AJAX

в моем приложении я хотел бы изменить логическое состояние, хранящееся в моей базе данных MySQL, как TINYINT [0,1], изменив состояние флажка, стилизованного как переключатель, с помощью плагин начальной загрузки. Вау … это полный рот.

Хитрость в том, что я хочу, чтобы TINYINT обновлялся в фоновом режиме без видимого обновления страницы. Я пытался понять это через AJAX. Я могу проверить состояние переключателя и могу console.log изменить его состояние, но я не могу заставить секцию AJAX фактически выполнить POST на моей странице toggle_track.php, которая обновит базу данных. Я открыт для любых идей и готов попробовать практически все.

Теперь для примеров кода:

main.php

<input id="toggle-event" type="checkbox" data-toggle="toggle" data-on="On" data-off="Off">
<div id="console-event"></div>
<script type="text/javascript">
$(function() {
$('#toggle-event').change(function() {
console.log('state checked: ' + $(this).prop('checked'));

if($(this).prop('checked')) {
var visible = 1;
} else {
var visible = 0;
}
console.log('variable checked: ' + visible);

var xhttp;
if (window.XMLHttpRequest) {
// code for modern browsers
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

console.log('browsers checked: ' + xhttp);

// xhttp.onreadystatechange = function() {
//   if (this.readyState == 4 && this.status == 200) {
//     document.getElementById("demo").innerHTML = this.responseText;
//   }
// };

xhttp.open("POST","../private/dynamic/toggle_track.php?visible="+visible,true);
console.log('Open: ' + xhttp.open);

xhttp.send();

console.log('POST run');
})
})
</script>

toggle_track.php

<?php

require_once('../initialize.php');

?>

<script type="text/javascript">
window.alert('made it');
</script>

<?php

if(isset($_POST['visible'])) {$incident['visible'] = $_POST['visible'];

$incident_id = $_SESSION['incident_id'];

// update the entire associative array in the db.
$result = update_incident($incident_id);
if($result === true) {    // Check to see if the UPDATE was successful.
// Yes, the UPDATE was successful.
// load a message to be displayed.
// $step_updated = 'Incident: ' . $incident['id'] . ' was updated.  Step #' . $step['id'] . ' was added.  The array should now show: ' . $sa_load;
// $ans_updated = ' and the answer for #' . $step['id'] . ' was added.  The array should now show: ' . $ans_load;
}
// No, the UPDATE failed.
else {
// load message to show what failed.
$errors = $result;
}  // end else

}?>

query_functions.php
после установления соединения с базой данных в require_once('../initialize.php'); утверждение выше:

function update_incident($incident) {
global $db;

$sql = "UPDATE incidents SET ";
$sql .= "visible='" . db_escape($db, $incident['visible']) . "', ";
$sql .= "note='" . db_escape($db, $incident['note']) . "', ";
$sql .= "resolved='" . db_escape($db, $incident['resolved']) . "', ";
$sql .= "step_array='" . db_escape($db, $incident['step_array']) . "',";
$sql .= "ans_array='" . db_escape($db, $incident['ans_array']) . "',";
$sql .= "lastStep='" . db_escape($db, $incident['lastStep']) . "',";
$sql .= "valid='" . db_escape($db, $incident['valid']) . "' ";
$sql .= "WHERE id='" . db_escape($db, $incident['id']) . "' ";
$sql .= "LIMIT 1";

$result = mysqli_query($db, $sql);
// For UPDATE statements, $result is true/false
if($result){
return true;
} else {
//UPDATE failed
echo mysqli_error($db);
db_disconnect($db);
exit;
}
}

Я надеюсь, что этот фрагмент кода объясняет мое мышление достаточно, чтобы помочь получить ответ.

0

ajax jquery mysql php twitter-bootstrap

Решение

Другие решения

Ну … большое спасибо Патрику Кью, который поставил меня на правильный путь. Вот правки, которые сделали это работать:

main.php

Я сделал следующее изменение:

if($(this).prop('checked')) {
var visible = "true";
} else {
var visible = "false";
}

Затем на toggle_track.php Я сделал это изменение:

$incident = [];

$raw_visible = $_POST['visible'];

if($raw_visible == "true") {
$incident['visible'] = 1;
} elseif($raw_visible == "false") {
$incident['visible'] = 0;
}

0

Источник

Accepted Answer

Если я вас правильно понял, вы не получили свой POST на toggle_track.php, верно? У вас есть правильная идея, но я бы к этому так:

На main.php

      //Same code until console.log();

//Not really needed in this case to be sent in an array, but I kinda like it :P
var dataToSend = {
visible: visible
};

//Sending data using jQuery AJAX
$.ajax({
url: 'toggle_track.php',  //Where to
type: "POST",  //Method
data: dataToSend, //The array I created with the "visible" variable
//A success function, for when the CONNECTION WITH THE URL was succesfull
success:  function (response) {
//If COMMUNICATION was successful (Doesn't mean it went all right)
},
//An error function, for when the CONNECTION WITH THE URL
//wasn't succesfull (couldn't be found, etc)
error: function(response){
//If COMMUNICATION had an error
}
});
})
})
</script>

Извините, если я не правильно объясняю myselft, английский не мой родной язык. Я постараюсь ответить на любые ваши вопросы.

0