array terugkrijgen van een javascript naar php
Het gaat om het verbinden van divs.
Wat ik begrijp uit het javascript is dat de verbonden divs opgeslagen worden in de _lines
Kan iemand me vertellen hoe ik dat na een submit terug kan krijgen in een array in php?
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
53
54
55
56
57
58
59
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
53
54
55
56
57
58
59
<form id="form1" name="form1" method="post">
<div id="parentNodes_11">
<div class="nodes">
<div class="group1">
<div class="node">auto<span class="node1" data-connect="false" data-id="0" data-use="false"></span></div>
<div class="node">fiets <span class="node2" data-connect="false" data-id="1" data-use="false"></span></div>
<div class="node">water <span class="node3" data-connect="false" data-id="2" data-use="false"></span></div>
<div class="node">zwem <span class="node4" data-connect="false" data-id="3" data-use="false"></span></div>
</div>
<div class="group2">
<div class="node">broek <span class="node5" data-connect="false" data-id="0" data-use="false"></span></div>
<div class="node">band <span class="node6" data-connect="false" data-id="1" data-use="false"></span></div>
<div class="node">wiel <span class="node7" data-connect="false" data-id="2" data-use="false"></span></div>
<div class="node">kraan <span class="node8" data-connect="false" data-id="3" data-use="false"></span></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<input name="submit" type="submit" id="submit" formmethod="POST" value="Verzenden">
</form>
<script type="text/javascript">
(function($) {
$.fn.connect = function(param) {
var _canvas;
var _ctx;
var _lines = new Array(); //This array will store all lines (option)
var _me = this;
var _parent = param || document;
var _lengthLines = $(_parent + ' .group1 .node').length;
var _selectFirst = null;
//Initialize Canvas object
_canvas = $('<canvas/>')
.attr('width', $(_me).width())
.attr('height', $(_me).height())
.css('position', 'absolute');
$(_parent).prepend(_canvas);
//$(_canvas).insertBefore(_parent);
this.drawLine = function(option) {
//It will push line to array.
_lines.push(option);
this.connect(option);
};
....... het javascript gaat hier verder
<script type="text/javascript">
$(document).ready(function() {
$('#parentNodes_11 .nodes').connect('#parentNodes_11');
});
</script>
<div id="parentNodes_11">
<div class="nodes">
<div class="group1">
<div class="node">auto<span class="node1" data-connect="false" data-id="0" data-use="false"></span></div>
<div class="node">fiets <span class="node2" data-connect="false" data-id="1" data-use="false"></span></div>
<div class="node">water <span class="node3" data-connect="false" data-id="2" data-use="false"></span></div>
<div class="node">zwem <span class="node4" data-connect="false" data-id="3" data-use="false"></span></div>
</div>
<div class="group2">
<div class="node">broek <span class="node5" data-connect="false" data-id="0" data-use="false"></span></div>
<div class="node">band <span class="node6" data-connect="false" data-id="1" data-use="false"></span></div>
<div class="node">wiel <span class="node7" data-connect="false" data-id="2" data-use="false"></span></div>
<div class="node">kraan <span class="node8" data-connect="false" data-id="3" data-use="false"></span></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<input name="submit" type="submit" id="submit" formmethod="POST" value="Verzenden">
</form>
<script type="text/javascript">
(function($) {
$.fn.connect = function(param) {
var _canvas;
var _ctx;
var _lines = new Array(); //This array will store all lines (option)
var _me = this;
var _parent = param || document;
var _lengthLines = $(_parent + ' .group1 .node').length;
var _selectFirst = null;
//Initialize Canvas object
_canvas = $('<canvas/>')
.attr('width', $(_me).width())
.attr('height', $(_me).height())
.css('position', 'absolute');
$(_parent).prepend(_canvas);
//$(_canvas).insertBefore(_parent);
this.drawLine = function(option) {
//It will push line to array.
_lines.push(option);
this.connect(option);
};
....... het javascript gaat hier verder
<script type="text/javascript">
$(document).ready(function() {
$('#parentNodes_11 .nodes').connect('#parentNodes_11');
});
</script>
Gewijzigd op 23/05/2020 21:04:26 door Sietsko Bos
- Ariën - op 23/05/2020 20:26:17:
Zou je code-tags willen gebruiken, en je code willen beperken tot relevante code?
Ik was al aan het zoeken maar kan niet meer vinden hoe dat moest... excuses..
Met het bovenstaande fragment kunnen we niet zoveel, en het oorspronkelijke bericht was nogal groot, je kunt niet echt in alle redelijkheid verwachten dat iemand hier doorheen gaat graven tenzij 'ie dit al eerder heeft gezien en een oplossing klaar heeft liggen.
Heeft deze bron ook documentatie?
In je oorspronkelijke bericht stond allemaal Google spul, kan mij niet voorstellen dat je hiermee niets naar JSON kunt exporteren ofzo?
Waarom heb je dit vervolgens in PHP nodig trouwens?
En wat ik eerder zei: jouw "informatiewens" is waarschijnlijk niet uniek. Als dit een soort van library is, grote kans dat hetgeen je zoekt al een keer door iemand anders is bedacht en gemaakt. Al geGoogled?
Ik heb al met Google gezocht en kom er alleen bij stackoverflow een bericht over tegen (komt dit stuk script ook vandaan) maar daar stond verder geen uitleg hoe de _lines terug te krijgen.
Ik wilde de _lines terug krijgen om te controleren of de verbindingen kloppen en dan de informatie opslaan in een database.
Gewijzigd op 23/05/2020 21:30:24 door Sietsko Bos
Gooi het volgende in ome Goegel: javascript array to PHP
eerste resultaat.
EDIT:
op stackoverflow staat:
Quote:
You could use JSON.stringify(array) to encode your array in JavaScript, and then use $array=json_decode($_POST['jsondata']); in your PHP script to retrieve it.
Sietsko Bos op 23/05/2020 21:22:16:
Ik heb al met Google gezocht en kom er alleen bij stackoverflow een bericht over tegen (komt dit stuk script ook vandaan) maar daar stond verder geen uitleg hoe de _lines terug te krijgen.
Dit doe je middels een AJAX-post. Hiermee kun je met behulp van JavaScript/jQuery op de achtergrond een PHP-script aanroepen en data doorsturen via GET of POST.
Gewijzigd op 24/05/2020 00:54:06 door Thomas van den Heuvel
Ik heb ook wel het 1 en ander gevonden maar weet niet hoe ik dat in / met javascript moet bouwen.
Ik weet ook niet waar in het javascript (of jquery) dat moet gebeuren.
Dus als je enige hulp hier in wilt bieden, heel graag want van javascript weet ik gewoon te weinig om dat voor elkaar te krijgen.
Deze zul je ergens moeten integreren in de JavaScript code. Vraag is, waar wil je dit doen, na het optreden van een event of op afroep (een knop "opslaan" ofzo)?
Gewijzigd op 24/05/2020 13:16:49 door Thomas van den Heuvel
Wat je dus zou kunnen doen is een extra data-attribuut toevoegen aan de linker node (group) die bijhoudt met welke (rechter) node deze verbonden is.
Vervolgens zou je een submit knop kunnen maken die ofwel alle nodes van group1 ofwel alle nodes van group2 uitleest -afhankelijk waar je de data-attributen hebt opgeslagen. Deze informatie geef je dan vervolgens door aan het PHP-script.
Ik denk dat het hierbij, mede voor het overzicht, belangrijk is dat je dit opsplitst in deelproblemen. De eerste stap lijkt mij het uitbreiden van de HTML en JavaScript zodat op een of andere manier wordt bijgehouden welke nodes met elkaar verbonden zijn.
Omdat TS aangeeft dat ie weinig ervaring heeft met Javascript lijkt mij het handigst om een verborgen veld
op te nemen met id en name '_lines', en dit voor het verzenden te voorzien van de inhoud van _lines (in JSON notatie):
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$("#submit"). on("click", function(e){
e.preventDefault(); // blokkeren verzenden form
if (_lines.length !== 4) {
alert('Niet alle verbindingen zijn gemaakt');
return false;
}
$('#_lines').val(JSON.stringify(_lines));
$('#form1').submit();
});
e.preventDefault(); // blokkeren verzenden form
if (_lines.length !== 4) {
alert('Niet alle verbindingen zijn gemaakt');
return false;
}
$('#_lines').val(JSON.stringify(_lines));
$('#form1').submit();
});
In php kan je dit dan weer uitlezen met:
Code (php)
1
2
3
2
3
<?php
json_decode($_POST['_lines'], true);
?>
json_decode($_POST['_lines'], true);
?>
Ik heb een verborgen veld toegevoegd en de code onderaan de pagina bijgeplaatst.
Ik blijf alleen de melding krijgen dat nog niet alle verbindingen zijn gemaakt?
Mijn geupdate fiddle
Gewijzigd op 24/05/2020 20:50:00 door Sietsko Bos
Elke browser heeft tegenwoordig geintegreerde "Developer Tools". Deze zijn te vinden onder de F12-functietoets. Een van de tabs heet "Console". Hier kun je via JavaScript info in dumpen via console.log(). Dit is een heel handig middel om inzicht te krijgen in de toestand van gebruikte variabelen. Zo kun je met console.log(_lines); de inhoud van _lines inspecteren.
Waarschijnlijk krijg je op dit moment in je submit-routine een foutmelding dat _lines niet is gedefinieerd omdat je _lines probeert te gebruiken buiten het gebied waarbinnen deze geldig is (de zogenaamde scope).
Gewijzigd op 25/05/2020 00:55:59 door Thomas van den Heuvel
Is het mogelijk om het script (al of niet betaald) werkend te maken, of zou er een nieuw script gemaakt moeten worden?
Ik kwam nog een probleempje tegen want de divs staan nu linksboven in de hoek.
Als ik die bijvoorbeeld in het midden van het scherm zet kloppen de lijnen die verbinden ook niet meer.
Ik hoor graag wat de mogelijkheden zijn.
Sietsko Bos op 25/05/2020 08:20:01:
Hmm beetje jammer, dacht dat ik een compleet werkend script had gevonden.
Is het mogelijk om het script (al of niet betaald) werkend te maken, of zou er een nieuw script gemaakt moeten worden?
Is het mogelijk om het script (al of niet betaald) werkend te maken, of zou er een nieuw script gemaakt moeten worden?
Dit lijkt mij (simpelweg) een kwestie van het op de goede plek zetten van de code. Maar voordat je wat dan ook verstuurt naar PHP kan de console dus informatie verschaffen of je _lines te pakken hebt. Zo kun je dit stap voor stap bouwen.
Sietsko Bos op 25/05/2020 08:20:01:
Ik kwam nog een probleempje tegen want de divs staan nu linksboven in de hoek.
Als ik die bijvoorbeeld in het midden van het scherm zet kloppen de lijnen die verbinden ook niet meer.
Als ik die bijvoorbeeld in het midden van het scherm zet kloppen de lijnen die verbinden ook niet meer.
Dit is een probleem in de opmaak-hoek, dit kun je het beste in afzondering oplossen.
Ik weet echt weinig tot niets van javascript dus ik kan het zelf niet fixen.
Vandaar dus mijn eerdere voorstel om de informatie wat permanenter op te slaan in de nodes zelf (die vervolgens overal beschikbaar en opvraagbaar is). Je zou bijvoorbeeld een attribuut data-connected-to kunnen toevoegen aan de eerste group. Deze houdt dan een referentie bij van de node waarmee deze verbonden is. Of je zou dit zelfs aan beide zijden kunnen doen zodat je een soort dubbel gelinkte lijst hebt.
Op het moment dat je de toestand submit lees je alle nodes van de eerste group uit waar het attribuut data-connect op true staat (verbonden is met een andere node).
Voeg dus bijvoorbeeld aan alle nodes van group1 het attribuut toe:
Code (php)
1
<div class="node">auto<span class="node1" data-connect="false" data-id="0" data-use="false" data-connected-to=""></span></div>
(en zo voor alle nodes van deze group)
Vervolgens pas je deze inhoud aan op het moment dat twee nodes verbonden worden, zet dus na:
Code (php)
1
2
2
_left_node.attr('data-connect', true);
_right_node.attr('data-connect', true);
_right_node.attr('data-connect', true);
Het volgende:
Code (php)
1
_left_node.attr('data-connected-to', _right_node.attr('data-id'));
Op een soortgelijke wijze zou je de nodes uit group1 ook kunnen bijhouden in group2 als je aan group2 ook die "data-connected-to" attributen toevoegt. Maar je hebt in principe maar een van de twee nodig.
De bovenstaande code kun je al testen of alles goed verloopt met behulp van de Inspector-tool in de Developer Tools tab.
Vervolgens heb je dus een routine nodig die de nodes uit group1 afloopt en data-connected-to van de huidige node uitleest op het moment dat data-connected gelijk is aan "true".
-- volgt wellicht later, of probeer het zelf uit als oefening --
Ik kan daar nu zien dat bij de div,nodes / innerhtml welke verbindingen er gemaakt zijn.
Thomas van den Heuvel op 25/05/2020 17:52:30:
Mja het probleem is dus een beetje dat alle informatie weliswaar in _lines zit, maar deze variabele bestaat alleen binnen de connect() functie.
Inderdaad en iets te snelle redenatie mijnerzijds.
Ik was er ook al mee aan de slag gegaan en had nagenoeg dezelfde oplossing:
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
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
$(_parent + ' .group1 .node span').click(function() {
//console.log($(this).attr('data-connect'));
//[data-use="false"]
_this = this;
if ($(_this).attr('data-connect') != 'true' && $(_this).attr('data-use') == 'false') {
$(_parent + ' .group1 .node span').attr('data-use', 'false');
$(_this).attr('data-use', 'true');
_selectFirst = _this;
} else if ($(_this).attr('data-connect') == 'true') {
//console.log($(this).attr('data-id'));
//console.log(entry);
_lines.forEach(function(entry, index) {
if ($(_this).attr('data-id') == entry.id_left) {
$(entry.left_node).attr('data-use', 'false')
.attr('data-connect', 'false')
.removeAttr('data-connect_to') // toegevoegd;
$(entry.right_node).attr('data-use', 'false').attr('data-connect', 'false')
_lines.splice(index, 1)
}
});
_me.redrawLines();
}
});
$(_parent + ' .group2 .node span[data-use="false"]').click(function() {
if ($(_parent + ' .group1 .node span[data-use="true"]').length == 1 && _selectFirst != null) {
if ($(this).attr('data-connect') != 'true') {
_me.drawLine({
id_left: $(_selectFirst).attr('data-id'),
id_right: $(this).attr('data-id'),
left_node: _selectFirst,
right_node: this,
horizantal_gap: 10,
error: 'show',
width: 1,
status: 'accepted'
});
$(_selectFirst).attr('data-use', 'false');
$(_selectFirst).attr('data-connect', 'true');
// toegevoegd
$(_selectFirst).attr('data-connect_to', $(this).attr('data-id'));
$(this).attr('data-use', 'false');
$(this).attr('data-connect', 'true');
}
}
});
//console.log($(this).attr('data-connect'));
//[data-use="false"]
_this = this;
if ($(_this).attr('data-connect') != 'true' && $(_this).attr('data-use') == 'false') {
$(_parent + ' .group1 .node span').attr('data-use', 'false');
$(_this).attr('data-use', 'true');
_selectFirst = _this;
} else if ($(_this).attr('data-connect') == 'true') {
//console.log($(this).attr('data-id'));
//console.log(entry);
_lines.forEach(function(entry, index) {
if ($(_this).attr('data-id') == entry.id_left) {
$(entry.left_node).attr('data-use', 'false')
.attr('data-connect', 'false')
.removeAttr('data-connect_to') // toegevoegd;
$(entry.right_node).attr('data-use', 'false').attr('data-connect', 'false')
_lines.splice(index, 1)
}
});
_me.redrawLines();
}
});
$(_parent + ' .group2 .node span[data-use="false"]').click(function() {
if ($(_parent + ' .group1 .node span[data-use="true"]').length == 1 && _selectFirst != null) {
if ($(this).attr('data-connect') != 'true') {
_me.drawLine({
id_left: $(_selectFirst).attr('data-id'),
id_right: $(this).attr('data-id'),
left_node: _selectFirst,
right_node: this,
horizantal_gap: 10,
error: 'show',
width: 1,
status: 'accepted'
});
$(_selectFirst).attr('data-use', 'false');
$(_selectFirst).attr('data-connect', 'true');
// toegevoegd
$(_selectFirst).attr('data-connect_to', $(this).attr('data-id'));
$(this).attr('data-use', 'false');
$(this).attr('data-connect', 'true');
}
}
});
Het uitlezen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$("#submit"). on("click", function(e){
_nodes = $('.group1 .node span');
entries = new Array();
_nodes.each(function(idx, el){
target = $(el).attr('data-connect_to');
if (typeof target !== 'undefined') {
entries.push({'source' : $(el).data('id'), 'target' : target});
}
});
if (entries.length != _nodes.length) {
alert('Niet alle verbindingen zijn gemaakt');
return false;
}
$('#_lines').val(JSON.stringify(entries));
return true;
});
});
_nodes = $('.group1 .node span');
entries = new Array();
_nodes.each(function(idx, el){
target = $(el).attr('data-connect_to');
if (typeof target !== 'undefined') {
entries.push({'source' : $(el).data('id'), 'target' : target});
}
});
if (entries.length != _nodes.length) {
alert('Niet alle verbindingen zijn gemaakt');
return false;
}
$('#_lines').val(JSON.stringify(entries));
return true;
});
});
Sietsko Bos op 25/05/2020 08:20:01:
Ik kwam nog een probleempje tegen want de divs staan nu linksboven in de hoek.
Als ik die bijvoorbeeld in het midden van het scherm zet kloppen de lijnen die verbinden ook niet meer.
Als ik die bijvoorbeeld in het midden van het scherm zet kloppen de lijnen die verbinden ook niet meer.
Het canvas element dat wordt aangemaakt wordt geplaatst in de div #parentNodes_11, deze moet je dus positioneren.
Echter, omdat je floated elementen hebt moet je de code waar de verbindingen getekend worden ook wat aanpassen:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
_top_node = _left_node.parent().parent().parent().parent();
_adj_x = _top_node.offset().left;
_adj_y = _top_node.offset().top;
//Get Left point and Right Point
_left.x = _left_node.offset().left + _left_node.outerWidth()-_adj_x;
_left.y = _left_node.offset().top + (_left_node.outerHeight() / 2) - _adj_y;
_right.x = _right_node.offset().left-_adj_x;
_right.y = _right_node.offset().top + (_right_node.outerHeight() / 2) - _adj_y;
_adj_x = _top_node.offset().left;
_adj_y = _top_node.offset().top;
//Get Left point and Right Point
_left.x = _left_node.offset().left + _left_node.outerWidth()-_adj_x;
_left.y = _left_node.offset().top + (_left_node.outerHeight() / 2) - _adj_y;
_right.x = _right_node.offset().left-_adj_x;
_right.y = _right_node.offset().top + (_right_node.outerHeight() / 2) - _adj_y;
Gewijzigd op 26/05/2020 10:47:24 door Ger van Steenderen
Het werkt geweldig, alleen het positioneren lukt niet.
Ik heb een div gezet
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.img_box {
width:400px;
height:400px
border: 1px solid Peru;
font-family: arial;
margin: 200px;
}
width:400px;
height:400px
border: 1px solid Peru;
font-family: arial;
margin: 200px;
}
Deze heb ik om het form gezet, maar dan kloppen de lijnen nog niet.
Gewijzigd op 25/05/2020 20:21:46 door Sietsko Bos