Updating selection menu after fresh input into database (JSON) - php

Question

I'm working on a new website, and i want to learn more about JSON
The website is using jQuery and PHP
I have a jQuery window that gets opend to add a new menu item or submenu item. In this window is also standing a select menu with the added menu and submenu items.
If i have added a new item than it will be added by an ajax request into the database, ofcourse i want to try to avoid window refreshing to see the new added items in the select menu.
The next code is triggering my window and sends the form to a PHP script.
`
var SITE_URL = "http://martin.eenwittekerst.nl/";
$$.ready(function() {
$( "#dialog_add_menu" ).dialog({
autoOpen: false,
modal: true,
width: 900,
open: function(){ $(this).parent().css('overflow', 'visible');
$$.utils.forms.resize() }
}).find('button.submit').click(function(){
var $el = $(this).parents('.ui-dialog-content');
if ($el.validate().form()) {
var filename = SITE_URL+"/admin/requests/menu.php";
$.ajax
({
type: "POST",
url: filename,
data: "do=add&"+$('form#menu').serialize()+"",
success: function(msg)
{
document.getElementById("return_message").innerHTML = msg;
}
});
var filename2 = SITE_URL+"/admin/reloads/menuItems.php";
$.ajax({
type: "GET",
url: filename2,
async: false,
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/j-son;charset=UTF-8");
}
},
dataType: "json",
success: function(data){
//do your stuff with the JSON data
alert(data);
}
});
$el.find('form')[0].reset();
$el.dialog('close');
}
}).end().find('button.cancel').click(function(){
var $el = $(this).parents('.ui-dialog-content');
$el.find('form')[0].reset();
$el.dialog('close');;
});
$( ".open-add-menu-dialog" ).click(function() {
$( "#dialog_add_menu" ).dialog( "open" );
return false;
});
});
`
This is included a part where i'm testing with JSON, i will put that piece of code here again where i'm trying to do the JSON thing
`
var filename2 = SITE_URL+"/admin/reloads/menuItems.php";
$.ajax({
type: "GET",
url: filename2,
async: false,
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/j-son;charset=UTF-8");
}
},
dataType: "json",
success: function(data){
//do your stuff with the JSON data
alert(data);
}
});
`
At the end i have an alert that's not giving anny respons, not even an empty alert
Sorry for beeing a noob in this, but this is my first time i'm doing this. I have tested a lot what's standing on the internet without success.
The code in my PHP code is verry simple and only for testing ofcourse
`
include(BASE_DOC."config.php");
include(BASE_DOC."classes/cls.db.php");
// Open the database connection
$cOpenDB = new database_connection;
echo $cOpenDB->db_open(DB_HOST, DB_USER, DB_PASS, DB_TABLE);
$rows= array();
$sql = mysql_query("SELECT * FROM menu_items") or die(mysql_error());
while($data = mysql_fetch_array($sql))
{
$rows[] = $data['id'].",".$data['menu_item_name'];
}
echo json_encode($rows);
?>
`
Now i dont understand how to get the JSON array from my PHP script and how to rebuild the HTML of my select menu
Here i have the code of my HTML of the windowedbox to add a new sub- menu item
`
<!-- Add New Menu Item -->
<div style="display: none;" id="dialog_add_menu" title="Voeg een nieuw menu item toe">
<fieldset id="menu">
<form action="" class="full validate" id="menu">
<div class="row">
<label for="d2_menu_item">
<strong>Menu item naam</strong>
</label>
<div>
<input class="required" type="text" name="menu_name" id="menu_name" />
</div>
</div>
<div class="row">
<label for="d2_menu_item_alt">
<strong>Menu item alt</strong>
</label>
<div>
<input class="required" type="text" name="menu_alt" id="menu_alt" />
</div>
</div>
<div class="row">
<label for="d2_menu_item_sub">
<strong>Wordt dit een submenu item?</strong>
</label>
<div>
<select name="sub_option" id="sub_option">
<option value="n">Nee</option>
<option value="y">Ja</option>
</select>
</div>
</div>
<div class="row" id="showMenuItems">
<label for="d2_select_menu_item">
<strong>Selecteer een Menu item om een submenu item aan te koppelen</strong>
</label>
<div>
<div id="sub_menu_item_of">
<select name="sub_of" id="sub_of">
<option>Kies een menu item om een sub menu item aan te koppelen</option>
<?PHP
$cMenuItems = new menu();
echo $cMenuItems->menuItemsSelect("'menu_item_name','menu_item_alt'", "menu_items");
?>
</select>
</div>
</div>
</div>
</form>
<div class="actions">
<div class="left">
<button class="grey cancel">Annuleren</button>
</div>
<div class="right">
<button class="submit">Voeg menu item toe</button>
</div>
</div>
</fieldset>
</div>
<!-- End if #dialog_add_menu -->
`
For the first time is this a real pain in the ass to do, but if someone can help me with this than i'm forever greatfull to you all!
If you have anny questions or need more information let me know!
Sorry for sometimes my poor english
Kind regards
Martin Meijer

Answer 1

When debugging ajax, you have to make sure
- the ajax request did sent (check you firebug network console)
- the php did return a reponse : log before the return "json_encode($rows);"
- the ajax did got a correct reponse : add a error block in your ajax call :
$.ajax({
...
error: function(response) {
alert(JSON.stringify(response));
}
});
Also check you php.log file.