Jquery terugkoppeling
Vervolgens geeft die pagina een variable: $newTitleID = $conn->lastInsertId();
Hoe kan ik dit variable opvragen via jquery?
Ik wil namelijk het lastinsertid gebruiken in mijn indexpagina.
Als ik: alert( "Data Loaded: " + data ); opvraag, zit die variable daarin.
Ik weet alleen niet hoe dit precies heet, dus hoe ik moet zoeken....
Gewijzigd op 28/02/2018 10:57:45 door Daan Vee
Je kan verder met console.log() prima debuggen met behulp van je debugging-functies in je browser.
Code (php)
1
2
2
{"succes": true, "object": {"id": 1}}
{"succes": false, "message": "Er is een fout opgetreden"}
{"succes": false, "message": "Er is een fout opgetreden"}
Met de jQuery kun je die JSON weer afvangen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
// Hier de rest van je Ajax
success: function(data) {
if (data.success) {
alert(data.object.id);
} else {
alert('Er is een fout opgetreden: ' + data.message);
}
},
error: function(data) {
alert('Er is een fout opgetreden');
}
});
// Hier de rest van je Ajax
success: function(data) {
if (data.success) {
alert(data.object.id);
} else {
alert('Er is een fout opgetreden: ' + data.message);
}
},
error: function(data) {
alert('Er is een fout opgetreden');
}
});
Zoiets ongeveer.
index.php:
Stuurt via jquery gegevens naar verwerken.php
verwerken.php
verwerkt de gegevens, verstuurt via index.php en geeft na het opslaan in de database (wat goed gaat) $newTitleID = $conn->lastInsertId(); terug.
Nu wil ik op index.php $newTitleID weergeven....
Als ik op index.php: alert( "Data Loaded: " + data ); opvraag, zit het $newTitleID daarin, maar hoe kan ik 'm daarna los weergeven?
Ik wil namelijk de volgende code die dan wordt ingevoegd voorzien van dat ID:
Code (php)
1
$(wrapper).append('<li class="drsubject" id="HIER DUS DAT ID"><table><tr><td style="padding-left: 5px;"><img src="layout/images/cursor.png"></td><td style="padding-left: 5px;"><input type="text" id=\"titelID\" name="titelnaam[]" placeholder="Naam" class="form-control" style="width:200px;"></td><td style="padding-left: 5px;"><input type="text" id=\"titelID\" name="titelfunctie[]" placeholder="Functie" class="form-control" style="width:200px;"></td><td style="padding-left: 5px;"><a href="#" class="remove_field"><i class="fa fa-trash"></i> Verwijder</a></td></tr></table></li>'); //a
Het is handig om het gedrag van dit soort functionaliteit op één plek te definiëren, want in zekere zin hoort dit bij elkaar - het plaatsen van een bericht, visuele terugkoppeling op het scherm, dit is allemaal onderdeel van de AJAX chatbox, of wat je ook probeert te maken.
Wat ik me afvraag:
Dit doet mijn update-pagina:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
if($_POST['newtitle'] == "newtitle"){
if(empty($_POST['draaiboekID']) || empty($_POST['itemID']) || empty($_POST['userID'])) {
echo $_POST['newtitle'];
echo $_POST['draaiboek'];
echo "Er is iets heel erg mis gegaan";
}
else{
$draaiboekID = mysqli_real_escape_string($conn, $_POST['draaiboekID']);
$itemID = mysqli_real_escape_string($conn, $_POST['itemID']);
$userID = mysqli_real_escape_string($conn, $_POST['userID']);
$add_title = mysqli_query($conn, "INSERT INTO titels (naam, functie, volgorde, draaiboekID, itemID, userID) VALUES ('', '', '100', '$draaiboekID', '$itemID', '$userID')") or die('Fout, titel is niet ingevoegd');
echo $_POST['draaiboek'];
echo "Er is iets aangemaakt. Het nieuwe ID is";
$newTitleID = $conn->lastInsertId();
}
}
?>
if($_POST['newtitle'] == "newtitle"){
if(empty($_POST['draaiboekID']) || empty($_POST['itemID']) || empty($_POST['userID'])) {
echo $_POST['newtitle'];
echo $_POST['draaiboek'];
echo "Er is iets heel erg mis gegaan";
}
else{
$draaiboekID = mysqli_real_escape_string($conn, $_POST['draaiboekID']);
$itemID = mysqli_real_escape_string($conn, $_POST['itemID']);
$userID = mysqli_real_escape_string($conn, $_POST['userID']);
$add_title = mysqli_query($conn, "INSERT INTO titels (naam, functie, volgorde, draaiboekID, itemID, userID) VALUES ('', '', '100', '$draaiboekID', '$itemID', '$userID')") or die('Fout, titel is niet ingevoegd');
echo $_POST['draaiboek'];
echo "Er is iets aangemaakt. Het nieuwe ID is";
$newTitleID = $conn->lastInsertId();
}
}
?>
Hoe zorg ik dat hier een JSON wordt teruggegeven naar index.php?
Moet dit hier ergens inkomen?
Code (php)
1
2
2
{"succes": true, "object": {"id": 1}}
{"succes": false, "message": "Er is een fout opgetreden"}
{"succes": false, "message": "Er is een fout opgetreden"}
http://php.net/manual/en/function.json-encode.php
Gewijzigd op 02/03/2018 09:53:29 door - Ariën -
Code (php)
1
json_encode($newTitleID);
Als ik dit zo aan het einde van update.php verpak. Kan ik 'm dan in index.php weer ophalen?
Ik snap niet wat je bedoelt Arien. Doe ik het zo goed? Ben een leek op dit gebied...
Vroeger was ik ook een leek, maar met het grasduinen in de php.net site heb ik steeds meer geleerd. ;-)
Gewijzigd op 02/03/2018 10:27:06 door - Ariën -
Daan Vee op 02/03/2018 10:04:45:
Als ik dit zo aan het einde van update.php verpak. Kan ik 'm dan in index.php weer ophalen?
Ik snap niet wat je bedoelt Arien. Doe ik het zo goed? Ben een leek op dit gebied...
Ik snap niet wat je bedoelt Arien. Doe ik het zo goed? Ben een leek op dit gebied...
Misschien is het slim om je eens in jQuery Ajax in te lezen. Dat doet namelijk wat jij wil. https://api.jquery.com/jquery.post/
Alleen kloppen ergens m'n haakjes niet.
Wat het verschil is tussen } en }) en }); weet ik niet..
Zou iemand eens kunnen kijken?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script>
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$.ajax({
type: 'POST',
url: 'shared/updateTitles.php',
data: {newtitle: "newtitle", draaiboekID: "<?php echo $draaiboekID; ?>", itemID: "<?php echo $itemID; ?>", userID: "<?php echo $userID; ?>"},
success: function(result) {
var data = jQuery.parseJSON(result);
alert(data.newtitleID);
}
});
})
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
var titleID = $(this).parents('li').attr('titelid');
e.preventDefault(); $(this).parents('li').remove(); x--;
$.post( "shared/updateTitles.php", { deletetitle: "deletetitle", titleID: titleID })
.done(function( data ) {
alert( "Data Loaded: " + data );
});
})
});
</script>
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$.ajax({
type: 'POST',
url: 'shared/updateTitles.php',
data: {newtitle: "newtitle", draaiboekID: "<?php echo $draaiboekID; ?>", itemID: "<?php echo $itemID; ?>", userID: "<?php echo $userID; ?>"},
success: function(result) {
var data = jQuery.parseJSON(result);
alert(data.newtitleID);
}
});
})
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
var titleID = $(this).parents('li').attr('titelid');
e.preventDefault(); $(this).parents('li').remove(); x--;
$.post( "shared/updateTitles.php", { deletetitle: "deletetitle", titleID: titleID })
.done(function( data ) {
alert( "Data Loaded: " + data );
});
})
});
</script>
Want wat je opent, sluit je ook af.
Bekijk anders eens een basistutorial over jQuery. Goed inspringen met de tab-toets kan goed helpen.
Gewijzigd op 02/03/2018 12:12:49 door - Ariën -
Gebruik een editor met kleur codes! Deze helpen wanneer je een haakje bent vergeten.
Ik weet niet precies hoe je je code hebben wilt, maar zo is in ieder geval alles afgesloten:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script>
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
}
$.ajax({
type: 'POST',
url: 'shared/updateTitles.php',
data: {newtitle: "newtitle", draaiboekID: "<?php echo $draaiboekID; ?>", itemID: "<?php echo $itemID; ?>", userID: "<?php echo $userID; ?>"},
success: function(result) {
var data = jQuery.parseJSON(result);
alert(data.newtitleID);
}
});
$(wrapper).on("click",".remove_field", function(e) { //user click on remove text
var titleID = $(this).parents('li').attr('titelid');
e.preventDefault(); $(this).parents('li').remove(); x--;
$.post( "shared/updateTitles.php", { deletetitle: "deletetitle", titleID: titleID })
.done(function( data ) {
alert( "Data Loaded: " + data );
});
});
});
});
</script>
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
}
$.ajax({
type: 'POST',
url: 'shared/updateTitles.php',
data: {newtitle: "newtitle", draaiboekID: "<?php echo $draaiboekID; ?>", itemID: "<?php echo $itemID; ?>", userID: "<?php echo $userID; ?>"},
success: function(result) {
var data = jQuery.parseJSON(result);
alert(data.newtitleID);
}
});
$(wrapper).on("click",".remove_field", function(e) { //user click on remove text
var titleID = $(this).parents('li').attr('titelid');
e.preventDefault(); $(this).parents('li').remove(); x--;
$.post( "shared/updateTitles.php", { deletetitle: "deletetitle", titleID: titleID })
.done(function( data ) {
alert( "Data Loaded: " + data );
});
});
});
});
</script>
eerste topic, reeds gesloten door mod
tweede topic, met aan het einde "Thanks werkt." - blijkbaar niet dus?