Probleem Autoupdate <select> menu met jQuery en JSON

martinmeijer · 4 jul 2013

Beste,

Ik ben nu al een tijdje bezig met een probleem wat een beetje begint te frustreren, ik zal de case even uitleggen

Ik ben een backoffice aan het maken die ik compleet wil laten werken zonder paginaverversing, dit doe ik met javascript (jQuery)/ JSON en PHP/MySQL

Ik heb alles goed werkend, als ik in de lightbox van jQuery een menu item toevoeg, dan komt deze in de database te staan. In dezelfde lightbox heb ik een uitklap menu met de ingevoerde menu items, om er een sub menu item aan te kunnen koppelen. Nu wil ik natuurlijk dat deze <select> menu netjes wordt geupdate wordt na elke invoer.

Ik gebruik deze template http://themes.stammtec.de/?theme=mango. De pagina die ik gebruik is in het menu "Tables" en dan "Dynamic", ik gebruik de tweede tabel als je daar klikt op "+ New client" dan is dit de lightbox die ik gebruik, wellicht dat dit de html en de gebruikte javascript wat verduidelijkt.

Op zich doet hij het wel, alleen ook weer niet. Het gedrag wat hij vertoond is als volgt...

Als ik een eerste invoer doe bijv. "Test" dan staat deze in de database en toont hij deze waarde ook in een alert die de <select> menu moet herbouwen, echter zet hij deze er dan niet in...

Bij een tweede invoer (zonder de pagina te verversen) bijv. "Test 1", dan is het eigenlijk het zelfde verhaal als hiervoor, alleen dan bouwt hij de select menu wel op, deze wordt dan alleen uitgebreid met de eerste invoer "Test".

Dit gaat dus zo verder, zou ik een invoer maken "test 2" dan staan test en test 1 er wel weer in alleen test 2 weer niet, terwijl deze wel voorbij komt in mijn alertbox.

Nu snap ik best veel, alleen dit volg ik even niet meer, veel dingen heb ik al geprobeerd maar helaas zonder succes.

De code die ik gebruik is als volgt:

HTML:

function rebuildSelectMenu()
{
    var SITE_URL_ADMIN      = "http://xxx.nl/admin/";
    // URL naar het bestand met JSON
    var JSONurl             = SITE_URL_ADMIN+"/reloads/menuItems.php";
    
    document.getElementById("sub_of").options.length = 0;
    
    // Het ophalen van de JSON data
    $.getJSON(JSONurl, {cache: false}, function(data){

        // De JSON array omzetten naar een string                    
        $.each(data, function(index,item)
        {
           // Alert met de ontvangen data van JSON
           alert(item.name); // Laat ook de laatst ingevoerde item zien

           // De <select> menu herbouwen met nieuwe data, alleen hier plaatst hij de laatste invoer niet in terwijl ik hem wel zie in de alert
           $("#sub_of").append("<option value='"+item.idoff+"'>" + item.name + "</option>"); 
        });

    });
}

Graag hoor ik ideeen hoe ik dit anders zou kunnen doen. Ik denk dat het te maken heeft met de lightbox o.i.d.

Ik heb dit eerst in een kaal script opgebouwd zonder lightbox, waar alles perfect werkt.

Alvast reuze bedankt!

Groeten Martin Meijer

Tha Devil · 5 jul 2013

Ik zie dat er een custom dropdown in die lightbox in je voorbeeld wordt gebruikt.

Het kan best zijn dat de daadwerkelijke select-box (#sub_of) wel wordt bijgewerkt maar omdat er een custom dropdown op zit zal die de wijziging niet meenemen, waarschijnlijk moet je die dan ook updaten.

Uit de bron meen ik te herleiden dat het om de Chosen-plugin lijkt te gaan.
Die kun je op deze manier laten bijwerken:
[js]$("#sub_of").trigger("liszt:updated");[/js]

Dit wordt dan je code:
[js]
// De JSON array omzetten naar een string
$.each(data, function(index,item)
{
// Alert met de ontvangen data van JSON
alert(item.name); // Laat ook de laatst ingevoerde item zien
// De <select> menu herbouwen met nieuwe data, alleen hier plaatst hij de laatste invoer niet in terwijl ik hem wel zie in de alert
$("#sub_of").append("<option value='"+item.idoff+"'>" + item.name + "</option>").trigger("liszt:updated");
});[/js]

martinmeijer · 5 jul 2013

Beste Tha Devil,

Bedankt voor de snelle feedback, ik had al een dergelijk vermoeden dat het met de opmaak te maken zou hebben van de form of de lightbox

Ik heb dit nu aangepast en dit was inderdaad het probleem, dit was dus vrij simpel, maar moet je net even weten!

Bedankt voor de hulp, ik ben je zeer dankbaar!

Groeten Martin Meijer

Tha Devil · 5 jul 2013

Overigens zie ik nog een kleine optimalisatie

Het is natuurlijk onnozel om elke keer die lijst bij te laten werken voor elk element, aan het einde is voldoende

[js]
// De JSON array omzetten naar een string
$.each(data, function(index,item)
{
// De <select> menu herbouwen met nieuwe data, alleen hier plaatst hij de laatste invoer niet in terwijl ik hem wel zie in de alert
$("#sub_of").append("<option value='"+item.idoff+"'>" + item.name + "</option>");
});
$("#sub_of").trigger("liszt:updated");
[/js]

martinmeijer · 5 jul 2013

Kijk helemaal goed, bedankt voor de hulp en tips, ik ben geen javascript expert, kan er redelijk goed mee uit de voeten, PHP/MySQL is meer mijn expertise. Bedankt voor deze goede lessen!

martinmeijer · 5 jul 2013

Nu heb ik toch een volgende vraag, ik verneem nu omdat ik het select menu opnieuw opbouw in javascript dat hij de waardes van het select menu niet doorgeeft en mijn andere waardes wel

Ik gebruik hiervoor

HTML:

$('form#menu').serialize()

De volledige code van mijn lightbox is als volgt

HTML:

$$.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;
                }
            });
            
            $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;
    });
});

De

HTML:

$('form#menu').serialize()

heb ik in een alert gehad, alle waardes laat hij zien op dat ene select menu na

Sorry dit is waarschijnlijk ook weer heel logisch en simpel, maar ik kan hier geen oplossing voor vinden tot zover

Alvast bedankt

Groetjes Martin

Tha Devil · 5 jul 2013

Het is lastig te achterhalen omdat de waardes context missen.
Verder kom ik een aantal functies tegen die niet binnen jQuery bestaan dus vermoedelijk plugins zijn (.validate(), .form())

Zo te zien vang je nu het click-event van een button met css-klasse "submit" af.
Volgens mij wil je juist de submit-actie van je formulier afvangen.

Ik heb het vermoeden dat die te vinden is onder een <form id="menu">.

Dus hangen we een eventListener aan die actie:
[js]
// Een CSS-ID hoort uniek op de pagina te zijn dus hoeven we alleen maar #menu te gebruiken
$("#menu").on('submit', function()
{
// Valideren sla ik over
var filename = SITE_URL_ADMIN+"/requests/menu.php";
$.ajax({
type: "POST",
url: filename,
data: "do=add&"+ $(this).serialize(),
success: function(msg)
{
// Waarom ineens van jQuery afstappen?

//document.getElementById("return_message").innerHTML = msg; --> wordt:
$("#return_message").html(msg);
// Formulier leeghalen na success
this.reset();
// Dialoog sluiten
$("#dialog_add_menu").dialog('close');
}
});
});
[/js]

Een basis voorbeeld heb ik hier gemaakt: http://jsfiddle.net/8k24s/
De knop "add" simuleert het dynamisch toevoegen van elementen aan een select-element

martinmeijer · 5 jul 2013

Ok top, ik heb dit net getest... alleen werkt dit niet helemaal (ik gebruik ook webmastertools plugin van FireFox, deze geeft geen errors terug)

Hij opent de light box en na het invullen van mijn formulier doet hij er niks mee, lightbox blijft staan en verstuurt verder niks

Dit is de code zoals ik hem nu heb

HTML:

$$.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(){

        $("#menu").on('submit', function()
        {
            var filename        = SITE_URL_ADMIN+"/requests/menu.php";
            
            $.ajax
            ({
                type: "POST",
                url: filename,
                data: "do=add&"+$(this).serialize(),//$('form#menu').serialize()
                
                success: function(msg)
                {
                    $("#return_message").html(msg);
                    alert($(this).serialize());
                }
            });

        });
    }).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;
    });
});

martinmeijer · 5 jul 2013

Hoi Tha Devil,

Ik heb net even ermee lopen test

De $(this) werkte niet zoals jij het bedoeld had, ik denk dat het komt vanwege deze al gebruikt wordt in de code van de lightbox... verbeter mij graag als dit anders is (ik probeer het even te begrijpen, dit gaat net even iets dieper dan wat ik weet)

De volgende code werkt nu voor mij (PS was een goede tip om te melden dat ik ergens van jQuery afstapte!)

var SITE_URL_ADMIN = "http://martin.eenwittekerst.nl/admin/";

HTML:

$$.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&"+$("#menu").serialize(),
                
                success: function(msg)
                {
                    $("#return_message").html(msg);
                }
            });
            
            $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;
    });
});

Graag hoor ik of dit een code is die goed bedacht is zie regel 18

Nogmaals mijn dank, ik ben er wel achter dat het hele kleine verschillen zijn die het hem kunnen maken of breken. Ik ben bang dat ik binnenkort wel weer met iets nieuws ga komen als ik daar niet uit kom. Dan maak ik daar even een andere topic over aan, om zo ook meer overzicht te kunnen hebben binnen dit topic.

