data dropdown verdwijnt na submitten (onchange)
JLT - 14/03/2012 10:37 (laatste wijziging 15/03/2012 11:23)
PHP interesse
- edit -
Ik heb het script vervangen waardoor het allemaal wat overzichtelijker wordt. Het probleem is helaas hiermee niet opgelost.
In het kort: hoe zorg ik ervoor dat de content niet alleen te zien is na het veranderen van de dropdown, maar ook na bv. het laden van de pagina?
$(document).ready(function(){
$("#selectionresult").hide();
$("#selection").change( function() {
$("#selectionresult").hide();
$("#result").html('Retrieving');
$.ajax({
type: "POST",
data: "selection=" + $(this).val(),
url: "http://www.********.nl/templates/***/include/modellen.php",
success: function(msg){
if (msg != ""){
$("#selectionresult").html(msg).show();
$("#result").html("");
} else {
$("#result").html('<em>No item result</em>');
}
}
});
});
});
$( document) .ready ( function ( ) {
$( "#selectionresult" ) .hide ( ) ;
$( "#selection" ) .change ( function ( ) {
$( "#selectionresult" ) .hide ( ) ;
$( "#result" ) .html ( 'Retrieving' ) ;
$.ajax ( {
type: "POST" ,
data: "selection=" + $( this ) .val ( ) ,
url: "http://www.********.nl/templates/***/include/modellen.php" ,
success: function ( msg) {
if ( msg != "" ) {
$( "#selectionresult" ) .html ( msg) .show ( ) ;
$( "#result" ) .html ( "" ) ;
} else {
$( "#result" ) .html ( '<em>No item result</em>' ) ;
}
}
} ) ;
} ) ;
} ) ;
3 antwoorden
Gesponsorde links
vinTage - 14/03/2012 20:57
Nieuw lid
Je zult dan met iets uit de url moeten werken, evt iets met een hashtag of $_GET['...']
JLT - 15/03/2012 15:00
PHP interesse
Hoi vinTage,
Ik heb het inmiddels opgelost. Het was wel even sleutel en het is een combinatie van PHP en Jquery geworden. Hoogst waarschijnlijk een te complexe oplossing, maar omdat ik geen andere zie gebruik ik deze tot die tijd.
Hieronder het script dat ik nu gebruik:
$(document).ready(function(){
$("#selectionresult").hide();
<?php if (!isset($_POST['submit'])) { echo '$("#selection").change( function() {' ; } ?>
$("#selectionresult").hide();
$("#result").html('Retrieving');
$.ajax({
type: "GET",
data: <?php if (isset($_POST['submit'])) { echo '"selection='.$_POST['merk'].'&selection_model='.$_POST['model'].'",' ; } else { echo "\"selection=\" + $(this).val(),\n" ; } ?>
url: "http://www.***.nl/templates/***/include/modellen.php",
success: function(msg){
if (msg != ""){
$("#selectionresult").html(msg).show();
$("#result").html("");
} else {
$("#result").html('<em>No item result</em>');
}
}
<?php if (!isset($_POST['submit'])) { echo '});' ; } ?>
});
});
$(document).ready(function(){
$("#selectionresult").hide();
$("#selection").change( function() {
$("#selectionresult").hide();
$("#result").html('Retrieving');
$.ajax({
type: "GET",
data: "selection=" + $(this).val(),
url: "http://www.***.nl/templates/***/include/modellen.php",
success: function(msg){
if (msg != ""){
$("#selectionresult").html(msg).show();
$("#result").html("");
} else {
$("#result").html('<em>No item result</em>');
}
}
});
});
});
$( document) .ready ( function ( ) {
$( "#selectionresult" ) .hide ( ) ;
<? php if ( ! isset( $_POST[ 'submit' ] ) ) { echo '$("#selection").change( function() {' ; } ?>
$( "#selectionresult" ) .hide ( ) ;
$( "#result" ) .html ( 'Retrieving' ) ;
$.ajax ( {
type: "GET" ,
data: <? php if ( isset( $_POST[ 'submit' ] ) ) { echo '"selection=' .$_POST[ 'merk' ] .'&selection_model=' .$_POST[ 'model' ] .'",' ; } else { echo "\" selection=\" + $(this).val(),\n " ; } ?>
url: "http://www.***.nl/templates/***/include/modellen.php" ,
success: function ( msg) {
if ( msg != "" ) {
$( "#selectionresult" ) .html ( msg) .show ( ) ;
$( "#result" ) .html ( "" ) ;
} else {
$( "#result" ) .html ( '<em>No item result</em>' ) ;
}
}
<? php if ( ! isset( $_POST[ 'submit' ] ) ) { echo '});' ; } ?>
} ) ;
} ) ;
$( document) .ready ( function ( ) {
$( "#selectionresult" ) .hide ( ) ;
$( "#selection" ) .change ( function ( ) {
$( "#selectionresult" ) .hide ( ) ;
$( "#result" ) .html ( 'Retrieving' ) ;
$.ajax ( {
type: "GET" ,
data: "selection=" + $( this ) .val ( ) ,
url: "http://www.***.nl/templates/***/include/modellen.php" ,
success: function ( msg) {
if ( msg != "" ) {
$( "#selectionresult" ) .html ( msg) .show ( ) ;
$( "#result" ) .html ( "" ) ;
} else {
$( "#result" ) .html ( '<em>No item result</em>' ) ;
}
}
} ) ;
} ) ;
} ) ;
In eerste instantie het jquery script gebruikt (met PHP variabele voor na het posten). Dit werkte goed, maar omdat de .change functie 'uit staat' na het submitten kon ik de modellen niet meer wijzigen. Dit heb ik opgelost door het script nog een keer te laden, maar nu met .change functie. Ook send ik nu (middels GET) en voer ik twee vars mee (merk EN model). Hopelijk snapt iemand er nog wat van haha...
Als iemand een betere en subtielere oplossing heeft hoor ik het natuurlijk graag!
vinTage bedankt voor het meedenken
JLT - 15/03/2012 15:00
PHP interesse
Hoi vinTage,
Ik heb het inmiddels opgelost. Het was wel even sleutel en het is een combinatie van PHP en Jquery geworden. Hoogst waarschijnlijk een te complexe oplossing, maar omdat ik geen andere zie gebruik ik deze tot die tijd.
Hieronder het script dat ik nu gebruik:
$(document).ready(function(){
$("#selectionresult").hide();
<?php if (!isset($_POST['submit'])) { echo '$("#selection").change( function() {' ; } ?>
$("#selectionresult").hide();
$("#result").html('Retrieving');
$.ajax({
type: "GET",
data: <?php if (isset($_POST['submit'])) { echo '"selection='.$_POST['merk'].'&selection_model='.$_POST['model'].'",' ; } else { echo "\"selection=\" + $(this).val(),\n" ; } ?>
url: "http://www.***.nl/templates/***/include/modellen.php",
success: function(msg){
if (msg != ""){
$("#selectionresult").html(msg).show();
$("#result").html("");
} else {
$("#result").html('<em>No item result</em>');
}
}
<?php if (!isset($_POST['submit'])) { echo '});' ; } ?>
});
});
$(document).ready(function(){
$("#selectionresult").hide();
$("#selection").change( function() {
$("#selectionresult").hide();
$("#result").html('Retrieving');
$.ajax({
type: "GET",
data: "selection=" + $(this).val(),
url: "http://www.***.nl/templates/***/include/modellen.php",
success: function(msg){
if (msg != ""){
$("#selectionresult").html(msg).show();
$("#result").html("");
} else {
$("#result").html('<em>No item result</em>');
}
}
});
});
});
$( document) .ready ( function ( ) {
$( "#selectionresult" ) .hide ( ) ;
<? php if ( ! isset( $_POST[ 'submit' ] ) ) { echo '$("#selection").change( function() {' ; } ?>
$( "#selectionresult" ) .hide ( ) ;
$( "#result" ) .html ( 'Retrieving' ) ;
$.ajax ( {
type: "GET" ,
data: <? php if ( isset( $_POST[ 'submit' ] ) ) { echo '"selection=' .$_POST[ 'merk' ] .'&selection_model=' .$_POST[ 'model' ] .'",' ; } else { echo "\" selection=\" + $(this).val(),\n " ; } ?>
url: "http://www.***.nl/templates/***/include/modellen.php" ,
success: function ( msg) {
if ( msg != "" ) {
$( "#selectionresult" ) .html ( msg) .show ( ) ;
$( "#result" ) .html ( "" ) ;
} else {
$( "#result" ) .html ( '<em>No item result</em>' ) ;
}
}
<? php if ( ! isset( $_POST[ 'submit' ] ) ) { echo '});' ; } ?>
} ) ;
} ) ;
$( document) .ready ( function ( ) {
$( "#selectionresult" ) .hide ( ) ;
$( "#selection" ) .change ( function ( ) {
$( "#selectionresult" ) .hide ( ) ;
$( "#result" ) .html ( 'Retrieving' ) ;
$.ajax ( {
type: "GET" ,
data: "selection=" + $( this ) .val ( ) ,
url: "http://www.***.nl/templates/***/include/modellen.php" ,
success: function ( msg) {
if ( msg != "" ) {
$( "#selectionresult" ) .html ( msg) .show ( ) ;
$( "#result" ) .html ( "" ) ;
} else {
$( "#result" ) .html ( '<em>No item result</em>' ) ;
}
}
} ) ;
} ) ;
} ) ;
In eerste instantie het jquery script gebruikt (met PHP variabele voor na het posten). Dit werkte goed, maar omdat de .change functie 'uit staat' na het submitten kon ik de modellen niet meer wijzigen. Dit heb ik opgelost door het script nog een keer te laden, maar nu met .change functie. Ook send ik nu (middels GET) en voer ik twee vars mee (merk EN model). Hopelijk snapt iemand er nog wat van haha...
Als iemand een betere en subtielere oplossing heeft hoor ik het natuurlijk graag!
vinTage bedankt voor het meedenken
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.