Dynamisch geladen velden worden niet verzonden

[Dimby]

Hallo,

Ik zit met het volgende probleem:
Ik ben bezig met een site waar een onderdeel van is dat mensen persoonlijke gegevens moeten invullen. Denk hierbij aan hobby en opleidingen. Mensen klikken dan op bijvoorbeeld hobby toevoegen, Jquery registreert dit, laad via Ajax de input velden, en zet ze in de pagina. Zo kun je bv 10 hobby's invullen. Van dit soort velden heb ik er 4 op een pagina staan: werkverleden, opleidingen, talen, hobby's. Nu is het probleem dat als ik op verzenden klik alleen de velden van werkverleden worden meegezonden. De andere worden, ondanks dat ze succesvol geladen zijn, niet meegezonden. Ook als ik de velden van bv opleidingen gelijk maar aan die van werkverleden worden ze niet verzonden.

Het is waarschijnlijk heel vaag omschreven maar ik hoop dat jullie het snappen. Ik heb gekeken, maar de form tags staan er toch echt omheen en er staat geen </form> in het werkverleden pagina (die geladen wordt). Ook als ik werkverleden velden niet laad, maar bv alleen talen dan wordt er nog niks verzonden.

Weten jullie wat het probleem zou kunnen zijn?
Aangezien de code vrij groot is, is dit ongeveer wat ik jullie kan geven:

code:

//View van de pagina vereenvoudigt

<!-- BEGIN content -->

<div class="form">

<?= form_open('brief/cv/stap3');?>

<span id="opleidingen">
  <div class="label"><span class="add_opleidingen"><b>Voeg een opleiding of cursus toe</b></span></div>
</span>             

<span id="werkervaring">
  <div class="label"><span class="add_werkervaring"><b>Werkervaring Toevoegen</b></span></div>
</span>             

<span id="software">
  <div class="label"><span class="add_software"><b>Software Toevoegen</b></span></div>
</span>             

<span id="interesse">
  <div class="label"><span class="add_interesse"><b>Voeg hobby of interesse toe</b></span></div>
</span>             

<span id="talen">
  <div class="label"><span class="add_talen"><b>Voeg taal toe</b></span></div>
</span>             

<span>
  <input class="button" name="submit" type="submit" value="Ga naar stap 3" />
</span>

</div>

code:

//Js.js

jQuery(document).ready(function($) {
    
    var scriptUrl = "http://localhost:8080/testSite/";
    
    $('.add_opleidingen').click(function(){
        
        $.ajax({
            url: scriptUrl+"application/views/opleidingen.php",

            success: function(html){
                $("#opleidingen").before(html);
            }
        });
        
    });
    
    $('.add_werkervaring').click(function(){
        
        $.ajax({
            url: scriptUrl+"application/views/werkervaring.php",

            success: function(html){
                $("#werkervaring").before(html);
            }
        });
        
    });
    
    $('.add_software').click(function(){
        
        $.ajax({
            url: scriptUrl+"application/views/software.php",

            success: function(html){
                $("#software").before(html);
            }
        });
        
    });
    
    $('.add_interesse').click(function(){
        
        $.ajax({
            url: scriptUrl+"application/views/interesse.php",

            success: function(html){
                $("#interesse").before(html);
            }
        });
        
    });
    
    $('.add_talen').click(function(){
        
        $.ajax({
            url: scriptUrl+"application/views/talen.php",

            success: function(html){
                $("#talen").before(html);
            }
        });
        
    });

})

[Bosmonster]

Ik zie sowieso al divs in spans, die er voor kunnen zorgen dat je html er intern heel anders uitziet dan jij verwacht. Valideer je html aan je gekozen doctype en kijk met een tool als Firebug naar de rendered html.

Daarnaast, kun je een online voorbeeld geven, want nu is het maar gissen naar alle omliggende code en wat er nu eigenlijk uit die jQuery komt.

[ Voor 8% gewijzigd door Bosmonster op 16-09-2009 09:50 ]

[Dimby]

Nee divjes eromheen helpen niet

Online voorbeeld, wel wat dingen weggelaten, druk op de verzendknop om op de volgende pagina print_r te zien van de $_POST array.

Groet,
Paul

[ Voor 16% gewijzigd door Dimby op 17-09-2009 15:23 ]

[HuHu]

Debug: POST data found
Array
(
)


A PHP Error was encountered
Severity: Warning
Message: Cannot modify header information - headers already sent by (output started at /home/dimby/domains/pauldulong.nl/public_html/clients/topbrief/application/controllers/brief.php:260)
Filename: libraries/Session.php
Line Number: 662
deleted
deleted deleted
Maak nu je eigen CV!

Verzendknop? Waar?

[Borizz]

Dimby schreef op dinsdag 15 september 2009 @ 23:50:

Het is waarschijnlijk heel vaag omschreven maar ik hoop dat jullie het snappen. Ik heb gekeken, maar de form tags staan er toch echt omheen en er staat geen </form> in het werkverleden pagina (die geladen wordt). Ook als ik werkverleden velden niet laad, maar bv alleen talen dan wordt er nog niks verzonden.

Controleer je HTML output eens met de W3C Validator, het kan goed zijn dat het FORM element automatisch wordt afgesloten door de browser, omdat de rest van de structuur niet klopt.

Normaal gesproken wordt elk input veld dat binnen een formulier staat gesubmit ook al zijn ze dynamisch geladen. Dus het probleem is wel duidelijk: de input velden staan (volgens de browser) niet binnen het formulier.

Je kan eens met firebug (of de webdeveloper tools in IE8) kijken naar de HTML output nadat de velden dynamisch zijn ingeladen.

Offtopic: lees ook even de regels van dit forum door, wij GOTers groeten elkaar namelijk permanent.

[Gomez12]

Op je voorbeeld zie ik geen verzendknop onder chrome, sowieso zou ik de php-melding bovenin weghalen.

En qua gebruik moet ik zeggen dat ik het hardstikke irritant vind dat alle opties via ajax geladen worden ( misschien dat je in de praktijk er iets mee doet, maar in dit voorbeeld is er geen afhankelijkheid van velden en irriteer ik me alleen maar aan de traagheid van een extra pagina ophalen terwijl dit gewoon via JS ook gemaakt / in 1e instantie meegestuurd had kunnen worden )

Onder firefox zie ik ook geen verzendknop dus ik zou adviseren een beter voorbeeld te maken.

Maar met firebug lijkt het erop dat enkel het opleidingen stuk op de goede plaats wordt gezet , de rest wordt allemaal buiten het form geplaatst

Bij betere bestudering is het vrij simpel, je id #opleidingen hangt wel binnen je form, je id #werkervaring etc niet.
Je form omvat gewoon niet alles / Firefox sluit gewoon je form als het bovenliggende element <div class="form"> gesloten wordt.
Begin je form een niveau hoger en ik gok dat alles goed komt ( anders nog een niveau hoger )

[ Voor 18% gewijzigd door Gomez12 op 16-09-2009 21:19 ]