Groetjes Martin

Tha Devil · 5 jul 2013

Waar het fout gaat in je een-na-laatste bericht is dat je de code welke ik gaf binnen de find() hebt staan, dat is niet nodig.

Wat hij dan namelijk doet is pas de eventListener toepassen op het moment dat je op die knop klikt.

Je zou het zo moeten hebben staan:
[js]
$$.ready(function() {
$( "#dialog_add_menu" ).dialog({
autoOpen: false,
modal: true,
width: 900,
open: function(){ $(this).parent().css('overflow', 'visible'); $$.utils.forms.resize() }
}).end().find('button.cancel').click(function(){
var $el = $(this).parents('.ui-dialog-content');
$el.find('form')[0].reset();
$el.dialog('close');
});

$("#menu").on('submit', function()
{
var filename = SITE_URL_ADMIN+"/requests/menu.php";
$.ajax
({
type: "POST",
url: filename,
data: "do=add&"+$(this).serialize(),//$('form#menu').serialize()

success: function(msg)
{
$("#return_message").html(msg);
alert($(this).serialize());
}
});
return false;
});

$( ".open-add-menu-dialog" ).click(function() {
$( "#dialog_add_menu" ).dialog( "open" );
return false;
});
});
[/js]

Waar je dan waarschijnlijk wel op moet letten is dat je de <button class="submit"> ook het attribuut type="submit" meegeeft.

Wat is eigenlijk de reden dat je begint met $$.ready? Volgens mij hoort dat namelijk gewoon $.ready te zijn.

Aangezien je over de webmastertools van Firefox begint: Het is vaak handiger om console.log() te gebruiken dan alert().
Dan krijg je net iets meer informatie

(Uit te lezen in de console van je browser)
Wel opletten dat je die er weer uit haalt want IE8 lust ze niet

martinmeijer · 5 jul 2013

Ik gebruik $$.ready, omdast dit al zo stond in het voorbeeldscript, ik dacht dat dit zo moest... maar ik zal dat eens aanpassen

. Ok nu weet ik dus waarom hij de $$.ready er heeft staan... ben aan het schrijven en testen tegelijk... anders opent hij de hele lightbox niet

Verder heb ik net aangepast wat jij zei in je laatste bericht, echter blijf ik nog houden dat hij het formulier niet verstuurd en de lightbox blijft staan zonder enige error melding. Ik had dit ook al getest namelijk daarom dat ik op het idee kwam om het script zo te maken zoals ik dit in mijn laatste bericht heb staan

De code van mijn Lightbox is als volgt

PHP:

<?PHP
// Include needed classes for this specific file
include(BASE_DOC."classes/cls.secure.php");
include(BASE_DOC."admin/classes/cls.menu.php");
?>

HTML:

<script type="text/javascript"> 
var SITE_URL_ADMIN      = "http://martin.eenwittekerst.nl/admin/";
var JSONurl             = SITE_URL_ADMIN+"/reloads/menuItems.php";

$.getJSON(JSONurl, {cache: false}, function(data){
                                    
    $.each(data, function(index,item) {

       $("#sub_of").append("<option value='"+item.idoff+"'>" + item.name + "</option>").trigger("liszt:updated");
       
    });
    
    $("#sub_of").trigger("liszt:updated");
    
});

function reloadMenuItemSelect()
{
    var SITE_URL_ADMIN      = "http://martin.eenwittekerst.nl/admin/";
    var JSONurl             = SITE_URL_ADMIN+"/reloads/menuItems.php";
    
    
    // Het ophalen van de JSON data
    $.getJSON(JSONurl, {cache: false}, function(data){
        
        // Legen van de select menu
        document.getElementById("sub_of").options.length	= 0;
        
        // De JSON array omzetten naar een string                    
        $.each(data, function(index,item)
        {
           // De <select> menu herbouwen met nieuwe data
           $("#sub_of").append("<option value='"+item.idoff+"'>" + item.name + "</option>");
        });
 
    });
    
    $("#sub_of").trigger("liszt:updated");
}

function timeOut()
{
    setTimeout('reloadMenuItemSelect()', 1000);   
}
</script>
<!-- Add New Menu Item dialogbox -->
<div style="display: none;" id="dialog_add_menu" title="Voeg een nieuw menu item toe">

    <fieldset id="addMenu">
    
        <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>Maak een keuze</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="test">
                        <select name="sub_of" id="sub_of">
                            <option>Maak een keuze</option>                                             
    					</select>
                    </div>
                </div>
            </div>            
        </form>
        <div class="actions">
            <div class="left">
                <button class="grey cancel">Annuleren</button>
            </div>
            <div class="right">
                <button type="submit" class="submit" onclick="timeOut(reloadMenuItemSelect());">Voeg menu item toe</button> // Ik doe het rebuilden van mijn selectmenu op deze manier, omdat elke andere manier niet update. Ik heb geprobeerd het aan te roepen in de andere JS waar we het nu over hebben.
            </div>
        </div>
    
    </fieldset>
</div>
<!-- End if #dialog_add_menu -->

Tha Devil · 9 jul 2013

Daar zijn we weer

Je hebt nu 2x de aanroep voor de JSON, één keer binnen een functie en één keer wanneer de pagina wordt geladen.
De kunst is om jezelf zo min mogelijk te herhalen qua code

Stel dat je nu een wijziging in de afhandeling van de JSON wilt doen dan moet dat nu op twee plekken gebeuren.
(Zo zie ik namelijk ook dat je op regel 9 de trigger() vergeten bent te verwijderen maar op regel 33 niet

)

Op deze manier is dat in ieder geval afgehandeld:
[js]
function reloadMenuItemSelect()
{
var SITE_URL_ADMIN = "http://martin.eenwittekerst.nl/admin/";
var JSONurl = SITE_URL_ADMIN+"/reloads/menuItems.php";

// Het ophalen van de JSON data
$.getJSON(JSONurl, {cache: false}, function(data){

// Legen van de select menu
// document.getElementById("sub_of").options.length = 0;
// Herschreven naar jQuery
$("#sub_of").html('');

// De JSON array omzetten naar een string
$.each(data, function(index,item)
{
// De <select> menu herbouwen met nieuwe data
$("#sub_of").append("<option value='"+item.idoff+"'>" + item.name + "</option>");
});

});

$("#sub_of").trigger("liszt:updated");
}

function timeOut()
{
setTimeout('reloadMenuItemSelect()', 1000);
}

// Alles binnen deze functie wordt uitgevoerd wanneer het document klaar is met laden.
$(document).ready(function()
{
reloadMenuItemSelect();
});
[/js]
De redenatie achter de timeOut()-functie ontgaat mij even, waarom zou je 1 seconde wachten voor de functie wordt uitgevoerd?

Wat er nu gebeurd volgens mij is dat wanneer je op die <button type="submit" /> drukt, de functie timeOut() wordt uitgevoerd en vervolgens wordt dezelfde pagina geladen.
Er wordt zo te zien niets aan de database toegevoegd.

Laten we eerst de submit-actie eens afvangen.
Breidt de $(document).ready() van hierboven eens uit met dit:
[js]
$(document).ready(function()
{
reloadMenuItemSelect();
$("#menu").on('submit', function() {
alert('Menu gesubmit');
return false;
});
});[/js]
Nu hoor je een alert-box te krijgen wanneer je op "Voeg menu item toe" klikt.

PS: Ik heb de status van deze vraag aangepast naar "Niet opgelost"

martinmeijer · 9 jul 2013

Bedankt voor je geduld

Ik heb nu 2 delen javascript die ik gebruik, 1 gedeelte voegt de javascript toe waar ik eigenlijk dus ook de herbouw van het menu wil maken. Echter als ik dat doe dan gaat het dus niet goed, maar ik ga dit zo nog eens testen. Dat staat dan in de JS code van de lightbox

De timeout heb ik gedaan ooit als test omdat ik die waarde pas later kreeg toen heb ik er een vertraging in gezet omdat ik dacht dat hij te weinig tijd had om en toe te voegen en daarna de data weer op te halen, dit heb ik al weer aangepast zonder de timeout function

De trigger klopt, die viel mij later ook op

Ik ga dit even allemaal testen en dan laat ik mijn bevindingen even weten!

Nogmaals mijn dank voor je goede uitleggen en je geduld

martinmeijer · 9 jul 2013

Ok nu even zoals ik het graag zou willen zien, maar hoe hij niet mijn data update

1. Het gaat om een lightbox die ik op die pagina heb staan (status: OK)
2. De verwerking van de form moet zonder page refresh data in de database invoeren (status: OK)
3. Na verwerking moet de select menu rebuild worden met de nieuwe data (status: DOWN)

Punt 3 gaat nog niet goed dus, als ik de javascript die ik ervoor wil gebruiken in het bestand zelf neerzet zoals ik dit in mijn laatste post liet zien (waardoor jij het idee had dat er niks verzonden wordt naar de database klopt omdat dit dus in de code van de lightbox gebeurd). De opties die gegeven zijn heb ik getest te proberen, wat hij dan doet is het volgende

1. Lightbox openen (status: OK)
2. Data toevoegen aan database (status: OK)
3. Rebuilden van selectmenu doet hij wel, alleen pakt hij niet gelijk de nieuwste invoer op maar die daarvoor
Dus als ik nu "Test" invoer als eerste doet hij niks maar rebuild hij wel en geeft hij de juiste data ook
Voer ik daarna gelijk "Test1" toe dan rebuild hij ook dan voegt hij alleen "Test" toe
4. Sluiten lightbox (status: OK)

PS: Ik heb het idee dat er 1 bericht mist, of ik moet dat verkeerd gezien hebben

