pulldownlist moet pagina laden (ajax)

edwink1985 · 12 okt 2018

ik probeer het volgende voor erlkaar
ik wil via een pulldown list die mooi opgemaakt is een nieuwe pagina inladen
het nieuwe pagina inladen werkt als de standaard id van de <select> niet overeenkomt met de eerste javascript function de style van de pulldown list is dan standaard
maar ik $( '#cd-select' ) naar $( '#team' ) dan is de layout van de pulldownlist wel goed alleen werkt dan de onchange functie niet meer.

ik weet helaas niet wat ik fout doe kunnen jullie me helpen. ben beginner met javascript.

bij die dropdown hoort ook nog eeen .js bestand deze staat onderaan wat ik denk is dat er geen onchange meer komt waardoor de laatste niet getrikkerd word
hopelijk weten jullie een oplossing om dit goed te krijgen

PHP:

echo <div class="container>";
	echo '<select onchange="teampage(this.value)" id="team" name="team" class="cd-select">';	
		echo '<option value="-1" selected>kies je team</option>';
		echo '<option value="1" selected>optie1</option>';
		echo '<option value="2" selected>optie2</option>';
		echo '<option value="3" selected>optie3</option>';
		echo '<option value="4" selected>optie4</option>';
	echo '</select>';

HTML:

<div id="showpage"><b>geen team geselecteerd</b></div>
</div>

[JS]
<script type="text/javascript">

$( function() {

$( '#cd-select' ).dropdown( {
gutter : 5,
stack : false,
slidingIn : 100
} );

});

</script>
<script>
function teampage(str)
{
if (str == "")
{
document.getElementById("showpage").innerHTML = "";
return;
}
else
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("showpage").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","teamprogramma.php?q="+str,true);
xmlhttp.send();
}
}
</script>
[/JS]

onderste script word nog ingeladen onder de head

[JS]
;( function( $, window, undefined ) {

'use strict';

$.DropDown = function( options, element ) {
this.$el = $( element );
this._init( options );
};

// the options
$.DropDown.defaults = {
speed : 300,
easing : 'ease',
gutter : 0,
// initial stack effect
stack : true,
// delay between each option animation
delay : 0,
// random angle and positions for the options
random : false,
// rotated [right||left||false] : the options will be rotated to thr right side or left side.
// make sure to tune the transform origin in the stylesheet
rotated : false,
// effect to slide in the options. value is the margin to start with
slidingIn : false,
onOptionSelect : function(opt) { return false; }
};

$.DropDown.prototype = {

_init : function( options ) {

// options
this.options = $.extend( true, {}, $.DropDown.defaults, options );
this._layout();
this._initEvents();

},
_layout : function() {

var self = this;
this.minZIndex = 1000;
var value = this._transformSelect();
this.opts = this.listopts.children( 'li' );
this.optsCount = this.opts.length;
this.size = { width : this.dd.width(), height : this.dd.height() };

var elName = this.$el.attr( 'name' ), elId = this.$el.attr( 'id' ),
inputName = elName !== undefined ? elName : elId !== undefined ? elId : 'cd-dropdown-' + ( new Date() ).getTime();

this.inputEl = $( '<input type="hidden" name="' + inputName + '" value="' + value + '"></input>' ).insertAfter( this.selectlabel );

this.selectlabel.css( 'z-index', this.minZIndex + this.optsCount );
this._positionOpts();
if( Modernizr.csstransitions ) {
setTimeout( function() { self.opts.css( 'transition', 'all ' + self.options.speed + 'ms ' + self.options.easing ); }, 25 );
}

},
_transformSelect : function() {

var optshtml = '', selectlabel = '', value = -1;
this.$el.children( 'option' ).each( function() {

var $this = $( this ),
val = isNaN( $this.attr( 'value' ) ) ? $this.attr( 'value' ) : Number( $this.attr( 'value' ) ) ,
classes = $this.attr( 'class' ),
selected = $this.attr( 'selected' ),
label = $this.text();

if( val !== -1 ) {
optshtml +=
classes !== undefined ?
'<li data-value="' + val + '"><span class="' + classes + '">' + label + '</span></li>' :
'<li data-value="' + val + '"><span>' + label + '</span></li>';
}

if( selected ) {
selectlabel = label;
value = val;
}

} );

this.listopts = $( '<ul/>' ).append( optshtml );
this.selectlabel = $( '<span/>' ).append( selectlabel );
this.dd = $( '<div class="cd-dropdown"/>' ).append( this.selectlabel, this.listopts ).insertAfter( this.$el );
this.$el.remove();

return value;

},
_positionOpts : function( anim ) {

var self = this;

this.listopts.css( 'height', 'auto' );
this.opts
.each( function( i ) {
$( this ).css( {
zIndex : self.minZIndex + self.optsCount - 1 - i,
top : self.options.slidingIn ? ( i + 1 ) * ( self.size.height + self.options.gutter ) : 0,
left : 0,
marginLeft : self.options.slidingIn ? i % 2 === 0 ? self.options.slidingIn : - self.options.slidingIn : 0,
opacity : self.options.slidingIn ? 0 : 1,
transform : 'none'
} );
} );

if( !this.options.slidingIn ) {
this.opts
.eq( this.optsCount - 1 )
.css( { top : this.options.stack ? 9 : 0, left : this.options.stack ? 4 : 0, width : this.options.stack ? this.size.width - 8 : this.size.width, transform : 'none' } )
.end()
.eq( this.optsCount - 2 )
.css( { top : this.options.stack ? 6 : 0, left : this.options.stack ? 2 : 0, width : this.options.stack ? this.size.width - 4 : this.size.width, transform : 'none' } )
.end()
.eq( this.optsCount - 3 )
.css( { top : this.options.stack ? 3 : 0, left : 0, transform : 'none' } );
}

},
_initEvents : function() {

var self = this;

this.selectlabel.on( 'mousedown.dropdown', function( event ) {
self.opened ? self.close() : self.open();
return false;

} );

this.opts.on( 'click.dropdown', function() {
if( self.opened ) {
var opt = $( this );
self.options.onOptionSelect( opt );
self.inputEl.val( opt.data( 'value' ) );
self.selectlabel.html( opt.html() );
self.close();
}
} );

},
open : function() {
var self = this;
this.dd.toggleClass( 'cd-active' );
this.listopts.css( 'height', ( this.optsCount + 1 ) * ( this.size.height + this.options.gutter ) );
this.opts.each( function( i ) {

$( this ).css( {
opacity : 1,
top : self.options.rotated ? self.size.height + self.options.gutter : ( i + 1 ) * ( self.size.height + self.options.gutter ),
left : self.options.random ? Math.floor( Math.random() * 11 - 5 ) : 0,
width : self.size.width,
marginLeft : 0,
transform : self.options.random ?
'rotate(' + Math.floor( Math.random() * 11 - 5 ) + 'deg)' :
self.options.rotated ?
self.options.rotated === 'right' ?
'rotate(-' + ( i * 5 ) + 'deg)' :
'rotate(' + ( i * 5 ) + 'deg)'
: 'none',
transitionDelay : self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? ( i * self.options.delay ) + 'ms' : ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : 0
} );

} );
this.opened = true;

},
close : function() {

var self = this;
this.dd.toggleClass( 'cd-active' );
if( this.options.delay && Modernizr.csstransitions ) {
this.opts.each( function( i ) {
$( this ).css( { 'transition-delay' : self.options.slidingIn ? ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : ( i * self.options.delay ) + 'ms' } );
} );
}
this._positionOpts( true );
this.opened = false;

}

}

$.fn.dropdown = function( options ) {
var instance = $.data( this, 'dropdown' );
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
instance ? instance._init() : instance = $.data( this, 'dropdown', new $.DropDown( options, this ) );
});
}
return instance;
};

} )( jQuery, window );
[/JS]

bron · 12 okt 2018

ik weet helaas niet wat ik fout doe kunnen jullie me helpen. ben beginner met javascript

Geeft niet, we helpen als dat lukt. Om te beginnen heb je het hierboven over 5 talen: php (op de server), html (structuur), css (vormgeving), Javascript (daar ben je mee bezig) en jQuery (JS framework). Is dit de bedoeling? Omdat je in jouw code jQuery gebruikt heb ik dat hier ook gedaan. Laat maar weten of je pure Javascript wilt hebben.
De stukjes code hierboven is een beetje van alles bij elkaar. Ik heb er dit van kunnen maken dan werkt in ieder geval de php en de select met bijbehorende Javascript/jQuery goed.

Code:

<?php
echo '<div class="container">
<select id="team" name="team" class="cd-select">
<option value="-1" selected>- kies je team -</option>
<option value="1">optie1</option>
<option value="2">optie2</option>
<option value="3">optie3</option>
<option value="4">optie4</option>
</select>
</div>';
?>

<div id="showpage">
<b>geen team geselecteerd</b>
</div>

[B]<!-- controleer eerst even of script jQuery al in je html staat dan kan je de volgende regel weglaten -->[/B]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
[B]// dropdown slide werkt alleen als 'dropdown script' in de head staat[/B]
$(function() {
    $(".cd-select").dropdown({
        gutter : 5,
        stack : false,
        slidingIn : 100
    });
});

$(document).ready(function(){
    
    function XMLHttpReq(str) {
        [B]// de volgende 7 regels zijn oud, zie volgende berichtje voor de korte versie.[/B]
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5 (huh?)
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("showpage").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","teamprogramma.php?q="+str,true);
        xmlhttp.send();
    }
    
    // <select> on change
    var team = $("#team");
    team.on("change", function() {
        var answer = team.val();
        if (answer == -1) {
            $("#showpage").html("oops");
        } else {
            $("#showpage").html(answer);
            XMLHttpReq(answer); // hier roep je bovenstaande functie aan
        }
    });

});
</script>

En wat vormgeving

Code:

