How to echo a php form GET data submitted by jquery into another javascript code and URL?

Question

I am developing an application that fetches and displays raster/image maps (png, tif), into a leaflet map. However, I didn't like the page and the map refresh upon form submission.

In addition, I want the map to only refresh the image layer. Using the normal way, it is full of refershes. So I managed to get this code working.

    $('#forms').on('submit',function(e) {
        $.ajax({
            url:'fun.php',
            data:$('#forms').serialize(),
            type:'GET',
            success:function(result){
                $('#downloads').html(result);
            }
        });
        e.preventDefault();
    });

And the leaflet image layer here.

raster = L.imageOverlay('<?php echo $datafile;?>', [[33.00, 31.00], [43.50, 35.00]]);  

So the exact problem is, the $datafile couldn't be echoed on leaflet raster layer and I would like to reset the form values after submit. I tried to use setUrl from leaflet method on image layer but it doesn't work.

Thank you for the help!

Answer 1

The problem is solved. First, I changed echo $datafile to echo '<script type="text/javascript">imageUrl = "'. $datafile. '"; </script>'; echo '<script type="text/javascript">imageUrl = "'. $datafile. '"; </script>'; This js variable is echoed in the html output page. Then, it was possible to call the js variable, imageUrl.

There, was another problem with the image display. I was hiding the image layer div using display:none when no file is found. That cause the image not to show. Thus, in the jquery success function, I had to add, $("img.leaflet-image-layer.leaflet-zoom-animated").show();

Then a friend helped me to add a function using setUrl() function of leaflet which is used to change the imageUrl asynchronously.