array terugkrijgen van een javascript naar php

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Sietsko Bos

Sietsko Bos

23/05/2020 20:22:29
Quote Anchor link
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?


Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
Gewijzigd op 23/05/2020 21:04:26 door Sietsko Bos
 
PHP hulp

PHP hulp

17/10/2021 14:23:29
 
- Ariën -
Beheerder

- Ariën -

23/05/2020 20:26:17
Quote Anchor link
Zou je code-tags willen gebruiken, en je code willen beperken tot relevante code?
 
Sietsko Bos

Sietsko Bos

23/05/2020 20:29:27
Quote Anchor link
- 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..
 
- Ariën -
Beheerder

- Ariën -

23/05/2020 20:30:12
Quote Anchor link
Zie de Veelgestelde Vragen, daar staan de opmaakcodes omschreven. :-)
 
Thomas van den Heuvel

Thomas van den Heuvel

23/05/2020 21:09:10
Quote Anchor link
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?
 
Sietsko Bos

Sietsko Bos

23/05/2020 21:22:16
Quote Anchor link
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.
Gewijzigd op 23/05/2020 21:30:24 door Sietsko Bos
 
Thomas van den Heuvel

Thomas van den Heuvel

23/05/2020 21:29:39
Quote Anchor link
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:
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
 
Sietsko Bos

Sietsko Bos

24/05/2020 09:15:36
Quote Anchor link
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.
 
Thomas van den Heuvel

Thomas van den Heuvel

24/05/2020 13:16:19
Quote Anchor link
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)?
Gewijzigd op 24/05/2020 13:16:49 door Thomas van den Heuvel
 
Sietsko Bos

Sietsko Bos

24/05/2020 15:23:45
Quote Anchor link
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.
 
Thomas van den Heuvel

Thomas van den Heuvel

24/05/2020 16:53:36
Quote Anchor link
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.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

24/05/2020 18:55:30
Quote Anchor link
@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):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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();
    });

In php kan je dit dan weer uitlezen met:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
json_decode($_POST['_lines'], true);
?>
 
Sietsko Bos

Sietsko Bos

24/05/2020 19:26:03
Quote Anchor link
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
Gewijzigd op 24/05/2020 20:50:00 door Sietsko Bos
 
Thomas van den Heuvel

Thomas van den Heuvel

24/05/2020 22:06:15
Quote Anchor link
_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).
Gewijzigd op 25/05/2020 00:55:59 door Thomas van den Heuvel
 
Sietsko Bos

Sietsko Bos

25/05/2020 08:20:01
Quote Anchor link
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.
 
Thomas van den Heuvel

Thomas van den Heuvel

25/05/2020 16:27:32
Quote Anchor link
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.
 
Sietsko Bos

Sietsko Bos

25/05/2020 16:33:12
Quote Anchor link
Zou je me hiermee kunnen helpen?
Ik weet echt weinig tot niets van javascript dus ik kan het zelf niet fixen.
 
Thomas van den Heuvel

Thomas van den Heuvel

25/05/2020 17:52:30
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
_left_node.attr('data-connect', true);
_right_node.attr('data-connect', true);

Het volgende:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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 --
 
Sietsko Bos

Sietsko Bos

25/05/2020 19:17:25
Quote Anchor link
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.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

25/05/2020 19:21:48
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
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
    $(_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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
    });
  });


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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
Gewijzigd op 26/05/2020 10:47:24 door Ger van Steenderen
 
Sietsko Bos

Sietsko Bos

25/05/2020 20:20:34
Quote Anchor link
Thanks Ger,

Het werkt geweldig, alleen het positioneren lukt niet.

Ik heb een div gezet

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
    .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.
Gewijzigd op 25/05/2020 20:21:46 door Sietsko Bos
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.