Pass JavaScript function through Ajax to PHP file

Question

What I am trying to do:

I am working on a script intending to offer the user choices and depending on which choice they make, come up with a new choice. I have made two scripts for this, one for my HTML and the structure of my page and one for my PHP (getting the information from my server) and JavaScript (building the generated choices).

I am then using AJAX to communicate between these two scripts, or at least, that's what I am trying to do, but I am very new when it comes to AJAX and I cannot make it work.

I am trying to pass or somehow start the function 'generateProblems' from my page when one of the 3 buttons are pressed, preferably with the param 'id'.

Here's part of my index.html:

            <div id="testpile" class="inner cover">
                <div id="buttons">
                    <p><a id="rat" class="btn btn-default" role="button">Rationel</a></p>
                    <p><a id="emo" class="btn btn-default" role="button">Emotionel</a></p>
                    <p><a id="per" class="btn btn-default" role="button">Personel</a></p>
                </div>
            </div>

            <div id="testdrop" class="mastfoot">
                <p>Drop numbers here</p>
            </div>

<script type="text/javascript">
    $("#buttons").find(".btn").click(function() {
        var id = this.id;
        $("#testpile").load("include/responseget.php");
        $.post("include/responseget.php", {
            choice: "id",
        });
    });

</script>

And here's my PHP / Javascript:

<?php  include 'login.php';
//Query til at finde information til generation af question
$stmt = $conn->prepare("SELECT DISTINCT ResponseTitle, ResponseText FROM response Limit 8;");
$stmt->execute();
$result = $stmt->get_result();

  while($row = $result->fetch_assoc()) 
  {
      $rTitle_array[] = $row['ResponseTitle'];
      $rText_array[] = $row['ResponseText'];
  }

json_encode($rTitle_array);
json_encode($rText_array);

// close connection
mysqli_close($conn);
?>
<script type="text/javascript">
    $(function() {
        var phase = 0;
        var rTitle = <?php echo json_encode($rTitle_array); ?>;
        var rText = <?php echo json_encode($rText_array); ?>;

        function generateProblems(param) {
            var problemDef = param;
            $("#buttons").hide();
            var numbers = [1, 2, 3, 4, 5, 6, 7, 8];
            for (var i = 0; i < 8; i++) {
                $('<div>' + rTitle[i] + '</div>').data('number', rTitle[i]).attr('id', 'problem' + rTitle[i]).appendTo('#testpile').draggable({
                    containment: '.site-wrapper',
                    stack: '#testpile div',
                    cursor: 'move',
                    revert: true
                });
                $('<div>' + rText[i] + '</div>').data('number', rText[i]).attr('id', 'problem' + rText[i]).appendTo('#testpile');
            }


            $('#testdrop').droppable({
                drop: handleDropEvent,
                accept: '#testpile div'
            });


            function handleDropEvent(event, ui) {
                var problemNumber = ui.draggable.data('number');
                var problemCombination = problemDef + problemNumber;
                ui.draggable.draggable('disable');
                ui.draggable.draggable('option', 'revert', false);
                phase++;
                alert('ProblemCombination is "' + problemCombination + '", phase is "' + phase + '" ');
                $("#testpile").children().hide();

                generateProblems(problemCombination);

            }
        }

    });

</script>

What am I doing wrong? The code worked pretty well before I split it up, but now clicking one of the buttons generate nothing.

job3dot5 · Accepted Answer · 2016-05-19 14:58:33Z

1

This is not the right way to do. Keep your php away from html/js. You can't access to your html from another script which is not directly included in it.

Re-add your javascript part to index.html
In your php script return something at the end like return json_encode($rTitle_array);
In your jquery/ajax post, get the returned value and use it

A sample from the jquery doc:

  var posting = $.post( url, { s: term } );

  // Put the results in a div
  posting.done(function( data ) {
    var content = $( data ).find( "#content" );
    $( "#result" ).empty().append( content );
  });

answered May 19, 2016 at 14:58

job3dot5

9007 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nenn Over a year ago

That makes a lot of sense, but you would then use something like the above script to put the results in a div? How would you alter that in order to make the content draggable? and in a loop for each column? as in my try. Also, thank you very much for your answer, I am just confused about the above.

Collectives™ on Stack Overflow

Pass JavaScript function through Ajax to PHP file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related