event.preventDefault() werkt vraagteken-url tegen
Via de volgende code haal ik een php file op en laad deze in mijn div #content_box.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$(document).ready(function(){
$('#df').submit(function(event){
var month_ddchart = $('#dm').val();
var year_ddchart = $('#dy').val();
source_ddchart = '/data/ddc-'+month_ddchart+'-'+year_ddchart+'-body.php';
$('#content_box').load(source_ddchart);
event.preventDefault();
});
});
$('#df').submit(function(event){
var month_ddchart = $('#dm').val();
var year_ddchart = $('#dy').val();
source_ddchart = '/data/ddc-'+month_ddchart+'-'+year_ddchart+'-body.php';
$('#content_box').load(source_ddchart);
event.preventDefault();
});
});
Het probleem dat ik heb is dat het benodigde event.preventDefault() voorkomt dat de parameters in de url komen. Hoe kan ik dit oplossen?
Fabian W op 18/04/2015 23:14:45:
Het probleem dat ik heb is dat het benodigde event.preventDefault() voorkomt dat de parameters in de url komen. Hoe kan ik dit oplossen?
Wijs eens in het bovenstaande code-fragment aan waar je query-parameters gebruikt, want ik zie ze niet.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<form method="get" class="load_ddchart" id="df" name="df">
<select class="form_select" id="dm" name="dm"><option value="jan">Januari</option><option value="feb">Februari</option><option value="mrt">Maart</option><option value="apr">April</option><option value="mei">Mei</option><option value="juni">Juni</option><option value="juli">Juli</option><option value="aug">Augustus</option><option value="sept">September</option><option value="okt">Oktober</option><option value="nov">November</option><option value="dec">December</option></select>
<select class="form_select" id="dy" name="dy"><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option></select>
<input class="go_button" id="ds" name="ds" type="submit" value="Go"/>
</form>
Vanuit dit form maak ik dus een link als /data/ddc-feb-2015-body.php.
Als ik preventDefault() er uit sloop, krijg ik heel kort het gewenste file in de content_box te zien, waarna de default actie van de browser wordt uitgevoerd: redirecting naar het oorspronkelijke file (de index.php met lege content_box). De parameters (?dm=feb&dy=2015&ds=Go) blijven zo wel in de url staan, maar ik heb er niks aan.
- wel een redirect na afloop naar ... ?
- geen redirect, maar met inladen van URL ... ?
- iets anders?
Die event.preventDefault() heeft namelijk enkel effect op het verzenden van het formulier - dit wordt tegengehouden. Verder wordt er op geen enkele manier functionaliteit "beperkt" zoals jij het laat overkomen, de veroorzaker van het ongewenste gedrag zit dus waarschijnlijk ergens anders.
Volgens mij is er wel een soort van ongeschreven regel of goede gewoonte om die preventDefault() meteen aan het begin van de event-afhandeling te zetten, om duidelijk te maken dat het niet de bedoeling is dat de bijbehorende actie (het verzenden van het formulier zelf) ook daadwerkelijk wordt uitgevoerd.
1. Het laden van een ander php file in een div d.m.v. een form
2. Het weergeven van de form variabelen in de url
Zonder preventDefault() bereik ik alleen goal 2
Met preventDefault() bereik ik alleen goal 1 (maakt niet uit waar ik preventDefault neerzet).
Fabian W op 19/04/2015 12:28:14:
2. Het weergeven van de form variabelen in de url
Ehhh... Je wilt dus de URL van de huidige pagina aanpassen zonder weg te navigeren van die pagina, en dan de daadwerkelijke informatie ophalen via AJAX?
Waarom gooi je niet gewoon de AJAX-call er tussenuit, dit klinkt namelijk ontiegelijk omslachtig. Is dit om niet "extra" content te laden (een extra page refresh), om hoeveel data gaat het helemaal?
Dus in plaats van:
- submit form, vang submit af
- bak URL mbv form data, haal pagina op mbv AJAX
- pas URL handmatig aan, alsof het form gesubmit was
gewoon:
- submit het formulier....
Alternatief #2:
Mogelijk wil je zoiets.
Alternatief #3:
URL rewriting.
EDIT: jQuery en AJAX zijn hulpmiddelen, geen doelen. Je hoeft het niet per se te gebruiken in dit geval, dus ik snap niet dat je zoveel moeite doet om het moeilijker te maken op deze manier.
Gewijzigd op 19/04/2015 13:37:21 door Thomas van den Heuvel
Kan je dit bereiken door url rewriting?
Indien ja, dan is dat veruit de beste oplossing, want dan kan ik de url meteen omschrijven tot iets van site.com/ddchart/feb/2015 wat natuurlijk super mooi is, maar ja ik weet niet of dat haalbaar is.
Anders is de eerste optie denk ik het best. Ik dacht dat dit probleem kleiner zou zijn met Ajax, maar een andere manier van data ophalen kan ik ook doen. De data die opgehaald wordt is niet zo enorm groot. Vooral tabel data. Dit kan in het uiterste geval tot 100 png en 100 jpg afbeeldingen bevatten. Dat beinvloedt de snelheid het meest denk ik.
Fabian W op 19/04/2015 14:26:09:
Kan je dit bereiken door url rewriting?
Indien ja, dan is dat veruit de beste oplossing, want dan kan ik de url meteen omschrijven tot iets van site.com/ddchart/feb/2015 wat natuurlijk super mooi is, maar ja ik weet niet of dat haalbaar is.
Indien ja, dan is dat veruit de beste oplossing, want dan kan ik de url meteen omschrijven tot iets van site.com/ddchart/feb/2015 wat natuurlijk super mooi is, maar ja ik weet niet of dat haalbaar is.
Dit lijkt mij vrij eenvoudig, herschrijf alles van de vorm /ddchart/*/* (naar bijvoorbeeld script.php?argument1=waarde1&argument2=waarde2) waarbij de eerste * overeensteemt met een maand (je zou er nog voor kunnen kiezen om hier een maandnummer met een "leading zero" van te maken, en de tweede * met een jaartal.
Of je draait het om, dan stemt de alfabetische sortering overeen met de numerieke (2014/12 komt voor 2015/01 komt voor 2015/02 etc).
En met een enkel argument zou je een soort van jaaroverzicht kunnen teruggeven.
Trouwens een oplossing zonder Ajax load is niet veel anders:
Nog steeds geen variabelen in de url en een naar effect van onderstaande manier is dat het object een verkeerde grootte heeft.
Code (php)
1
document.getElementById("content_box").innerHTML='<object type="text/html" data='+source_ddchart+' ></object>';
Gewijzigd op 19/04/2015 20:34:25 door Fabian W
Of je regelt alle routing van je site op deze manier.
Gewijzigd op 19/04/2015 21:33:36 door Thomas van den Heuvel
Code (php)
Niks moeilijk doen met javascript of ajax. Gewoon met php doet die het wel!
Gewijzigd op 24/04/2015 23:57:17 door Fabian W