[jquery] Ajax heel formulier meesturen en html ophalen

dinsdag 29 maart 2011 00:20

Acties:

0 Henk 'm!

Topicstarter

Hallo,

Ik ben bezig om een formulier te maken waarbij je profielen kunt selecteren met behulp van een formulier met een hoop checkboxes.
Alleen lukt het mij niet echt om het hele formulier te laten submitten met ajax als een van de checkboxes word aangevinkt of juist uitgevinkt. Het is de bedoeling dat het formulier gewoon normaal gesubmitted word alleen dient de pagina niet herladen te worden. Nadat er een checkbox veld veranderd is dan moet de html van de pagina die je normaal gesproken zou krijgen nadat je een formulier gesubmitted hebt in een div gezet worden.
De waardes van het formulier dienen dus allemaal meegestuurd te worden naar de action page en dus via een post of een get aankomen, of het een post of een get is maakt mij niet veel uit. (sub-vraagje: wat lijkt jullie beter. aangezien het naar mijn mening niet boeit of het een post of een get is)

Onderstaande code had ik ingedachte:

code:

<script type="text/javascript" language="javascript">
$("input[type='checkbox']").change( function() {
     // stop form from submitting normally
    event.preventDefault(); 
        
    // get some values from elements on the page:
    var $form = $( this ),
        term = $form.find( 'input[type="checkbox"]' ).val(),
        url = $form.attr( 'action' );

    // Send the data using post and put the results in a div
    $.post( url, { s: term } ,
      function( data ) {
          var content = $( data ).find( '#content' );
          $( "#jqueryResult" ).html( content );
      }
    );
});
</script>

Dit heb ik geknutseld vanaf de jquery site, zoals jullie misschien zien heb ik er de ballen verstand van.. Deze script tag heb ik net boven de </body> gezet en in de <head> heb ik de jquery included.

Kan iemand mij helpen aan een simpele oplossing of uitleggen hoe ik moet zoeken naar zoiets? Dit is een van mijn eerste jquery dingetjes

Alvast bedankt

dinsdag 29 maart 2011 07:52

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Jquery

JavaScript:

1	var $form = $( this )

Dat is niet je form, dat is je checkbox.

[ Voor 22% gewijzigd door Bosmonster op 29-03-2011 07:52 ]

dinsdag 29 maart 2011 09:28

Acties:

0 Henk 'm!

Meijuh

Don't reinvent the wheel.
http://jquery.malsup.com/form/

Asus EN8800GTS, Asus P5E, Intel E8400, 2x500gb Spinpoint (raid0), Zalman HP 600 watt, cnps 9500 led, creative xfi music, 4x1gb hyperX PC2 8500

dinsdag 29 maart 2011 09:39

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Jquery

Meijuh schreef op dinsdag 29 maart 2011 @ 09:28:
Don't reinvent the wheel.
http://jquery.malsup.com/form/

In de eerste plaats zou ik me afvragen waarom niet. We zitten hier om te ondersteunen met developen, niet om aan scriptrequests te voldoen.

Daarnaast, waarom zou je voor iets simpels als het submitten van een paar checkboxes, wat in een paar regels jQuery kan, een complete plugin gebruiken waar je de ins en outs niet van kent en compleet overkill is voor deze situatie.

dinsdag 29 maart 2011 09:42

Acties:

0 Henk 'm!

Priet

To boldly do what no one has..

Kun je daar niet serialize() voor gebruiken?

JavaScript:

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

"If you see a light at the end of a wormhole, it's probably a photon torpedo!"

dinsdag 29 maart 2011 10:16

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Ik snap niet helemaal waarom je het versturen op de checkbox doet. Bij het selecteren van een checkbox kan je toch beter een event op het form aanroepen (submit bijvoorbeeld)? Dan elimineer je het complete probleem.

Anyone who gets in between me and my morning coffee should be insecure.

dinsdag 29 maart 2011 20:37

Acties:

0 Henk 'm!

Maaark

Topicstarter

Bedankt voor jullie reactie's!

@Bosmonster: ik was die plugin inderdaad ook al tegen gekomen, maar het leek mij inderdaad ook te veel functie's hebben voor het versturen van de checkboxes. Ik weet dat jQuery ingebouwde ajax functionaliteit heeft en daarom leek mij dat het simpeler kon

Maar nu kom ik er niet echt uit..

