how can I use text from a leaflet popup to complete the url for an ajax call?

Question

I want to make an ajax call when clicking on text within a popup. The text in the leaflet popup is previous set by a different ajax call.

Here is the javascript for both ajax calls.

$("#button").click(function() {
    var name = document.getElementById('searchterm').value
    var stuff = $.ajax({
        url: 'http://localhost:8080/demo/points/' + name,
        type: 'GET',
        dataType: 'json' ,      
    })
    .done(function( json ) {
        obj = JSON.parse(stuff.responseText);
        var n;
        for (n in obj) {
            var marker = omnivore.wkt.parse(obj[n].wkt).addTo(map);
            var id = JSON.stringify(obj[n].id)
            var link = $('<a href="#" class="showgraph">'+id+'</a>').click(function() {
                var moreStuff = $.ajax({
                    url: 'http://localhost:8080/demo/graph/'+id
                    type: 'GET',
                    dataType: 'json' ,  

                })
                .done(function( json ) {
                    obj2 = JSON.parse(moreStuff.responseText);
                    // create an array with nodes
                    edges = new vis.DataSet(obj2["edges"])
                    // create an array with edges
                    nodes = new vis.DataSet(obj2["nodes"])
                    // create a network
                    var container = document.getElementById('mynetwork');
                    // provide the data in the vis format
                    var data = {
                        nodes: nodes,
                        edges: edges
                    };
                    var options = {

                        nodes: {
                            shape: 'circle'
                        },
                        edges: {
                            length: 250
                        }

                    };

                    // initialize your network!
                    var network = new vis.Network(container, data, options);
                });
            });
            var div = $('<div />').text('Address UPRN: ').append(link)[0];
            marker.bindPopup(div);


        }   
    });
});

When the second call is finished it adds a graph view using vis.js. This works fine when I manually enter the id.

The problem lies somewhere in this part of the code

for (n in obj) {
        var marker = omnivore.wkt.parse(obj[n].wkt).addTo(map);
        var id = JSON.stringify(obj[n].id)
        var link = $('<a href="#" class="showgraph">'+id+'</a>').click(function() {
            var moreStuff = $.ajax({
                url: 'http://localhost:8080/demo/graph/'+id
                type: 'GET',
                dataType: 'json' ,  

        })

I think, as the IDs are set on all the markers when they are added to the map. Then when I click on the text it uses the last ID set to complete the url for the ajax call.

So I guess what I am asking is how can I use the popup text as part of the second ajax call? or maybe how do I preset the url to be used for each of the popups?

I'm tempted to say your question is a duplicate of https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example Would you agree? — nikoshr, Mar 12 '18 at 16:46

score 0 · Accepted Answer · answered Mar 13 '18 at 11:07

I've solved the problem using .on() and passed the id value as data in the function.

    var link = $('<a href="#" class="showgraph">'+id+'</a>').on('click', { value: id }, function(x) {
        moreStuff = $.ajax({
            url: 'http://localhost:8080/demo/graph/' + x.data.value,
            type: 'GET',
            dataType: 'json' ,  

        })

This link was helpful, as was this link

how can I use text from a leaflet popup to complete the url for an ajax call?

1 Answers1