Ik heb een simpel get form #df met 2 select boxen #dm en #dy en een submit input #ds.
Via de volgende code haal ik een php file op en laad deze in mijn div #content_box.
$(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();
});
});
Het probleem dat ik heb is dat het benodigde event.preventDefault() voorkomt dat de parameters in de url komen. Hoe kan ik dit oplossen?
Waarom is event.preventDefault() nodig? Als je wel de default behaviour wil (het submitten van het form en daarbij het toevoegen van parameters aan de URL), dan moet je dit niet gaan voorkomen.
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.
En wat wil je nu eindelijk bereiken?
- 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.
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
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.
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.
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.
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.
Goeie tips. Sinds mijn .htaccess file nog leeg is, zal ik mij in de komende tijd wel gaan verdiepen in hoe dat allemaal werkt.
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.
