Ik heb een script op het internet gevonden die ik graag wil gebruiken.
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?




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

Zou je code-tags willen gebruiken, en je code willen beperken tot relevante code?
- 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..

Zie de Veelgestelde Vragen, daar staan de opmaakcodes omschreven. :-)
Heb je ook een bron?
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 hier mijn test op fiddle

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.
Het maakt eigenlijk niet zoveel uit wat je precies doet, wat je wilt is een array in JavaScript transporteren naar PHP.

Gooi het volgende in ome Goegel: javascript array to PHP

eerste resultaat.

EDIT:
op stackoverflow staat:
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.
Dank voor je reactie Thomas.

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.
Het doen van een AJAX-call is niet moeilijk (vele voorbeelden beschikbaar op het internet); de jQuery library is al ingeladen. Rest enkel een $.ajax()-call op de goede plaats.

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)?
Het is de bedoeling dat je eerst de verbindingen maakt en dan op een submit knop drukt om de gegeven verbindingen te verzenden en dat ik met php de array kan uitlezen en controleren. Daarna wil ik de verbindingen opslaan in de database.
Hm, op dit moment wordt volgens mij bijgehouden dat een node verbonden is, maar niet waarmee. Deze informatie heb je nodig, maar ontbreekt op dit moment.

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.

Reageren