.container {
    color: #333;
    background: #fff;
}
select {
    margin: 0;
    height: 30px;
    line-height: 30px;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
#showpage {
    margin-top: 10px;
    padding-left: 5px;
}

Kan je hiermee verder?

ik wil via een pulldown list die mooi opgemaakt is een nieuwe pagina inladen het nieuwe pagina inladen werkt als de standaard id van de <select> niet overeenkomt met de eerste javascript function de style van de pulldown list is dan standaard maar ik $( '#cd-select' ) naar $( '#team' ) dan is de layout van de pulldownlist wel goed alleen werkt dan de onchange functie niet meer.

Sorry, een paar keer gelezen en ik snap niet wat je wilt

bron · 12 okt 2018

Als je jouw oude code (IE5 t/m IE7) op deze manier verandert dan zou het moeten werken (kan het hier niet testen omdat ik je andere bestanden niet hebt).

Code:

    function XMLHttpReq(str) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("showpage").innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", "teamprogramma.php?q="+str, true);
        xhttp.send();
    }

bron · 12 okt 2018

Over die dropdown. Je hebt in de <head> iets dergelijks staan als

Code:

<script src="EEN_DROPDOWN_SCRIPT.JS"></script>

Dit is om een slide / fade effect te geven aan de <select class="cd-select"> (onderstaande code heeft jQuery nodig).

Code:

$(function() {
    $(".cd-select").dropdown({
        gutter : 5,
        stack : false,
        slidingIn : 100
    });
});

Laat dit nog even weg totdat de rest werkt, je kan het daarna toevoegen.

edwink1985 · 12 okt 2018

krijg het met je hulp nog niet voor elkaar
ik heb mijn project geupload zodat je de juisten bestanden ook hebt.

ik hoop dat je hier wat mee kunt

Bekijk bijlage test.rar

bron · 13 okt 2018

Bestanden als zip inpakken en dan uploaden als bijlage bij het bericht (nu is het geen valide rar).

edwink1985 · 13 okt 2018

bij deze een nieuwe upload hoop dat deze wel goed is heb niet alles geüpload werd map anders te groot
maar de noodzakelijke bestanden zitten er in

Bekijk bijlage wedstrijd.zip

bron · 15 okt 2018

Het probleem zit in jquery.download
- is 6 jaar oud (versie 1.0.0) en op codrops.com zijn geen updates
- heeft modernizr nodig (omdat het script oud is)
- vervangt de <select> door <ul>
- respecteert niet jouw id en class (worden door dropdown verwijderd)
Dit maakt het script van jouw select

Code:

<div class="cd-dropdown">
    <span style="z-index: 1004;"><span>kies je team</span></span>
    <input type="hidden" name="team" value="1">
    <ul style="height: auto;">
        <li data-value="1" style="heel-veel-style-ppfff"><span>kies je team</span></li>
        <li data-value="2" style="heel-veel-style-ppfff"><span>AZC 1</span></li>
    </ul>
</div>

Als ik in een apart scriptje gebruik maak van event on("input") of on("change") op de <inpput> dan krijg ik er geen waarde uit.
In het download.js script ontbreekt het event afterOptionSelect. Alleen event onOptionSelect is geimplementeerd maar daar krijg ik de vorige waarde uit.

Code:

$(function() {
    $("#team").dropdown({
        gutter : 5,
        stack : false,
        slidingIn : 100,
        onOptionSelect : function() {
            var cdAnswer;
            cdAnswer = document.getElementsByName("team");
            console.log(cdAnswer[0].value);
            //cdAnswer = $(".cd-dropdown > span > span").html();
            //console.log(cdAnswer);
        }
    });
});

Mijn advies: zoek een recent animatie script voor de select, of helemaal geen animatie.

In de bijlage vind je jouw index die wat gereorganiseerd is.

bron · 15 okt 2018

Toch nog gegraven en nu heb ik de optie te pakken maar je zal zelf via een array ofzo de teksten erbij moeten zoeken. Het script is ook een stukje compacter.
Het onderste deel wordt:

Code:

<div id="showoption"><b>Geen team geselecteerd</b></div>
<div id="showpage" style="margin-top:40px;"></div>

</div>

<script>
$(document).ready(function(){

    function XMLHttpReq(str) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("showpage").innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", "teamprogramma.php?q="+str, true);
        xhttp.send();
    }

    $("#team").dropdown({
        gutter : 5,
        stack : false,
        slidingIn : 100,
        onOptionSelect : function(opt) {
            var optValue = opt.data('value');
            $("#showoption").html(optValue);
            XMLHttpReq(optValue);
        }
    });

});
</script>

Suc6. Have fun.

bron · 18 okt 2018

De vraag lijkt niet opgelost, of is het gelukt?

pulldownlist moet pagina laden (ajax)

edwink1985

Gebruiker

bron

Moderator

bron

Moderator

bron

Moderator

edwink1985

Gebruiker

bron

Moderator

edwink1985

Gebruiker

bron

Moderator

Bijlagen

bron

Moderator

Bijlagen

bron

Moderator

Nieuwste berichten

Wij waarderen jouw privacy