Put cell data into url string

tuuni · February 2021

Link to test case: https://jsfiddle.net/fvky370c/
Error messages shown: address is undefined
Description of problem:

I want to put the cell data into part of iframe url (part of url string). The cell data comes from mysql and the column header is "address" in the database.

The issue is that JS will output error saying that "data.address" is undefined and I am not sure how to fix it.

I may have doing some wrong here, I am not very good at it.

Thanks for help

kthorngren · February 2021

Your test case doesn't run. Without seeing your data and data structure its hard to say what the problem might be. You can use the browser's debugger to see what the variable data is.

Note that var data = table.rows().data(); is using rows().data() which will return an array of rows. If you want only one row use row() instead.

If you still need help please update the test case to show the issue you are having.

Kevin

tuuni · February 2021

Hello,

I can currently post only code part which are not PHP - server-side.

So little bit more information is on this site:
https://stackoverflow.com/questions/66111880/datatables-open-address-with-google-maps-in-bootstrap-modal-window

I somehow need to iterate all rows with the jquery function, I am not sure how to put it. There could be logical error which is the main problem

kthorngren · February 2021

I somehow need to iterate all rows with the jquery function

Use rows().every() to iterate all the rows.

Kevin

tuuni · February 2021

So,

something like this?..

    $(document).ready(function(){
        
        var table = $('#userTable').DataTable();
 
        $('#googlemaps').on('shown.bs.modal', (function() {
        var mapIsAdded = false;
        table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
            var d = this.data();
            
            return function() {
                if (!mapIsAdded) {
                    $('.modal-body').html('<iframe src="https://www.google.com/maps/embed/v1/place?key=XXXXXXXXXXX&q='+d.address+'" width="100%" height="500" frameborder="0" allowfullscreen style="border:0"></iframe>');
                    mapIsAdded = true;
                }
                };
            })());
        }

tuuni · February 2021

I am not sure if i need to make serverside connection again if i use api. The serverside connection is made at the top of the whole code part.

kthorngren · February 2021

I'm not sure what you are trying to do when you say you want to loop all the rows and use that data for the iframe URL.

Are you trying to make a request to https://www.google.com/maps/ for each row?

Or are you trying to build a data set of all the rows to send to https://www.google.com/maps/ once?

Maybe you can describe what your table contains and what you are trying to do with it.

Kevin

tuuni · February 2021

Alright, ill try to describe.

For the example I made mysql table column "address" which contains addresses: https://prnt.sc/yzz18i

Are you trying to make a request to https://www.google.com/maps/ for each row

Yes, I would want to do it. So, if you check the mysql example, every row has different address which I want to act as a link which opens in modal and shows corresponding map where the address part comes from mysql table, like so:

Note the d.address

$('.modal-body').html('<iframe src="https://www.google.com/maps/embed/v1/place?key=apikey&q='+d.address+'" width="100%" height="500" frameborder="0" allowfullscreen style="border:0"></iframe>');

kthorngren · February 2021

something like this?..

That code snippet looks like it might work. Have you tried it? What happens?

You can use the browser's debugger or console.log statements inside the loop to verify what d and d.address is. If these are correct then you might need to debug something outside of Datatables.

Kevin

tuuni · February 2021

Ok, so ran the code with console output.

The code actually outputs all the addresses in console, but in the return function there is nothing:

$(document).ready(function() {

      var table = $('#userTable').DataTable();

      $('#googlemaps').on('shown.bs.modal', (function() {
        var mapIsAdded = false;
        table.rows().every(function(rowIdx, tableLoop, rowLoop) {
          var d = this.data();
          console.log(d.address);

          return function() {
            if (!mapIsAdded) {
              $('.modal-body').html('<iframe src="https://www.google.com/maps/embed/v1/place?key=apikey&q=' + d.address + '" width="100%" height="500" frameborder="0" allowfullscreen style="border:0"></iframe>');
              mapIsAdded = true;
            }
          };
        });
      }));

Can the issue be related to js scope chain?

tuuni · February 2021

So, I tried this also, but I don't receive any console output if I put it like this:

    $(document).ready(function(){
            
            var table = $('#userTable').DataTable();
     
            $('#googlemaps').on('shown.bs.modal', (function() {
            var mapIsAdded = false;
            table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
                var d = this.data();
                
                
                return function() {
                    console.log(d.address);
                    
                    };
                });
            }));

kthorngren · February 2021

Sorry, I'm not sure how to implement the logic to build the modal you want with multiple calls to google maps. That is outside the scope of datatables functionality. Maybe Stack Overflow or some other resource will be able to help you build what you need.

Kevin

tuuni · February 2021

That's so sad we couldn't find a solution.

Maybe there is another different approach to this, so I post the link for followup:

https://stackoverflow.com/questions/66144478/datatables-javascript-scope-in-return-function-not-working

Put cell data into url string

Put cell data into url string

Answers

Howdy, Stranger!

Categories

DataTables

Put cell data into url string

Put cell data into url string

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables