load new URL ajax with variable param

load new URL ajax with variable param

zunkyzunky Posts: 9Questions: 0Answers: 0

Hi guys,
I'm trying to pass data using GET ajax function.
It works when I pass STATICs datas but doesn't work when I replace the STATIC data by a VARIABLE.
My end is to pass data (using get ajax) to an URL in order to add WHERE condition in my SQL/PHP request (in my /load-child.php) that sourced my table :smile:

As I said before, my GET ajax function works with static data (id = 5)
var id = '5'; url: 'http://localhost:80/DRmetroAppV1/assets/app/perso/mission/php/load-child.php?id=id',

Then, I've tried to replace "5" by a variable, but it doesn't work
var id = document.getElementById("id").value;

the plan is to change the ajax url parameter and to reload it.
I've tried to put this code into a button:
$('#sc_table_child_v1').DataTable().ajax.url( './assets/app/perso/mission/php/load-t.php?id=id' ).load();
and
$('#sc_table_child_v1').DataTable().ajax.url.reload();

When I use reload, it seems that the old url is using.
When I use ajax.url().load, it doesn't work when I use url with paramater (neither static, or variable): ?id='95' at the end

Does someone has any idea?

My end is simple: I want a Table source depending of an input value: I want pass data to use a Where condition in my php request launching by ajax.

that's my main table code:

    > 'use strict';
    > var KTDatatablesDataSourceAjaxClient = function() {
    > var initTable2 = function() {
    >              var id = '5';
    >       var table = $('#sc_table_child_v1');
    >       // begin first table
    >       table.DataTable({
    >           cache: true,
    >           ajax: {
    >               url: 'http://localhost:80/DRmetroAppV1/assets/app/perso/mission/php/load-child.php?id='+ id,
    >               type: 'GET',
    >               data: {
    >                   pagination: {
    >                       perpage: 50,
    >                   },
    > 
    >               },
    >           },
    > });
    > 
    > return {
    > 
    >       //main function to initiate the module
    >       init: function() {
    >           initTable2();
    >       },
    > 
    >   };
    > 
    > 
    > 
    > }();
    > 
    > 
    > 
    > jQuery(document).ready(function() {
    >   KTDatatablesDataSourceAjaxClient.init();
    > });

I hope I've explained clearly my issue ... thanks in advance for your time !
see you

Replies

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @zunky ,

    If you want to change the URL after the initialisation, you need to call ajax.url().

    Cheers,

    Colin

  • aharro12aharro12 Posts: 10Questions: 1Answers: 0

    If you use in your php file, you can then use $id for your WHERE statement

    $id = $_GET["id"];
    

    Then make sure you send as a data param in your table

    data: {
                id: +id,      
                       pagination: {
                           perpage: 50,
    
                       },
    

    Also post your php file, It should be sending back the correct data before the table will reload properly.

    Check the headers to confirm the request and receive.

  • zunkyzunky Posts: 9Questions: 0Answers: 0

    Hi Colin, Aharro12,
    Thanks for your help !

    @Colin: It doesn't work when I use url+?id=id

    @Aharro12: I definitly like your way to send data properly.
    it works when I use:
    id = '5'
    But it doesn't work when I use a variable input form:
    var id = document.getElementById("id").value;

    I use 3 files:
    The php.file (called by ajax), the 1rst js file (generating datatables: the one that call the ajax function) and the last js file which launch the "reload" function.

    Any idea?

    my php file:

    'If($_GET['id']>0){
    $formvalue = $_GET['id'];
    } else {
    $formvalue = '0';
    } /// my code ///'

    my first js file (generating datatables):

    var initTable2 = function() {
    var table = $('#sc_table_child_v1');
    var id = document.getElementById("id").value;
    table.DataTable({
    cache: true,
    ajax: {
    url: >'http://localhost:80/DRmetroAppV1/assets/app/perso/mission/php/load-child.php',
    type: 'GET',
    data: {
    id: +id,
    pagination: {
    perpage: 50,
    },
    },
    },

    the last js file which run the reload function:

    $("#custombtn").click(function(event){
    $('#sc_table_child_v1').DataTable().ajax.reload();
    alert(document.getElementById("id").value);
    });

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @zunky ,

    Yep, you're right, @aharro12 had the better answer. Something like this should work.

    Cheers,

    Colin

  • zunkyzunky Posts: 9Questions: 0Answers: 0

    Hi @colin ,
    thanks again.

    To be honest I don't understand :
    ` url : "/ajax/objects.txt",'
    What is /ajax/objects.txt ?

    About my code using:

    var id = document.getElementById("id").value;
    table.DataTable({
    ajax: {
    url: 'http://localhost:80/DRmetroAppV1/assets/app/perso/mission/php/load-child.php',
    type: 'GET',
    data: {
    id: +id,

    I think my issue is from : document.getElementById("id").value;
    in my js file, this function is read: "95" .(string)
    But I'm pretty sure that once passed into the php.file, $formvalue = $_GET['id']; is not any more a string...
    I think that because when I replace var id = document.getElementById("id").value; by var id = "95" , it works

    maybe I'm totally wrong.. I'm very new in php js ajax and coding xD

    thanks

  • aharro12aharro12 Posts: 10Questions: 1Answers: 0

    In your php file you are using string of 95 and checking if it is >0 so i think this might be an issue.

    Either convert to intval or remove the If statement to test.

    $formvalue = intval($_GET['id']);
    
  • zunkyzunky Posts: 9Questions: 0Answers: 0

    hey @aharro12

    I've just tested:

    $formvalue = intval($_GET['id']);
    $pdomodel = new PDOModel();
    $pdomodel->connect("localhost", "root", "", "sebappdb");
    $pdomodel->where("vol_missionid", $formvalue);
    $result = $pdomodel->select("tvol");
    header('Content-Type: application/json');
    $data2["data"] = $result;
    echo json_encode($data2);

    but when I press my #custombtn:

    $("#custombtn").click(function(event){
    alert(document.getElementById("id").value);
    $('#sc_table_child_v1').DataTable().ajax.reload();
    });

    nothing happens.
    the alert function displays the right "id" ... but it seems the table is not reloaded at all when I press the btn.

  • zunkyzunky Posts: 9Questions: 0Answers: 0

    I've also tester without the if statement but nothing works :( :(

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Is the data getting to and from the server? You can check that in the network tab in the developer's tools. If so, could you link to your page so we can take a look.

  • zunkyzunky Posts: 9Questions: 0Answers: 0

    hey @colin ,

    thanks a lot I've discover network tab dev tools. I can't share a page because it runs in localhost.
    So, it send the data to the serv:
    http://localhost/DRmetroAppV1/assets/app/perso/mission/php/load-child.php?id=0&pagination%5Bperpage%5D=50&_=1554672823955
    this url send, shows id=0 or it should have sent id=95

    So I recap:
    My button displays well the alert id = 95, and reload the AJAX.
    alert(document.getElementById("id").value); $('#sc_table_child_v1').DataTable().ajax.reload();

    it seems the problem is from the JS file :

        >     'use strict';
    >         var KTDatatablesDataSourceAjaxClient = function() {
    >         
    >         var initTable2 = function() {
    >               var table = $('#sc_table_child_v1');
    >               var id = document.getElementById("id").value;
    >               
    >               // begin first table
    >               table.DataTable({
    >               ajax: {
    >                       url: 'http://localhost:80/DRmetroAppV1/assets/app/perso/mission/php/load-child.php',
    >                       type: 'GET',
    >         
    >                       data: {
    >                           id: +document.getElementById("id").value,
    >                           pagination: {
    >                               perpage: 50,
    >                           },
    >         
    >                       },
    >     };
    >       return {
    >     
    >       //main function to initiate the module
    >           init: function() {
    >               initTable1();
    >               initTable2();
    >           },
    >       };
    >     }();
    >     jQuery(document).ready(function() {
    >       KTDatatablesDataSourceAjaxClient.init();
    >     });
    

    So I think the prob comes from var id = document.getElementById("id").value;
    it seems not reloaded: it keeps the data in this element at first when document is loaded (that seems logics because the function initTable2 is not reload when datatable is reload.)
    How can I do?

    thanks

  • zunkyzunky Posts: 9Questions: 0Answers: 0

    edit: I've write id:id and also:

    data: {
     id: +document.getElementById("id").value,
    

    but it send the old data id:0 or it should send id:95
    any idea?

  • aharro12aharro12 Posts: 10Questions: 1Answers: 0

    Can you try

    data: {
     id: <script>document.write(id);</script>,
    

    This is how I do mine on php pages

    $(document).ready(function() {  
                var table = $('#example').DataTable({
                    "ajax": {
                        "url": "/data.php",
                        "data": {
                            "zone": "<?php echo $ZoneID ?>",
                            "searchvalue": "<?php echo $searchValue ?>",
                                      }            
                                },
                    serverSide: true,
    
  • zunkyzunky Posts: 9Questions: 0Answers: 0

    Hi @aharro12 ,

    I've tried: id: <script>document.write(id);</script>, but it results (in console) an error: data is null.

    In my page.php, the id element is written like this:
    <name="id" class="form-control" id="id">

    In my page, I see the value 95 in the input element "id", when I press the btn:
    alert(document.getElementById("id").value); $('#sc_table_child_v1').DataTable().ajax.reload();
    alert shows '95', ajax is reload, but the "id" data sent is "null" or it should be "95".

    I don't understand ... I'm blocked on this point since 1 week..
    :-(

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @zunky ,

    I think we really need a test case to progress this , since $('element').val() should be working. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • zunkyzunky Posts: 9Questions: 0Answers: 0
    edited April 2019

    hi @colin,

    Thanks you so much, because you told me the solution earlier.

          data: function(d) {
            d.id = $('#id').val();      
          }
    

    In fact, (if I understand well) when data parameters are variable elements and are going to change when RELOAD, then we have to use this kind of function(d)

    thanks you so much my firend, it works like a charm now =)

This discussion has been closed.