@Priet: bedankt ik zocht inderdaad zoiets

@MueR: Wat bedoel je precies?

Ik heb zelf ook eventjes geprobeerd en heb nu zoiets:
Dit is de code die net boven </body> staat:

code:

<script type="text/javascript" language="javascript">
function showValues() {
     alert($(this).serialize()); 
  return false; 
    }

    $(":checkbox, :radio").click(showValues);

</script>

Dit is het relevante deel van het formulier:

code:

1 2	<form action="<?= base_url();?>getSearchResult" id="jquerysearch"> <input type="checkbox" name="language[]" class="styled" />

Ik hoop dat iemand mij kan helpen want ik zie het echt niet meer...

dinsdag 29 maart 2011 21:48

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Ik bedoel precies wat ik zei, en wat Priet ook doet. Zet je submit event daar waar het hoort: op het form. Je hebt nu nog steeds alle functionaliteit op je checkbox liggen. Doe eens niet.

Om je huidige probeersel eens te pakken en je een hint richting debuggen te geven: wat is $(this) voor iets. Niet zeggen wat jij denkt dat het is, ga kijken wat er werkelijk aan dat ding hangt.

Anyone who gets in between me and my morning coffee should be insecure.

dinsdag 29 maart 2011 22:01

Acties:

0 Henk 'm!

Maaark

Topicstarter

Het verwijst toch naar het bovenstaande element dan waar die this staat?

code:

$('form').submit(function() { 
  alert($(this).serialize()); 
  return false; 
});

Waarbij het hier dus gelijk is aan form?

Maar moet ik niet juist de nadruk leggen op de checkbox omdat er geen submit knop in het formulier gebruikt word?

dinsdag 29 maart 2011 22:12

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Dat is niet de code die je eerder post. Dit is gewoon wat je van Priet hebt gekopieerd. Dat boeit niet. Je zegt hier wat anders.

Welke code heb je nu?
Wat staat er in $(this) (en als je aankomt met een "toch?" heb je niet getest wat er nu echt in staat)

Anyone who gets in between me and my morning coffee should be insecure.

dinsdag 29 maart 2011 22:37

Acties:

0 Henk 'm!

Maaark

Topicstarter

Klopt dat het gekopieerd is van Priet, aangezien ik dacht dat die het simpelste was om te gebruiken. Ik zie inderdaad het het woord toch iets verkeerd gekozen was haha. Het is te vergelijken met php classes

en this verwijst dus terug

Op dit moment heb ik deze code:

code:

                 <script type="text/javascript">
                 $(document).ready(function() { 
                 $(':checkbox').change(function() {
                    alert(('#jquerysearch').serialize());
                     $('#jquerysearch').submit();
                 
});
  $('#jquerysearch').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

});
</script>

Waarbij het bij het klikken op een submit button (waarvan zijn aanwezigheid niet de bedoeling is in de uiteindelijke versie) wel werkt, maar een checkbox change niet.

zondag 10 april 2011 19:52

Acties:

0 Henk 'm!

Makkelijk

Waarbij het bij het klikken op een submit button (waarvan zijn aanwezigheid niet de bedoeling is in de uiteindelijke versie) wel werkt, maar een checkbox change niet.

Waarbij 'wat' werkt. De alert?
Als je nu een checkbox aanklikt, krijg je dan geen alert met 'handler for .submit() called' en als je op een submit knop drukt wel? Zo ja, alert je geserializede form wel? Doet je handler het überhaubt? Ik heb slechte ervaringen met .change op checkbox en doe altijd .click, maar misschien is dat hier wel niet relevant.

[ Voor 20% gewijzigd door Makkelijk op 10-04-2011 19:53 ]

Badieboediemxvahajwjjdkkskskskaa

zondag 10 april 2011 21:20

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Php

Het is gewoon heel simpel: het direct aanroepen van de submit actie via javascript triggered niet het onsubmit event van het formulier. Dat is by design zo.

Intentionally left blank

zondag 10 april 2011 22:08

Acties:

0 Henk 'm!

Makkelijk

crisp schreef op zondag 10 april 2011 @ 21:20:
Het is gewoon heel simpel: het direct aanroepen van de submit actie via javascript triggered niet het onsubmit event van het formulier. Dat is by design zo.

Damn, das waar. En dat gaat zo vaak fout

Badieboediemxvahajwjjdkkskskskaa

Onderwerpen