De pagina waar het op gebeurd met tabel

HTML:

<!-- Add needed Boxes for this page -->
<?PHP
include("./boxes/menu.php");
?>

<!-- Here goes the content. -->
<section id="content" class="container_12 clearfix" data-sort=true>
    
    <div class="grid_12">
        <div id="return_message"></div>
    </div>

    <div class="grid_12">

		<div class="box">
		
			<div class="header">
				<h2>Menu beheer</h2>
			</div>
			
			<div class="content">
			
				<div class="tabletools">
					<div class="left">
						<a class="open-add-menu-dialog" href="javascript:void(0);"><i class="icon-plus"></i>Nieuw Menu Item</a>
					    <a href="javascript:void(0);"><i class="icon-pencil"></i>Edit</a>
    					<a href="javascript:void(0);"><i class="icon-remove"></i>Delete</a>
                    </div>

                    <div class="right">
    					
    				</div>
				</div>
                
				<table id="menuItemTable" class="dynamic styled with-prev-next" data-show-Filter-Bar="true" data-table-tools='{"display":true}'>
                    <thead>
						<tr>
                            <th style="width: 29px;"></th>
							<th>Menu Item Naam</th>
							<th>Menu Item Alt</th>
							<th>Submenu?</th>
							<th>Submenu van</th>
						</tr>
					</thead>
					<tbody >
						<?PHP
                        // Get all the menu items
                        $cMenu  = new menu;
                        echo $cMenu->showMenuItemsTable();
                        ?>
					</tbody>
				</table>
                
			</div><!-- End of .content -->
			
		</div><!-- End of .box -->
	</div><!-- End of .grid_12 -->

</section><!-- End of #content -->

Mijn code van de lightbox is:

HTML:

<?PHP
// Include needed classes for this specific file
include(BASE_DOC."classes/cls.secure.php");
include(BASE_DOC."admin/classes/cls.menu.php");
?>
<script type="text/javascript"> 
// Everything within this function wil be executed if the page is ready with loading
$(document).ready(function()
{
    reloadMenuItemSelect();
});

function reloadMenuItemSelect()
{
    var SITE_URL_ADMIN      = "http://martin.eenwittekerst.nl/admin/";
    var JSONurl             = SITE_URL_ADMIN+"/reloads/menuItems.php";
    
    // Gat data with JSON
    $.getJSON(JSONurl, {cache: false}, function(data){
        
        // Empty yhe select menu
        $("#sub_off").html('');
        
        // De JSON array omzetten naar een string                    
        $.each(data, function(index,item)
        {
           // Rebuild the selectmenu with new data
           $("#sub_off").append("<option value='"+item.idoff+"'>" + item.name + "</option>");
        });
 
    });
    
    // Now actually update the select menu with the fresh data    
    $("#sub_off").trigger("liszt:updated");
}
</script>
<!-- Add New Menu Item dialogbox -->
<div style="display: none;" id="dialog_add_menu" title="Voeg een nieuw menu item toe">

    <fieldset id="addMenu">
    
        <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">Maak een keuze</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="test">
                        <select name="sub_off" id="sub_off">
                            <option value="0">Maak een keuze</option>
    					</select>
                    </div>
                </div>
            </div>            
        </form>
        <div class="actions">
            <div class="left">
                <button class="grey cancel">Annuleren</button>
            </div>
            <div class="right">
                <button type="submit" name="addMenu" class="submit">Voeg menu item toe</button><!--  onclick="timeOut(reloadMenuItemSelect());" -->
            </div>
        </div>
    
    </fieldset>
</div>
<!-- End if #dialog_add_menu -->

De Javascript code is:

HTML:

var SITE_URL_ADMIN    = "http://martin.eenwittekerst.nl/admin/";



$$.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&"+$("#menu").serialize(),
                
                success: function(msg)
                {
                    // JSON url for the reload script of the select menu
                    var JSONurl             = SITE_URL_ADMIN+"/reloads/menuItems.php";
                    
                    // Return the message of the PHP script thats adding the menu item
                    $("#return_message").html(msg);
                    
                    // Gat data with JSON
                    $.getJSON(JSONurl, {cache: false}, function(data){
                        
                        // Empty yhe select menu
                        $("#sub_off").html('');
                        
                        // De JSON array omzetten naar een string                    
                        $.each(data, function(index,item)
                        {
                           // Rebuild the selectmenu with new data
                           $("#sub_off").append("<option value='"+item.idoff+"'>" + item.name + "</option>");
                        });
                 
                    });
                    
                    // Now actually update the select menu with the fresh data    
                    $("#sub_off").trigger("liszt:updated");
                }
            });
            
            $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;
    });
});

De code zoals ik het nu heb is zoals in het begin van de topic is mijn vermoeden, maar ik denk dat het voor mij even goed is om dit even op deze manier aan te dragen om een goede inzicht te geven. Omdat ik het toch niet helemaal klaar krijg om alles binnen dezelfde code te krijgen maar wel als ik dit in een aparte JS function zet

Misschien ligt het aan mij hoor dat ik het niet goed snap om de juiste code op de juiste manier te krijgen, nogmaals bedankt voor je geduld en uitleg waar ik veel aan heb.

Bij deze ook even de code zoals het wel werkt voor mij, ik moet de timeout helaas wel gebruiken, doe ik het zonder de timeout dan pakt hij de laatste invoer niet op, ik heb dit net getest om mijn code schoner te houden

De pagina waar het op gebeurd met tabel

HTML:

<!-- Add needed Boxes for this page -->
<?PHP
include("./boxes/menu.php");
?>

<!-- Here goes the content. -->
<section id="content" class="container_12 clearfix" data-sort=true>
    
    <div class="grid_12">
        <div id="return_message"></div>
    </div>

    <div class="grid_12">

		<div class="box">
		
			<div class="header">
				<h2>Menu beheer</h2>
			</div>
			
			<div class="content">
			
				<div class="tabletools">
					<div class="left">
						<a class="open-add-menu-dialog" href="javascript:void(0);"><i class="icon-plus"></i>Nieuw Menu Item</a>
					    <a href="javascript:void(0);"><i class="icon-pencil"></i>Edit</a>
    					<a href="javascript:void(0);"><i class="icon-remove"></i>Delete</a>
                    </div>

                    <div class="right">
    					
    				</div>
				</div>
                
				<table id="menuItemTable" class="dynamic styled with-prev-next" data-show-Filter-Bar="true" data-table-tools='{"display":true}'>
                    <thead>
						<tr>
                            <th style="width: 29px;"></th>
							<th>Menu Item Naam</th>
							<th>Menu Item Alt</th>
							<th>Submenu?</th>
							<th>Submenu van</th>
						</tr>
					</thead>
					<tbody >
						<?PHP
                        // Get all the menu items
                        $cMenu  = new menu;
                        echo $cMenu->showMenuItemsTable();
                        ?>
					</tbody>
				</table>
                
			</div><!-- End of .content -->
			
		</div><!-- End of .box -->
	</div><!-- End of .grid_12 -->

</section><!-- End of #content -->

Code van de lightbox (Werkend):

HTML:

<?PHP
// Include needed classes for this specific file
include(BASE_DOC."classes/cls.secure.php");
include(BASE_DOC."admin/classes/cls.menu.php");
?>
<script type="text/javascript"> 
var SITE_URL_ADMIN      = "http://martin.eenwittekerst.nl/admin/";
var JSONurlMenu         = SITE_URL_ADMIN+"/reloads/menuItems.php";

$.getJSON(JSONurlMenu, {cache: false}, function(dataOfMenu){
                                    
    $.each(dataOfMenu, function(indexes,itemMenuData) {

       $("#sub_off").append("<option value='"+itemMenuData.idoff+"'>" + itemMenuData.name + "</option>").trigger("liszt:updated");
       
    });
    
    $("#sub_off").trigger("liszt:updated");

});

function reloadMenuItemSelect()
{
    var SITE_URL_ADMIN      = "http://martin.eenwittekerst.nl/admin/";
    var JSONurl             = SITE_URL_ADMIN+"/reloads/menuItems.php";
    
    // Het ophalen van de JSON data
    $.getJSON(JSONurl, {cache: false}, function(data){
        
        // Legen van de select menu
        document.getElementById("sub_off").options.length	= 0;
        
        // De JSON array omzetten naar een string                    
        $.each(data, function(index,item)
        {
           // De <select> menu herbouwen met nieuwe data
           $("#sub_off").append("<option value='"+item.idoff+"'>" + item.name + "</option>");
        });
 
    });
    
    $("#sub_off").trigger("liszt:updated");
}

function timeOut()
{
    setTimeout('reloadMenuItemSelect()', 1000);   
}
</script>
<!-- Add New Menu Item dialogbox -->
<div style="display: none;" id="dialog_add_menu" title="Voeg een nieuw menu item toe">

    <fieldset id="addMenu">
    
        <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">Maak een keuze</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="test">
                        <select name="sub_off" id="sub_off">
                            <option value="0">Maak een keuze</option>
    					</select>
                    </div>
                </div>
            </div>            
        </form>
        <div class="actions">
            <div class="left">
                <button class="grey cancel">Annuleren</button>
            </div>
            <div class="right">
                <button type="submit" class="submit" onclick="timeOut(reloadMenuItemSelect());">Voeg menu item toe</button>
            </div>
        </div>
    
    </fieldset>
</div>
<!-- End if #dialog_add_menu -->

Code Javascript (Werkend inclusief code voor update van mijn tabel in de backoffice):

HTML:

var SITE_URL_ADMIN    = "http://martin.eenwittekerst.nl/admin/";

$$.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&"+$("#menu").serialize(),
                
                success: function(msg)
                {
                    $("#return_message").html(msg);
                    
                    renewMenuItemTable();
                }
            });
            
            $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;
    });
});

function loadMenuItemTable()
{
    var SITE_URL_ADMIN      = "http://martin.eenwittekerst.nl/admin/";
    var filename            = SITE_URL_ADMIN+"/reloads/menuItemTable.php";
    
    $.ajax
    ({
        type: "GET",
        url: filename,
        data: "",
        
        success: function(msg)
        {
            $("#menuItemTable").html(msg);
        }
    });
}

function renewMenuItemTable()
{
    var SITE_URL_ADMIN      = "http://martin.eenwittekerst.nl/admin/";
    var filename            = SITE_URL_ADMIN+"/reloads/getLatestMenuItems.php";
    
            $('#menuItemTable').dataTable().fnClearTable();
            
            $.getJSON(filename, {cache: false}, function(tableData)
            {
                $.each(tableData, function(index,tableItems)
                {
                    $('#menuItemTable').dataTable().fnAddData( [
                        '<input type="checkbox" name="menuItemId[]">',                    
                        tableItems.name,
                        tableItems.altmenu,
                        tableItems.subvalue,
                        tableItems.suboff]
                    );
                });
    });
}

martinmeijer · 9 jul 2013

Er valt mij nu wel iets op nu ik in mijn code de tabel ook laat updaten, dit is het volgende

Als ik de code zo maak zoals ik het graag wil hebben zie mijn eerste codes van mijn laatste bericht!

Hij update de waardes in mijn tabel wel goed, echter omdat mijn selectie menu denk ik in een lightbox en/of gebruikt maakt van de validate of andere JS voor de form staat (mijn vermoeden) update hij eigenlijk de waarde daar later zie uitleg punt 3

"3. Rebuilden van selectmenu doet hij wel, alleen pakt hij niet gelijk de nieuwste invoer op maar die daarvoor
Dus als ik nu "Test" invoer als eerste doet hij niks maar rebuild hij wel en geeft hij de juiste data ook
Voer ik daarna gelijk "Test1" toe dan rebuild hij ook dan voegt hij alleen "Test" toe"

Terwijl ik eigenlijk dezelfde code gebruik om de tabel te updaten die ik gewoon in het scherm zie dit wel goed gebeurd...

Dus het hoort wel te werken zoals ik het bedoeld heb, alleen de laatste toegevoegde waarde voor het selectiemenu in de lightbox voegt hij niet toe en dat doet hij in de tabel wel weer

martinmeijer · 9 jul 2013

Inmiddels heb ik mijn code allemaal in de juiste bestanden staan, en heb ik het nu anders gedaan maar gaat het nog vreemd. Zie de notities in mijn javascript op regel 8

Javascript code:

HTML:

var SITE_URL_ADMIN    = "http://martin.eenwittekerst.nl/admin/";

$(document).ready(function()
{
    reloadMenuItemSelect();
    
    $("button.submit").click(function() {
        // I need to use the setTimeout overhere and on rule 38 otherwise it's reloading the selectmenu to fast and if i dont use this funtion double overhere and at rule 38 still the same problem, the problem thats occuring without the setTimeout function is that it doesn't show the latest input
        setTimeout('reloadMenuItemSelect()', 1000);
    });
});

$$.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');


            var filename        = SITE_URL_ADMIN+"/requests/menu.php";
            
            $.ajax
            ({
                type: "POST",
                url: filename,
                data: "do=add&"+$("#menu").serialize(),
                
                success: function(msg)
                {
                    $("#return_message").html(msg);
                    
                    renewMenuItemTable();
                    reloadMenuItemSelect();
                }
            });
            
            $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;
    });
});

function reloadMenuItemSelect()
{
    var SITE_URL_ADMIN      = "http://martin.eenwittekerst.nl/admin/";
    var JSONurl             = SITE_URL_ADMIN+"/reloads/menuItems.php";

    // Het ophalen van de JSON data
    $.getJSON(JSONurl, {cache: false}, function(data){
        
        // Legen van de select menu
        document.getElementById("sub_off").options.length	= 0;
        
        // De JSON array omzetten naar een string                    
        $.each(data, function(index,item)
        {
            //alert(item.name);
           // De <select> menu herbouwen met nieuwe data
           $("#sub_off").append("<option value='"+item.idoff+"'>" + item.name + "</option>");
        });
 
    });
    
    $("#sub_off").trigger("liszt:updated");
}

function renewMenuItemTable()
{
    var SITE_URL_ADMIN      = "http://martin.eenwittekerst.nl/admin/";
    var filename            = SITE_URL_ADMIN+"/reloads/getLatestMenuItems.php";
    
    $('#menuItemTable').dataTable().fnClearTable();
    
    $.getJSON(filename, {cache: false}, function(tableData)
    {
        $.each(tableData, function(index,tableItems)
        {
            $('#menuItemTable').dataTable().fnAddData( [
                '<input type="checkbox" name="menuItemId[]">',                    
                tableItems.name,
                tableItems.altmenu,
                tableItems.subvalue,
                tableItems.suboff]
            );
        });

    });
}

