Laravel upon selecting from dropdown run ajax to scrape and display results?

Question

I have a dropdown with values such as:

<select style="padding-top:300px;">
            <form id="tram_stops">
                            <option onchange="tram_stops(this.value);" value="abraham-moss-tram">Abraham Moss tram stop</option>
                            <option onchange="tram_stops(this.value);" value="altrincham-tram">Altrincham tram stop</option>
                            <option onchange="tram_stops(this.value);" value="anchorage-tram">Anchorage tram stop</option>

and on change call ajax:

function tram_stops(tram_value) {
    $.ajax({
        url: '/tramsearch' + tram_value,
        type: 'post',
        dataType: 'html',
        success: function(data) {

        },
        error: function(data) {

        },
        headers: {
        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
        }                 
    });
}

And controller:

public function tram_search($tram_value) {
        $tram_text = $tram_value;
            if ($tram_text) {
                $client = new Client();
                $crawler = $client->request('GET', 'https://beta.tfgm.com/public-transport/tram/stops/'.$tram_text);
        echo "<div class=table-responsive><table class='table table-striped table-bordered table-hover'>";
        $tfgm = $crawler->filter('table[id="departures-data"]')->each(function ($node) {
            echo $node->html()."\n";
        });
        }
    }

So what I want to achieve:

allow user to choose a tram stop. Value is a slug which is used in request('GET') in Controller. I then want to display data from that request and output it on the page.

As of this moment, when I choose an option from a dropdown, nothing happens.

You've got your select and form tags mixed up... I wouldn't suggest opening a form inside a select element :) — Dale, Jun 16 '17 at 11:20

score 1 · Accepted Answer · answered Jun 16 '17 at 11:23

1

Try doing like this :

<form id="tram_stops">
    <select style="padding-top:300px;" onchange="tram_stops(this.value);" >
        <option value="abraham-moss-tram">Abraham Moss tram stop</option>
        <option value="altrincham-tram">Altrincham tram stop</option>
        <option value="anchorage-tram">Anchorage tram stop</option>
    </select>
</form>

answered Jun 16 '17 at 11:23

Pankaj Makwana

3,030
6
31
47

so I do get a html response, how do I tell it to display on page? – Przemek Jun 16 '17 at 11:31
`success: function(data) {` `$("#displayHTML").html(data);` `},` success callback function of ajax. `#displayHTML` id where you want to place html. – Pankaj Makwana Jun 16 '17 at 11:35
sorry just 1 more quick question, is there anyway to repeat (refresh) results even when onchange is not ran? so let's say someone choose Anchorage tram stop and leave it on the page, is there a way to call ajax anyway? let's say after 30 sec – Przemek Jun 16 '17 at 11:53
using `setTimeout()` you can send request periodically – Pankaj Makwana Jun 16 '17 at 11:55
where should it go? never used it before – Przemek Jun 16 '17 at 11:56
Refer this link https://stackoverflow.com/questions/33982057/refresh-div-to-retrieve-information-from-database-without-refreshing-wholepage – Pankaj Makwana Jun 16 '17 at 12:00
it calls it every 30 seconds now, but the value is 'undefined' and not the value that I have choosen the first time? – Przemek Jun 16 '17 at 12:03

Laravel upon selecting from dropdown run ajax to scrape and display results?

1 Answers1