php in jquery bij post en vanuit database

klaaspeter · 29 apr 2012

Hallo

ik hoop dat jullie mij kunnen helpen. Ik heb een jquery script dat werkt. Dit script zorgt ervoor dat op basis van een dropdown de eerst volgende dropdown wordt getoont.

Alleen nu komt het gedeelte dat ik niet voor elkaar krijg, op het moment dat er een post plaats vind en ik keur deze af dan moet moeten bijde select opties er weer komen te staan dit gebeurd niet. Ik moet eerst weer opnieuw mijn eerste selectie maken. Dit moet ook bij het ophalen van de gegevens vanuit de database maar dit zal het zelfde zijn.

Dus kort gezegd er moet php in mijn script komen zodat mijn tweede select optie zichtbaar komt. Pagina wordt altijd opnieuw geladen bij submit

mijn code is als volgt:

[JS] $(document).ready(function(){

$("#zaal1").slideUp("fast");
$("#zaal2").slideUp("fast");
$("#zaal3").slideUp("fast");
$("#locatie").change(function(){

if($(this).val() == "Selecteer" ) {

$("#zaal1").slideUp("fast"); //Slide Down Effect
$("#zaal2").slideUp("fast");
$("#zaal3").slideUp("fast");

}

else if ($(this).val() == "locatie1" ) {

$("#zaal1").slideDown("fast"); //Slide Down Effect
$("#zaal2").slideUp("fast");
$("#zaal3").slideUp("fast");

} else if ($(this).val() == "locatie2" ){
$("#zaal1").slideUp("fast")
$("#zaal2").slideDown("fast"); //Slide Up Effect
$("#zaal3").slideUp("fast");

} else if ($(this).val() == "locatie3" ){
$("#zaal1").slideUp("fast")
$("#zaal2").slideUp("fast"); //Slide Up Effect
$("#zaal3").slideDown("fast");
}
});

})[/JS]

Alvast bedankt!

grumbkow · 30 apr 2012

Eerlijk gezegd snap ik niets van je vraag. De code heeft het nergens over een 'post'?

Jij weet wat de website doet dus voor jou klinkt het misschien heel logisch maar een online voorbeeld zou erg handig zijn.
Probeer alles wat duidelijker te formuleren want we kunnen zo niet bedenken wat je nou wilt.

michaelbeersnl · 2 mei 2012

Post een volledige code anders kunnen we niet helpen

De eerste opmerking die ik nu al zie is waarom gebruik je geen switch statement?
Verder is het zijn er nog wel een aantal dingen te verbeteren maar daarvoor heb ik eerst een volledige code nodig

Code:

