load new URL ajax with variable param

zunky · April 2019

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

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

colin · April 2019

Hi @zunky ,

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

Cheers,

Colin

aharro12 · April 2019

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.

zunky · April 2019

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);
});

colin · April 2019

Hi @zunky ,

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

Cheers,

Colin

zunky · April 2019

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

aharro12 · April 2019

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']);

zunky · April 2019

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.

zunky · April 2019

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

colin · April 2019

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.

zunky · April 2019

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

zunky · April 2019

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?

aharro12 · April 2019

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,

zunky · April 2019

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..
:-(

colin · April 2019

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

zunky · 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

load new URL ajax with variable param

load new URL ajax with variable param

Replies

Howdy, Stranger!

Categories

DataTables

load new URL ajax with variable param

load new URL ajax with variable param

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables