0

I've searched through StackOverflow as well as multiple other sites but have not found a way to make this work as per the title. I have a base page that has a dropdown list automatically created as below:

<div class="tipfixtures">
    <div class='styled-select blue semi-square'>
        <select id="selFixRounds" onchange="getFixtureRound();">
            <?php for ($x = 1; $x <= $compRounds; $x++) {
                echo "<option value=".$x.">Round ".$x."</a>";
            } ?>
        </select>
    </div>
</div>
<div id='rndList'>
    <?php include ('fixtureTable.php'); ?>
</div>

The dropdown works fine and from this list I can select an entry, the following query assigns the value of the selected entry to fixtureRound:

    function getFixtureRound() {
        var fixRnd = document.getElementById("selFixRounds");
        var fixtureRound = fixRnd.options[fixRnd.selectedIndex].value;
        $.ajax({
            url: 'fixtureTable.php',
            type: 'GET',
            data: ({fixtureRound}),
        })
    }

It is supposed to pass the fixtureRound value back to the query in fixtureTable.php as fixtureTable.php?fixtureRound=number via AJAX. I've checked the console headers and the url shows as it should above and the params showing fixtureRound: number. However I cannot get fixtureTable to recognise the GET variable, have the following code in the fixtureTable.php file:

$round = $_GET['fixtureRound'];

But am getting an undefined variable error plus I am unsure how to get the php to display. Any help greatly appreciated as I'm probably missing something really obvious here!

** EDIT ** Ok so I've dialled back the dumb a tad and have added isset for the $_GET which has gotten rid of the undefined error plus it now showing the correct listings in the console - Response Preview & Payload whenever different selections are made in the dropdown menu showing fixtureTable.php is being run with the correct $round variable, however it is not displaying the correct results in the div.

Maistrenko Vitalii
  • 994
  • 1
  • 8
  • 16
Wignu
  • 77
  • 1
  • 1
  • 11
  • Why does your select have no name? you cant get an id , something like this – Ende Mar 20 '18 at 07:01
  • It has ' – Wignu Mar 20 '18 at 07:10
  • Read this https://www.w3schools.com/tags/ref_httpmethods.asp :) – Ende Mar 20 '18 at 07:42
  • `data: ({fixtureRound})` - what is that supposed to be? A GET parameter needs a name and a value, but you are not properly providing both here. https://stackoverflow.com/questions/15576548/how-to-pass-parameters-in-get-requests-with-jquery – CBroe Mar 20 '18 at 08:14
  • Please see my edit above, the `data: ({fixture})` datatype does work. – Wignu Mar 20 '18 at 08:43
  • 1
    _“however it is not displaying on the page”_ - of course it isn’t, because so far you are not actually doing anything with the data the server returns. https://stackoverflow.com/questions/10575928/ajax-response-inside-a-div – CBroe Mar 20 '18 at 08:44
  • Yes you're right @CBroe, I got so tied up with the undefined error I forgot about adding the success condition in. I've solved it now so thanks for putting me back on the right track. – Wignu Mar 21 '18 at 05:50

1 Answers1

0

Solved the last part of the problem by actually outputting fixtureTable.php in the rndList div using the success condition in the AJAX code. Here is the script code in full:

function getFixtureRound() {
var fixRnd = document.getElementById("selFixRounds");
var fixtureRound = fixRnd.options[fixRnd.selectedIndex].value;
    $.ajax({
        url: 'fixtureTable.php',
        type: 'GET',
        data: ({fixtureRound}),
        success: function(response) {
            $("#rndList").html(response);
        }
    }) 
}
Wignu
  • 77
  • 1
  • 1
  • 11