switch( $(this).val() )
{
   case 'locatie1':
        $("#zaal1").slideDown("fast");
        $("#zaal2,#zaal3).slideUp("fast");
   break;
   default:
        $("#zaal1,#zaal2,#zaal3").slideUp("fast");
   break;
}

klaaspeter · 2 mei 2012

Hierbij mij gehele code met het aanroepen van database enzo. Hierin heb ik wel het aanroepen van het jquery eruit gelaten dit gebeurd op een andere plaats. Hoop dat dit voldoende is om mij te helpen. Bedankt voor de tip van switch, heb ik nog niet in de onderstaande code zitten.

Code:

<?php
if ($_POST['submit'] == "Update activiteit") {
    $idactiviteit = $_POST['idactiviteit'];
} else {
    $idactiviteit = $_POST['idactiviteit'];
}


$title = __('activiteit bewerken');

function add_js() {
    ?>
    <script type="text/javascript">
        $(function() {
            $( "#datepicker" ).datepicker(
            {showButtonPanel: true,
                minDate: -0
                        
            }    
        );
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
                                 
 
            $("#plaats1").slideUp("fast");
            $("#plaats2").slideUp("fast");
            $("#plaats3").slideUp("fast");
            $("#locatie").change(function(){
                
                if($(this).val() == "Selecteer" ) {
                                 
                    $("#zaal1").slideUp("fast"); //Slide Down Effect
                    $("#zaal2").slideUp("fast");
                    $("#zaal3").slideUp("fast");
                                 
                }
                                 
                else if ($(this).val() == "locatie1" ) {
                                        
                                        
                                 
                    $("#zaal1").slideDown("fast"); //Slide Down Effect
                    $("#zaal2").slideUp("fast");
                    $("#zaal3").slideUp("fast");
                                 
                } else if ($(this).val() == "locatie2" ){
                    $("#zaal1").slideUp("fast")
                    $("#zaal2").slideDown("fast");    //Slide Up Effect
                    $("#zaal3").slideUp("fast");
                                 
                } else if ($(this).val() == "locatie3" ){
                    $("#zaal1").slideUp("fast")
                    $("#zaal2").slideUp("fast");    //Slide Up Effect
                    $("#zaal3").slideDown("fast");
                }
            });
                                 
        })
    </script>
    <?php
}

add_action('admin_head', 'add_js');



if (isset($_POST['submit']) == 'Update activiteit') {
    $activiteit = mysql_real_escape_string($_POST['activiteit']);
    $locatie = mysql_real_escape_string($_POST['locatie']);
    $aantalmensen = mysql_real_escape_string($_POST['aantalmensen']);
    $begintijd = mysql_real_escape_string($_POST['begintijden']);
    $eindtijd = mysql_real_escape_string($_POST['eindtijden']);
    $datum = mysql_real_escape_string($_POST['datumactiviteit']);
    $zaal1 = mysql_real_escape_string($_POST['zaal1']);
    $zaal2 = mysql_real_escape_string($_POST['zaal2']);
    $zaal3 = mysql_real_escape_string($_POST['zaal3']);
    if ($zaal1 != "Selecteer") {
        $zaal = $zaal1;
    } elseif ($zaal2 != "Selecteer") {
        $zaal = $zaal2;
    } elseif ($zaal3 != "Selecteer") {
        $zaal = $zaal3;
    } else {
        $zaal = "";
    }

    $query = "UPDATE table1 SET 
  activiteit_naam='$activiteit',
  activiteit_locatie='$locatie',
  activiteit_zaal='$zaal',
  activiteit_aantalbezoekers='$aantalmensen',
  activiteit_begintijd='$begintijd',
  activiteit_eindtijd='$eindtijd',
  activiteit_datum='$datum' WHERE
  id_activiteit='$idactiviteit'";
    $result = mysql_query($query);
}



//print "<pre>";
//print print_r($_POST);
//print "</pre>";

$query = "SELECT * FROM table1 WHERE id_activiteit='$idactiviteit' ";
$result = mysql_query($query);

$row = mysql_fetch_array($result);

$locatie = $row['activiteit_locatie'];
$naam = $row['activiteit_naam'];
$aantalmensen = $row['activiteit_aantalbezoekers'];
$begintijd = $row['activiteit_begintijd'];
$eindtijd = $row['activiteit_eindtijd'];
$datum = $row['activiteit_datum'];
$zaal = $row['activiteit_zaal'];

$begintijd = substr($row['activiteit_begintijd'], 0, 5);
$eindtijd = substr($row['activiteit_eindtijd'], 0, 5);

?>

<div class="wrap">
    <?php screen_icon(); ?>
    <h2><?php echo esc_html($title); ?></h2>

    <form method="post" action="activiteitupdaten.php">
        <?php settings_fields('activiteitupdaten'); ?>

        <table class="form-table">
            <tr valign="top">
                <th scope="row"><label for="activiteit"><?php _e('Naam activiteit') ?><span class="description"><?php _e('(required)'); ?></span></label></th>
                <td><input name="activiteit" type="text" id="activiteit" value="<?php echo $naam; ?>" class="regular-text" /></td>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="locatie"><?php _e('Locatie') ?><span class="description"><?php _e('(required)'); ?></span></label></th>
                <td><select name="locatie" id="locatie"><option>Selecteer</option><option <?php if ($locatie == 'locatie1') echo 'selected'; ?> >Locatie1</option><option <?php if ($locatie == 'locatie2') echo 'selected'; ?>>Locatie2</option><option <?php if ($locatie == 'locatie3') echo 'selected'; ?>>Locatie3</option></select>
                    <span class="description"><?php _e('Selecteer de locatie.') ?></span></td>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="zaal"><?php _e('Zaal') ?><span class="description"><?php _e('(required)'); ?></span></label></th>
                <td>
                    <div id="zaal1"><select name="zaal1" ><option value="Selecteer"<?php if ($zaal == "Selecteer") echo "selected"; ?>>Selecteer</option><option value="groot"<?php if ($zaal == "groot") echo "selected"; ?>>Groot</option></select></div>
                    <div id="zaal2"><select name="zaal2" ><option value="Selecteer" <?php if ($zaal == "Selecteer") echo "selected"; ?>>Selecteer</option><option value="naamzaal" <?php if ($zaal == "naamzaal") echo "selected"; ?>>Naam zaal</option></select></div>
                    <div id="zaal3"><select name="zaal3" ><option value="Selecteer" <?php if ($zaal == "Selecteer") echo "selected"; ?>>Selecteer</option><option value="kleinezaal" <?php if ($zaal == "kleinezaal") echo "selected"; ?>>Kleinezaal</option></select></div>

                </td>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="aantalmensen"><?php _e('Aantal bezoekers') ?></label></th>
                <td><input name="aantalmensen" type="text" id="aantalmensen" value="<?php echo $aantalmensen; ?>" class="regular-text" /></td>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="tijden"><?php _e('Tijd activiteit') ?><span class="description"><?php _e('(required)'); ?></span></label></th>
                <td>Van
                    <select name="begintijden" id="begintijden">
                        <?php
                        echo "<option value='$begintijd'>$begintijd</option>";
                        for ($x = 730; $x < 1815; $x = ($x + 15)) {
                            if ($x < 1000) {
                                $val = '0' . $x;
                            }else
                                $val = $x;
                            $thistime = substr($val, 0, 2) . ":" . substr($val, 2, 2);
                            echo "<option value='" . $thistime . "'>" . $thistime . "</option>";
                            if (substr($val, 2, 2) == '45') {
                                $x = ($x + 40);
                            }//end if
                        }//end for
                        ?>
                    </select> t/m     <select name="eindtijden" id="eindtijden">
                        <?php
                        echo "<option value='$eindtijd'>$eindtijd</option>";
                        for ($x = 730; $x < 1815; $x = ($x + 15)) {
                            if ($x < 1000) {
                                $val = '0' . $x;
                            }else
                                $val = $x;
                            $thistime = substr($val, 0, 2) . ":" . substr($val, 2, 2);
                            echo "<option value='" . $thistime . "'>" . $thistime . "</option>";
                            if (substr($val, 2, 2) == '45') {
                                $x = ($x + 40);
                            }//end if
                        }//end for
                        ?>
                    </select>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="dag"><?php _e('Dag') ?><span class="description"><?php _e('(required)'); ?></span></label></th>
                <td>
                    <input id="datepicker" name="datumactiviteit" type="text" value="<?php echo $datum; ?>">
                    </td>
            </tr>
        </table>
<input type="hidden" name="idactiviteit" value="<?php echo $idactiviteit; ?>" />
        <p class="submit"><input type="submit" name="submit" id="submit" class="button-primary" value="update activiteit"  /></p>
    </form>
</div>

michaelbeersnl · 2 mei 2012

Aan de syntax zie ik dat het WordPress is...
Alleen laat hij de JS niet zin in de bron of functioneert de JS gewoon niet zoals het hoort?
Hier iedergeval een stukje geoptimaliseerde code (niet getest)

PHP:

<?php
if ($_POST['submit'] == "Update activiteit") {
    $idactiviteit = $_POST['idactiviteit'];
} else {
    $idactiviteit = $_POST['idactiviteit'];
}


$title = __('activiteit bewerken');

function add_js() {
    ?>
    <script type="text/javascript">
        $(function() {
            $( "#datepicker" ).datepicker(
            {showButtonPanel: true,
                minDate: -0
                        
            }    
        );
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function()
		{
			var zalen = $('#zalen'); //slaat de ID zalen op in de DOM
			var locatie = $('#locatie'); //slat de locatie op in de DOM
			
			//zoeken in #zalen naar alle div met de klasse zaal
			zalen.find('div.zaal').each(function()
			{
				$(this).hide();
			});
			
			//de on() functie is sneller change(), click() etc. 
			//roepen namelijk allemaal de on() functie aan
			locatie.on('change', function()
			{
				var value = $(this).val();
				
				//zoekenin #zalen naar alle divs met de klasse zaal
				//deze naar boven sliden stop() zorgt dat alle animaties die bezig zijn in het element stoppen
				zalen.find('div.zaal').stop().slideUp(200);
				
				//switch de waarde
				//de delay(200) is ervoor om te zorgen dat de animatie van de slideUp niet raar doet
				switch (value)
				{
					default:
					case 'locatie1':
						zalen.find('div#zaal1').delay(200).slideDown(200);
					break;
					case 'locatie2':
						zalen.find('div#zaal2').delay(200).slideDown(200);
					break;
					case 'locatie3':
						zalen.find('div#zaal3').delay(200).slideDown(200);
					break;
				}
			});
        });
    </script>
    <?php
}

add_action('admin_head', 'add_js');



if (isset($_POST['submit']) == 'Update activiteit') {
    $activiteit = mysql_real_escape_string($_POST['activiteit']);
    $locatie = mysql_real_escape_string($_POST['locatie']);
    $aantalmensen = mysql_real_escape_string($_POST['aantalmensen']);
    $begintijd = mysql_real_escape_string($_POST['begintijden']);
    $eindtijd = mysql_real_escape_string($_POST['eindtijden']);
    $datum = mysql_real_escape_string($_POST['datumactiviteit']);
    $zaal1 = mysql_real_escape_string($_POST['zaal1']);
    $zaal2 = mysql_real_escape_string($_POST['zaal2']);
    $zaal3 = mysql_real_escape_string($_POST['zaal3']);
    if ($zaal1 != "Selecteer") {
        $zaal = $zaal1;
    } elseif ($zaal2 != "Selecteer") {
        $zaal = $zaal2;
    } elseif ($zaal3 != "Selecteer") {
        $zaal = $zaal3;
    } else {
        $zaal = "";
    }

    $query = "UPDATE table1 SET 
  activiteit_naam='$activiteit',
  activiteit_locatie='$locatie',
  activiteit_zaal='$zaal',
  activiteit_aantalbezoekers='$aantalmensen',
  activiteit_begintijd='$begintijd',
  activiteit_eindtijd='$eindtijd',
  activiteit_datum='$datum' WHERE
  id_activiteit='$idactiviteit'";
    $result = mysql_query($query);
}



//print "<pre>";
//print print_r($_POST);
//print "</pre>";

$query = "SELECT * FROM table1 WHERE id_activiteit='$idactiviteit' ";
$result = mysql_query($query);

$row = mysql_fetch_array($result);

$locatie = $row['activiteit_locatie'];
$naam = $row['activiteit_naam'];
$aantalmensen = $row['activiteit_aantalbezoekers'];
$begintijd = $row['activiteit_begintijd'];
$eindtijd = $row['activiteit_eindtijd'];
$datum = $row['activiteit_datum'];
$zaal = $row['activiteit_zaal'];

$begintijd = substr($row['activiteit_begintijd'], 0, 5);
$eindtijd = substr($row['activiteit_eindtijd'], 0, 5);

?>

<div class="wrap">
    <?php screen_icon(); ?>
    <h2><?php echo esc_html($title); ?></h2>

    <form method="post" action="activiteitupdaten.php">
        <?php settings_fields('activiteitupdaten'); ?>

        <table class="form-table">
            <tr valign="top">
                <th scope="row"><label for="activiteit"><?php _e('Naam activiteit') ?><span class="description"><?php _e('(required)'); ?></span></label></th>
                <td><input name="activiteit" type="text" id="activiteit" value="<?php echo $naam; ?>" class="regular-text" /></td>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="locatie"><?php _e('Locatie') ?><span class="description"><?php _e('(required)'); ?></span></label></th>
                <td>
					<select name="locatie" id="locatie">
						<option>Selecteer</option>
						<option <?php if ($locatie == 'locatie1') echo 'selected'; ?> >Locatie1</option>
						<option <?php if ($locatie == 'locatie2') echo 'selected'; ?>>Locatie2</option>
						<option <?php if ($locatie == 'locatie3') echo 'selected'; ?>>Locatie3</option>
					</select>
                    <span class="description"><?php _e('Selecteer de locatie.') ?></span></td>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="zaal"><?php _e('Zaal') ?><span class="description"><?php _e('(required)'); ?></span></label></th>
                <td id="zalen">
                    <div id="zaal1" class="zaal">
						<select name="zaal1" >
							<option value="Selecteer"<?php if ($zaal == "Selecteer") echo "selected"; ?>>Selecteer</option>
							<option value="groot"<?php if ($zaal == "groot") echo "selected"; ?>>Groot</option>
						</select>
					</div>
                    <div id="zaal2" class="zaal">
						<select name="zaal2" >
							<option value="Selecteer" <?php if ($zaal == "Selecteer") echo "selected"; ?>>Selecteer</option>
							<option value="naamzaal" <?php if ($zaal == "naamzaal") echo "selected"; ?>>Naam zaal</option>
						</select>
					</div>
                    <div id="zaal3" class="zaal">
						<select name="zaal3" >
							<option value="Selecteer" <?php if ($zaal == "Selecteer") echo "selected"; ?>>Selecteer</option>
							<option value="kleinezaal" <?php if ($zaal == "kleinezaal") echo "selected"; ?>>Kleinezaal</option>
						</select>
					</div>
                </td>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="aantalmensen"><?php _e('Aantal bezoekers') ?></label></th>
                <td><input name="aantalmensen" type="text" id="aantalmensen" value="<?php echo $aantalmensen; ?>" class="regular-text" /></td>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="tijden"><?php _e('Tijd activiteit') ?><span class="description"><?php _e('(required)'); ?></span></label></th>
                <td>Van
                    <select name="begintijden" id="begintijden">
                        <?php
                        echo "<option value='$begintijd'>$begintijd</option>";
                        for ($x = 730; $x < 1815; $x = ($x + 15)) {
                            if ($x < 1000) {
                                $val = '0' . $x;
                            }else
                                $val = $x;
                            $thistime = substr($val, 0, 2) . ":" . substr($val, 2, 2);
                            echo "<option value='" . $thistime . "'>" . $thistime . "</option>";
                            if (substr($val, 2, 2) == '45') {
                                $x = ($x + 40);
                            }//end if
                        }//end for
                        ?>
                    </select> t/m     <select name="eindtijden" id="eindtijden">
                        <?php
                        echo "<option value='$eindtijd'>$eindtijd</option>";
                        for ($x = 730; $x < 1815; $x = ($x + 15)) {
                            if ($x < 1000) {
                                $val = '0' . $x;
                            }else
                                $val = $x;
                            $thistime = substr($val, 0, 2) . ":" . substr($val, 2, 2);
                            echo "<option value='" . $thistime . "'>" . $thistime . "</option>";
                            if (substr($val, 2, 2) == '45') {
                                $x = ($x + 40);
                            }//end if
                        }//end for
                        ?>
                    </select>
            </tr>
            <tr valign="top">
                <th scope="row"><label for="dag"><?php _e('Dag') ?><span class="description"><?php _e('(required)'); ?></span></label></th>
                <td>
                    <input id="datepicker" name="datumactiviteit" type="text" value="<?php echo $datum; ?>">
                    </td>
            </tr>
        </table>
<input type="hidden" name="idactiviteit" value="<?php echo $idactiviteit; ?>" />
        <p class="submit"><input type="submit" name="submit" id="submit" class="button-primary" value="update activiteit"  /></p>
    </form>
</div>

klaaspeter · 2 mei 2012

Klopt is ook wordpress maar dat maakt niet uit.

Bedankt voor de code ga er vanavond mee aan de gang en super dat je zoveel opmerkingen erbij hebt geplaatst dan kan ik het beter begrijpen!

De selectie optie deden het wel. Alleen bij invoer. dus als ik begon met een nieuwe selectie. Op het moment dat ik een activiteit uit de database deed aanroepen kreeg ik niet de select optie te zien van de zalen omdat hij locatie als niet geselecteerd zag dus daarom mijn vraag hoe krijg ik php in jquery.

Dus als deze code werkt ben ik je zeer dankbaar heb hier namelijk al lang aan lopen te vervelen maar kwam er gewoon niet uit.

Alvast bedankt!

klaaspeter · 4 mei 2012

Ik heb het getest. Het probleem is op het moment van het laden van de pagina.

Mijn eerste optie wordt locatie word getoond (dit gebeurd op basis van mijn database) alleen de zaal wordt komt niet tevoorschijn jammer genoeg

Op het moment dat ik een andere locatie selecteer werkt die wel...

Dus het probleem zit hem ergens bij het laden maar ik snap gewoon niks van javascript... Hoop dat je me nog verder opweg kan helpen

michaelbeersnl · 4 mei 2012

In dat geval zou ik dit proberen... (onderin staat de code)
Hele kleine aanpassing maar zal moeten werken :thumb:
Om JS te leren zou je de codeacedemy kunnen volgen... dit is heel uitgebreid en gaat echt de diepte in.
Want in JS is het heel belangrijk dat je goed weet wanneer er iets in de DOM gezet word en niet ivm cpu preformance

http://www.codecademy.com/

Code:

<script type="text/javascript">
    $(document).ready(function()
    {
        var zalen = $('#zalen'); //slaat de ID zalen op in de DOM
        var locatie = $('#locatie'); //slaat de locatie op in de DOM
        var curr_locatie = '<?php echo $locatie; ?>'; //slaat de huidige locatie op in de DOM        
        //zoeken in #zalen naar alle div met de klasse zaal
        zalen.find('div.zaal').each(function()
        {
        	//if ( $(this).attr('id') != curr_locatie )
        	//{
           		$(this).hide();
           	//}
        });
        
        //de on() functie is sneller change(), click() etc. 
        //roepen namelijk allemaal de on() functie aan
        locatie.on('change', function()
        {
            var value = $(this).val();
            
            //zoekenin #zalen naar alle divs met de klasse zaal
            //deze naar boven sliden stop() zorgt dat alle animaties die bezig zijn in het element stoppen
            zalen.find('div.zaal').stop().slideUp(200);
            
            //switch de waarde
            //de delay(200) is ervoor om te zorgen dat de animatie van de slideUp niet raar doet
            switch (value)
            {
                default:
                case 'locatie1':
                    zalen.find('div#zaal1').delay(200).slideDown(200);
                break;
                case 'locatie2':
                    zalen.find('div#zaal2').delay(200).slideDown(200);
                break;
                case 'locatie3':
                    zalen.find('div#zaal3').delay(200).slideDown(200);
                break;
            }
        });
        
        //de change() functie aanroepen. omdat er geen functie aan zit
        //word de change() die wel een functie heeft aangeroepen omdat deze in de DOM zit.
        //als dit niet werkt uncomment het deel in de each() functie
        locatie.change();
    });
</script>

klaaspeter · 4 mei 2012

Hey bedankt voor die website!!!!

Dat is super en op een leuke manier iets leren super bedankt! Doe vanavond naar de code kijken

klaaspeter · 5 mei 2012

Code werkt super bedankt!

php in jquery bij post en vanuit database

klaaspeter

Gebruiker

grumbkow

Gebruiker

michaelbeersnl

Gebruiker

klaaspeter

Gebruiker

michaelbeersnl

Gebruiker

klaaspeter

Gebruiker

klaaspeter

Gebruiker

michaelbeersnl

Gebruiker

klaaspeter

Gebruiker

klaaspeter

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy