Automatically save edit form because of HTML and display objects Topic is solved

[88tc88]

Hi there ,

I have been running into a specific problem in terms of user convenience and I can't seem to find the solution. I have the following 3 object on an Edit Form:

1. A Lookup object where I lookup and select a customer from my customer tabel
2. A display object that displays the adress of the chosen customer (this adress also comes from the customer table)
3. An HTML object that shows the customer address on Google maps

When I currently lookup a customer I have to manually save or refresh the edit form for the display address to update/change accordingly. After this, I have to manually save or refresh the form a second time to update the Google map, which uses the adress that was updated on the previous refresh. On top of this, I would like to have the form also refreshed once when opening. At this moment this doesn't happen and the Google Maps HTML shows a "consent.google.com has rejected the connection" error together with a grey HTML image. After a refresh of the form the page is just working fine.

Any ideas on how to solve this? Personally I am think about an auto refresh/save, but if there are better options please let me know as well. I already tried some custom coding but nothing has made it work for me yet.

Thanks in advance!

[Janusz]

these functions can be added in any place of js code to save and refresh
for example to the JS lookup
https://wiki.nubuilder.cloud/index.php? ... SaveAction
https://wiki.nubuilder.cloud/index.php? ... Breadcrumb

[steven]

Hi 88tc88,

If you can share your database here (zipped - with nothing sensative in it) we can have a look.


Steven.

[kev1n]

When I currently lookup a customer I have to manually save or refresh the edit form for the display address to update/change accordingly.

Hi,

To update the display address automatically when looking up a customer, use the lookup's "LUJS" event and refresh the display object with nuRefreshDisplayObject().

After this, I have to manually save or refresh the form a second time to update the Google map

Then you can refresh the iframe’s URL using JavaScript:

Code: Select all

// Triggered after nuRefreshDisplayObject() is called
function nuDisplayObjectRefreshed(id) {
  if (id === "id_of_your_display_object_here") {
    refreshMap();
  }
}

function refreshMap() {
  var iframe = document.querySelector("#gmap-canvas iframe");
  iframe.src = iframe.src; // Reloads the iframe
}

[88tc88]

Thanks all! The display is working now bij adding the NuSaveAction tot the LUJS event.

However, the option of Kev1n doesn't seem to work, the HTML looks like this:

Code: Select all

<div class="mapouter">
    <div class="gmap_canvas">
        <iframe 
            width="460" 
            height="380" 
            id="gmap_canvas" 
            src="https://maps.google.com/maps?q=#afspraak_DISPL_AUTO_bezoekadres#&zoom=15&output=embed" 
            frameborder="0" 
            scrolling="no" 
            marginheight="0" 
            marginwidth="0">
        </iframe>
    </div>
</div>

<style>
    .mapouter {
        position: relative;
        text-align: center; /* Zorgt ervoor dat de kaart gecentreerd wordt */
        height: 380px;
        width: 460px;
        margin: 0 auto; /* Centreert de kaart op de pagina */
    }

    .gmap_canvas {
        overflow: hidden;
        background: none !important;
        height: 380px;
        width: 460px;
    }

With #afspraak_DISPL_AUTO_bezoekadres# being the address from the display field that has just been updated using the NuSaveAction. I tried to adjust and put the code of Kev1n in the custom code Javascript of the HTML object and tried change between the different events (onchange, onnuload, onclick, etc.)

On top of that, will this solution help me with the error when opening the edit form?

[kev1n]

Instead of using a Hash Cookie, which might not be refreshed when another address is chosen, give this code a go:

Code: Select all

 function updateMap(address) {
        // Encode the address to be URL-safe
        var encodedAddress = encodeURIComponent(address);
        var mapUrl = "https://maps.google.com/maps?q=" + encodedAddress + "&zoom=15&output=embed";

        // Set the iframe src attribute
        $("#gmap_canvas").attr("src", mapUrl);
    }

    // refresh when form is loaded:
    $(document).ready(function () {
        updateMap(nuGetValue('afspraak_DISPL_AUTO_bezoekadres')); 
    });