array terugkrijgen van een javascript naar php

@Thomas, dat wordt bijgehouden in _lines.

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):

	$("#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();
	});

In php kan je dit dan weer uitlezen met:

<?php
json_decode($_POST['_lines'], true);
?>

Bedankt voor de code.

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

_lines is alleen bekend binnen $.fn.connect, daarbuiten bestaat deze variabele niet.

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).

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?

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?

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.

Dit is een probleem in de opmaak-hoek, dit kun je het beste in afzondering oplossen.

Zou je me hiermee kunnen helpen?
Ik weet echt weinig tot niets van javascript dus ik kan het zelf niet fixen.

Mja het probleem is dus een beetje dat alle informatie weliswaar in _lines zit, maar deze variabele bestaat alleen binnen de connect() functie.

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:

<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:

_left_node.attr('data-connect', true);
_right_node.attr('data-connect', true);

Het volgende:

_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 heb de code toegevoegd en gekeken met f12 bij Console.
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:

    $(_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');
        }
      }
    });

Het uitlezen:

	$("#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;
	});
  });

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.

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:

			_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;

Thanks Ger,

Het werkt geweldig, alleen het positioneren lukt niet.

Ik heb een div gezet

	.img_box {
    
		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.