$_GET met Jquery

[Anoniem: 517815]

Hallo,

Ik ben met een afstudeer project bezig wat een soort archief in van nieuwe media bestanden. Nu is het de bedoeling zo gauw er een div geopend word (met jquery) dat deze onthouden word in de url zodat je op deze manier een selectie kan maken van een aantal intressante nieuwe media projecten en deze bijv kan mailen.

Nu heb ik alles werkend alleen nog niet de GET functie met Jquery ik wil namelijk dat met jquery na dat ik de box geopend heb de ID van de box in de URL zichtbaard word en deze later ook weer kan openen op deze manier.

Dit is de code die ik al heb:

code:

function bindButton() {
        
        var $aantal = $(".focused").length +1;
        
        $(".idboxwrapper").each(function() {
            var $self = $(this);

            $self.find(".info").click(function() {
                
                var $array = $(".focused:visible").length;
                //console.log($array);
                
                if ($array < 4){
                    if (!$self.hasClass("focused")) {
                        $self.addClass("focused");
                        resizeBoxes();
                        
                        var currentId = $self.attr('id');
                        //console.log(currentId);
                    }
                }   
            });
            
            $self.find(".sluiten").click(function(e) {
                $self.removeClass("focused");
                resizeBoxes();
                var currentId = 0;
                console.log(currentId);
            });
            
        });
    }
    
        
    bindButton();

[OkkE]

Ik zou je waardes in de location.hash opslaan, maar je kan uiteraard ook gewoon de location gebruiken en daar je waardes uit vissen.

Wat lukt er nu niet?

[Whinger]

Zoals OkkE al zegt kun je de waardes in location.hash plaatsen, dan krijg je dus in je url iets als:

code:

http://www.mijnurl.nl/mijn-pagina.html#1e-geopende-div,2e-geopende-div

Bij het laden van de pagina kun je de hash dan weer uitlezen en op de bijbehorende divs bepaalde code uitvoeren (.show() bijvoorbeeld).

Trouwens ik denk dat het handig is om even naar je naam conventies te kijken, je gebruikt bijvoorbeeld $self voor een jquery object, terwijl je bij $array er een int in plaatst (wat je bij de naam array niet verwacht). Zijn imo niet de meest duidelijke namen.

[Bosmonster]

Als je ook wilt dat ze weer op een dergelijke manier geopend kunnen worden, kun je het hele proces beter omdraaien overigens. Dit is ook de gebruikelijke werkwijze met javascript routing.

Stel er wordt op een button geklikt: Je past de hash aan en middels een hashchange event vuur je vervolgens de juiste actie uit. Op deze manier verwerk je al je acties vanuit de url en is die dus altijd op-to-date en door te sturen/bookmarken/etc. En blijft ook je browser-navigatie werken (back/forward).

Makkelijkste overigens is hiervoor een eenvoudige routing library te pakken. Een hele simpele is bijvoorbeeld Routie, maar veel andere libraries bieden soortgelijke functionaliteiten.

[ Voor 24% gewijzigd door Bosmonster op 21-05-2013 16:08 ]

[THiCE]

Ik heb zelf wel goede ervaringen met jQuery BBQ (Back Button & Query Library). Hiermee wordt het best gemakkelijk gemaakt om dingen te doen zoals een hashchange event afvangen.

In jouw geval zou je zoiets kunnen doen:

JavaScript:

$(function(){

  $(".idboxwrapper .info").click(function(){
    var id = $(this).attr( "id" );
    $.bbq.pushState({ url: href });
    return false;
  });

  $(window).bind( "hashchange", function(e) {
    var url = $.bbq.getState( "url" );
    $(".idboxwrapper .info").each(function(){
      var id = $(this).attr( "id" );

      if ( id === url ) {
        // open je infobox hier
      } else {
        // doe iets anders
      }
    });
  });

  $(window).trigger( "hashchange" );
});

Succes

[Alex)]

Als je het hekje (#) lelijk vindt kan het ook zonder, via de HTML5 History API. Je zult dan alleen wel wat serverside moeten regelen, bijvoorbeeld dat alle URLs dezelfde pagina serveren. Bij de eerste request weet de webserver namelijk niet dat de url /catalog/producten/tuinbroeken door je JS-applicatie wordt afgehandeld.

[ Voor 39% gewijzigd door Alex) op 23-05-2013 11:25 ]

[NiteSpeed]

Aangezien je werkt met een collectie (media bestanden) van models (media bestand data) zou je ook even kunnen kijken naar http://backbonejs.org/.

Dit heeft ook een ingebakken Routing functie (http://backbonejs.org/#Router) zodat je meteen URLs kan opvangen en de juiste data en view kan laden.