Passing variables to ajax from php then into SQL query

Question

I am trying to pass a datepicker variable into an onclick ajax function which then passes that to another ajax method which passes the variable to an SQL query and then the query is passed back into the ajax to generate a chart. However I am getting an Uncaught TypeError: Cannot read property 'target' of undefined at jquery ui.

HTML

 <div class="sorting">

    <h4 class="d-inline">Start Date</h4>
    <input type = "text" id="start" />
    <h4   class="d-inline">End Date</h4>
    <input type = "text" id="end"/>
    <button type ="button" onclick="onClick()" class="btn btn-primary">Submit</button>
    <div class="filters float-right d-inline">
        <h5 class="d-inline">TRIBES &nbsp;</h5>
        <select class="dropdown" name="date-filter" id="date-filter" onchange="updateBarChart()">
            <option>Early Morning</option>
            <option>Wh</option>
            <option>Tribe 3</option>
            <option>Tribe 4</option>
        </select>
    </div>
</div>

ajax

var myLineChart;
    $( document ).ready(function() {
        $(function() {
            $("#start").datepicker();
        });

        $(function() {
            $("#end").datepicker();
        });


    });



     function onClick() {
         var start = $("#start");
         var end = $("#end");
         ajaxLineRequest(start,end);
     }


         $('#loadingbar').show();
        $.ajax({
        type: 'POST',

        url: 'ajax/tribe_data.php',
        data: {start:start,end:end},
        dataType: 'json',

        success: function (data) {

            console.log(data[0]);

            data = {
                    datasets: [{
                        data: data[0].datasets,
                        borderColor: ['rgba(255,99,132,1)'],
                        fill:false,
                        backgroundColor: [
                            'rgba(255,99,132,1)'

                    ]


                }],
                labels: data[0].labels

                };  
                    myLineChart = new Chart(document.getElementById("tribe"), {
                    type: 'line',
                    data: data,
                    options: {

                        legend: {
                            display: false
                        },
                        scales:{
                            yAxes:[{
                                ticks:{
                                    autoSkip: false
                                }
                            }]
                        }
                    }
                });


        },
      complete: function(){
            $('#loadingbar').hide();
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
        }
    });
}

In MyLineChart you have a random closing } just before onClick, also doing $("#start").val() worked for me. You also haven't posted your entire ajaxLineRequest function. I could not replicate the issue with your code. Please provide the full code and the full error (it will have a line number) — viion
– viion, Commented Sep 28, 2017 at 10:26

user3978398 · Accepted Answer · 2017-09-28 10:32:06Z

2

It is difficult for me to know at what point in the execution of this script the named function 'onClick' is attached as an event handler, however I have pointed out a few places you can improve the code.

Add a name attribute to the input elements e.g.

<input type = "text" id="start" name="start"/>

Then reference the value of the form inputs with:

var start = $("#start").val();

Your current code sends the jQuery element itself as the data items of the AJAX request, rather than the value of the inputs.

answered Sep 28, 2017 at 10:32

user3978398

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

Collectives™ on Stack Overflow

Passing variables to ajax from php then into SQL query

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related