Fout bij dynamisch genereren html
Ik heb een fout/probleem.
Ben bezig een formbuilder te maken omdat het gemakkelijk is in het CMS wat ik schrijf.
Hier de link naar een werkend voorbeeld
NU heb ik een stukje werkend en een stukje niet.
1. Ik kan wel een fieldset genereren dmv een JavaScript functie maar daarna werkt het niet meer.
Ik DENK dat het probleem ligt bij het feit dat ik jquery dingen gebruik om bepaalde dingen uit te lezen die in de broncode helemaal nog niet bestaan maar jquery heeft ze namelijk net toegevoegd.
Graag jullie expertise hierover.
Javascript plaats ik hier, html plaats ik even voor het gemak in een pastbin linkje.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//<![CDATA[
function addFormField(groupname)
{
event.preventDefault();
var parent = $('#'+groupname);
var append = '#'+groupname+' #fields';
var i = $('#'+groupname+' #fields .fieldrow').size() + 1;
$('<!-- form row --> <div class="fieldrow" id="veld'+i+'"> <div class="row"> <div class="col-md-3"> <div class="form-group"> <label>Tekst bij veld</label> <input type="text" name="form_name" class="form-control"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label>Veldnaam</label> <input type="text" name="form_name" class="form-control"> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>Type veld</label> <select name="field_type" class="selectpicker"> <option value="text">Tekst</option> <option value="textarea">Textgebied</option> <option value="dropdown">Keuzevelden</option> <option value="radio">Radiobuttons</option> <option value="checkbox">Checkbox</option> <option value="file">Bestand</option> <option value="date">Datum</option> </select> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>Veld verplicht?</label> <select name="required" class="selectpicker btn-small"> <option value="0">Nee</option> <option value="1">Ja</option> </select> </div> </div> <div class="col-md-2"> <a href="#" onclick="removeFormField("veld'+i+'", "'+groupname+'");" class="btn round-none btn-danger pull-right deletefield">verwijder veld</a> </div> </div> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label>Waardes</label> <input type="text" id="valuesfield" name="values" placeholder="Waardes scheiden met een ;" class="form-control"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label>Validatie</label> <select name="validation" class="selectpicker"> <option value="none">Geen</option> <option value="int">Cijfers</option> <option value="email">E-mail</option> </select> </div> </div> </div> </div> <!-- form row -->').appendTo(append);
$('.selectpicker').selectpicker();
return false;
};
function removeFormField(fieldname, groupname)
{
event.preventDefault();
var parent = $('#'+fieldname);
var i = $('#'+groupname+' .fieldrow').size();
$(parent).remove();
return false;
};
function removeFormGroup(groupname)
{
event.preventDefault();
var parent = $('#'+groupname);
console.log(groupname);
$(parent).remove();
return false;
};
function addFormGroup()
{
event.preventDefault();
var i = $('.formgroup').size() + 1;
$('<div class="widget widget-2 row formgroup" id="group'+i+'"> <div class="widget-head"><h4 class="heading">Formulier groep '+i+'</h4> <a onclick="removeFormGroup("group'+i+'");" class="btn round-none btn-danger pull-right">verwijder groep</a><a onclick="addFormField("group'+i+'");" class="btn round-none btn-success pull-right">veld toevoegen</a></div> <div class="widget-body" id="fields"></div></div>').appendTo('#forms');
addFormField('group'+i);
return false;
};
//]]>
function addFormField(groupname)
{
event.preventDefault();
var parent = $('#'+groupname);
var append = '#'+groupname+' #fields';
var i = $('#'+groupname+' #fields .fieldrow').size() + 1;
$('<!-- form row --> <div class="fieldrow" id="veld'+i+'"> <div class="row"> <div class="col-md-3"> <div class="form-group"> <label>Tekst bij veld</label> <input type="text" name="form_name" class="form-control"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label>Veldnaam</label> <input type="text" name="form_name" class="form-control"> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>Type veld</label> <select name="field_type" class="selectpicker"> <option value="text">Tekst</option> <option value="textarea">Textgebied</option> <option value="dropdown">Keuzevelden</option> <option value="radio">Radiobuttons</option> <option value="checkbox">Checkbox</option> <option value="file">Bestand</option> <option value="date">Datum</option> </select> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>Veld verplicht?</label> <select name="required" class="selectpicker btn-small"> <option value="0">Nee</option> <option value="1">Ja</option> </select> </div> </div> <div class="col-md-2"> <a href="#" onclick="removeFormField("veld'+i+'", "'+groupname+'");" class="btn round-none btn-danger pull-right deletefield">verwijder veld</a> </div> </div> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label>Waardes</label> <input type="text" id="valuesfield" name="values" placeholder="Waardes scheiden met een ;" class="form-control"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label>Validatie</label> <select name="validation" class="selectpicker"> <option value="none">Geen</option> <option value="int">Cijfers</option> <option value="email">E-mail</option> </select> </div> </div> </div> </div> <!-- form row -->').appendTo(append);
$('.selectpicker').selectpicker();
return false;
};
function removeFormField(fieldname, groupname)
{
event.preventDefault();
var parent = $('#'+fieldname);
var i = $('#'+groupname+' .fieldrow').size();
$(parent).remove();
return false;
};
function removeFormGroup(groupname)
{
event.preventDefault();
var parent = $('#'+groupname);
console.log(groupname);
$(parent).remove();
return false;
};
function addFormGroup()
{
event.preventDefault();
var i = $('.formgroup').size() + 1;
$('<div class="widget widget-2 row formgroup" id="group'+i+'"> <div class="widget-head"><h4 class="heading">Formulier groep '+i+'</h4> <a onclick="removeFormGroup("group'+i+'");" class="btn round-none btn-danger pull-right">verwijder groep</a><a onclick="addFormField("group'+i+'");" class="btn round-none btn-success pull-right">veld toevoegen</a></div> <div class="widget-body" id="fields"></div></div>').appendTo('#forms');
addFormField('group'+i);
return false;
};
//]]>
Rick de Graaff op 02/11/2013 01:39:42:
Ik DENK dat het probleem ligt bij het feit dat ik jquery dingen gebruik om bepaalde dingen uit te lezen die in de broncode helemaal nog niet bestaan ...
Ja, dat klopt, en daar is iets aan te doen, met de methode on() ( en off() ).
De dynamisch gegenereerde elementen steek je eerst in een container (in een div of zo).
Dan zet je de onClick niet op het element, maar op de container.
Zie naar lijn 19, voor de werking.
Als voorbeeld: Als je op een knop drukt, komt een rode 'box' op het scherm. Als je op de rode box klikt, wordt ze groen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
float: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input type="button" id="add" value="Add box">
<div id="boxes"></div>
<script>
$(document).ready(function() {
$('#add').click(function(e) {
// we voegen een box toe
$('#boxes').append('<div class="box">Klik op mij</div>');
});
// met de on() methode: $(container).on(event, element, function)
$('#boxes').on('click', '.box', function() {
$(this).css({
'background-color': 'green'
})
});
})
</script>
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: red;
float: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input type="button" id="add" value="Add box">
<div id="boxes"></div>
<script>
$(document).ready(function() {
$('#add').click(function(e) {
// we voegen een box toe
$('#boxes').append('<div class="box">Klik op mij</div>');
});
// met de on() methode: $(container).on(event, element, function)
$('#boxes').on('click', '.box', function() {
$(this).css({
'background-color': 'green'
})
});
})
</script>
Gewijzigd op 04/11/2013 12:43:02 door Kris Peeters
Ik heb nu een div waarin alles word geplaatst,
<div class="col-md-12" id="forms">
De div "forms". Alleen als ik een nieuw veld wil aanmaken, input of texarea ofzo dan moet ik het dus in het net nieuw gegenereerde veld plaatsen.
Ik hoop dat je me snapt.
Demo is bereikbaar zonder toegang van een password o.i.d I hope you can help me once again
Daarin plaats je de nieuw gegenereerde elementen
Ik ga het nogmaals helemaal doorlopen, wellicht doe ik toch iets stiekem fout.
Maar een onclick in op een a href element moet in theorie werken toch? ookal is de "nieuwe" manier via jquery click functions zelf.
Reden waarom ik dit niet doe is omdat de groepnaam, die dynamisch word gegenereerd door Javascript/jquery in het "html" element aanwezig moet zijn.
Alvast bedankt voor de info en morgen ga ik weer even stoeien, moet toch uiteindelijk te doen zijn he.
In de bron kan je zien (formbuilder.js) wat ik nu heb.
Er word sowieso bij het aanmaken van de group al een textveld aangemaakt waar dus het probleem ontstaat, heel vervelend.
Als je nog meer nodig hebt dan hoor ik het graag van je.
Kijk even naar formbuilder, lijn 12
Code (php)
1
' ... onclick="removeFormGroup("group'+i+'");" ...'
Dit resulteert in zo'n element:
Code (php)
1
<a onclick="removeFormGroup(" group1");"="" class="btn round-none btn-danger pull-right">verwijder groep</a>
Je ziet dat de " karakters mekaar in de weg lopen.
Je moet goed weten: Welk aanhalingsteken hoort bij wat?
Zeker wanneer je met javascript HTML genereert; ofwel met php javascript genereert.
Er zijn de tekens waarmee je de javascript string opent: ' . Als je dus ' nog wil gebruiken, moet je die escapen, met een \ teken.
En uiteraard: als je nar een onclick alles tussen "" steekt, mag je " niet meer gebruiken daar binnen.
Wat je moet doen, is dit:
Code (php)
1
... onclick="removeFormGroup(\'group' + i + '\');" ...
Wat resulteert in dit:
Code (php)
1
onclick="removeFormGroup('group1');"
Controleer dit overal
---------------------------
Wat je verder nog kan merken, is een coding standard (dus niet verplicht, maar wel een goed idee) waarbij ik altijd een spatie zet voor en na het teken waaarmee je strings aan mekaar plakt. Dit heb ik gehaald van de drupal coding standards, die ik graag gebruik.
dus bv.
javascript:
Code (php)
1
2
2
var naam = 'John';
var a = 'Hallo ' + naam + ', hoe gaat het?';
var a = 'Hallo ' + naam + ', hoe gaat het?';
php
Code (php)
1
2
3
4
2
3
4
<?php
$naam = 'John';
$a = 'Hallo ' . $naam . ', hoe gaat het?';
?>
$naam = 'John';
$a = 'Hallo ' . $naam . ', hoe gaat het?';
?>
Gewijzigd op 07/11/2013 12:58:46 door Kris Peeters