Menu Lightbox

HTML:

<?PHP
// Include needed classes for this specific file
include(BASE_DOC."classes/cls.secure.php");
include(BASE_DOC."admin/classes/cls.menu.php");
?>

<!-- Add New Menu Item dialogbox -->
<div style="display: none;" id="dialog_add_menu" title="Voeg een nieuw menu item toe">

    <fieldset id="addMenu">
    
        <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">Maak een keuze</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="test">
                        <select name="sub_off" id="sub_off">
                            <option value="0">Maak een keuze</option>
    					</select>
                    </div>
                </div>
            </div>            
        </form>
                        
        <div class="actions">
            <div class="left">
                <button class="grey cancel">Annuleren</button>
            </div>
            <div class="right">
                <button id="addMenu" type="submit" class="submit">Toevoegen</button>
            </div>
        </div>
    
    </fieldset>
</div>
<!-- End if #dialog_add_menu  onclick="timeOut(reloadMenuItemSelect());" -->

Menu Pagina

HTML:

<!-- Add needed JS for this page -->
<script src="js/menu.js"></script>

<!-- Here goes the content. -->
<section id="content" class="container_12 clearfix" data-sort=true>
    
    <!-- Add needed Boxes for this page -->
    <?PHP
    include("./boxes/menuBox.php");
    ?>
    
    <div class="grid_12">
        <div id="return_message"></div>
    </div>

    <div class="grid_12">

		<div class="box">
		
			<div class="header">
				<h2>Menu beheer</h2>
			</div>
			
			<div class="content">
			
				<div class="tabletools">
					<div class="left">
						<a class="open-add-menu-dialog" href="javascript:void(0);"><i class="icon-plus"></i>Nieuw Menu Item</a>
					    <a href="javascript:void(0);"><i class="icon-pencil"></i>Edit</a>
    					<a href="javascript:void(0);"><i class="icon-remove"></i>Delete</a>
                    </div>

                    <div class="right">
    					
    				</div>
				</div>
                
				<table id="menuItemTable" class="dynamic styled with-prev-next" data-show-Filter-Bar="true" data-table-tools='{"display":true}'>
                    <thead>
						<tr>
                            <th style="width: 29px;"></th>
							<th>Menu Item Naam</th>
							<th>Menu Item Alt</th>
							<th>Submenu?</th>
							<th>Submenu van</th>
						</tr>
					</thead>
					<tbody >
						<?PHP
                        // Get all the menu items
                        $cMenu  = new menu;
                        echo $cMenu->showMenuItemsTable();
                        ?>
					</tbody>
				</table>
                
			</div><!-- End of .content -->
			
		</div><!-- End of .box -->
	</div><!-- End of .grid_12 -->

</section><!-- End of #content -->

Tha Devil · 19 jul 2013

De hoeveelheid code (en afhankelijkheden) maakt het lastig hier eenvoudig op te reageren

Als het updaten van de dropdown niet goed gaat dan zit het waarschijnlijk in die functie, probeer dit eens:
[js]
function reloadMenuItemSelect()
{
var SITE_URL_ADMIN = "http://martin.eenwittekerst.nl/admin/";
var JSONurl = SITE_URL_ADMIN+"/reloads/menuItems.php";

// Het ophalen van de JSON data
$.getJSON(JSONurl, {cache: false}, function(data){

// Legen van de select menu
$("#sub_off").html('');

// De JSON array omzetten naar een string
$.each(data, function(index,item)
{
//alert(item.name);
// De <select> menu herbouwen met nieuwe data
$("#sub_off").append("<option value='"+item.idoff+"'>" + item.name + "</option>");
});

});

$("#sub_off").trigger("liszt:updated");
}[/js]

Controleer anders met element inspecteren of de daadwerkelijke select wel wordt geüpdatet.
Wanneer die wel de juiste data bevat dan zit het hem in de Chosen-plugin.

Is dat niet het geval dan zit het probleem in de JSON-generatie.

Probleem Autoupdate <select> menu met jQuery en JSON

martinmeijer

Gebruiker

Tha Devil

Moderator

martinmeijer

Gebruiker

Tha Devil

Moderator

martinmeijer

Gebruiker

martinmeijer

Gebruiker

Tha Devil

Moderator

martinmeijer

Gebruiker

martinmeijer

Gebruiker

Tha Devil

Moderator

martinmeijer

Gebruiker

Tha Devil

Moderator

martinmeijer

Gebruiker

martinmeijer

Gebruiker

martinmeijer

Gebruiker

martinmeijer

Gebruiker

Tha Devil

Moderator

Nieuwste berichten

Wij waarderen jouw privacy