Javascript navigate new screen

Javascript navigate new screen

  

Hello,

I'm trying to go to a new screen using javascript on a google map marker



The button is hidden to hold the actual transition and handles the click, but the page turns into a mess when clicked, just the element's container, but no actual content.


Are you sure you're not getting any client error on console?

Can you share some screenshot, and the complete JavaScript code you're using?

João Melo wrote:

Are you sure you're not getting any client error on console?

Can you share some screenshot, and the complete JavaScript code you're using?

Hey João, 

I was originally getting a 'end of input error' in my console, so I figured it was the quotation style I was using so I switched over to sending it to a function: 


The document ready gives me this error:

When I remove the document ready function I get a similar error, but it's: HideButton is not defined. 

I know StackOverflow likes to see some attempt, but it seems like this should work given these links:

https://www.outsystems.com/forums/discussion/25892/call-server-action-from-javascript/

and 

https://www.outsystems.com/forums/discussion/18380/call-server-side-function-using-javascript/


Is there a better way to do an onclick from a button in the marker preview? 


Thanks for your time!

Hi,


You are confusing things. when in javascript you cannot access the id's of widgets directly.

That last piece of code should be inside an expression to make it work.


J. wrote:

Hi,


You are confusing things. when in javascript you cannot access the id's of widgets directly.

That last piece of code should be inside an expression to make it work.


Hello J, 

I'm still getting the console error that the function does not exist?

When I remove it from the ready function it reloads the current page in error. I have another expression value with JS that is working using widget IDs. I'm not sure what it could be


Hi Stephen, 

If you are using the action request_truck somewhere else it shouldn't be inside the document ready. The document ready is only to have code that you want to run when that event happens. Can you explain better the error you have when that action isn't inside the document ready? 

Regards, 

Marcelo 

Hi,

Was able to test this and the solution is this

AddMarkerEvent Handler

SyntaxEditor Code Snippet

"function() {
    var contentString = '<button type=\'button\' onclick=\'request_truck()\'>Request Pickup</button>'

    var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

    infowindow.open(this.getMap(), this);
}"

Expression Value on screen

SyntaxEditor Code Snippet

"<script>
function request_truck()
{
    $('#" + SelectMarker.Id+ "').click();
}
</script>"

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi,

Was able to test this and the solution is this

AddMarkerEvent Handler

SyntaxEditor Code Snippet

"function() {
    var contentString = '<button type=\'button\' onclick=\'request_truck()\'>Request Pickup</button>'

    var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

    infowindow.open(this.getMap(), this);
}"

Expression Value on screen

SyntaxEditor Code Snippet

"<script>
function request_truck()
{
    $('#" + SelectMarker.Id+ "').click();
}
</script>"

Regards,

Marcelo


Hey Marcelo, 

I made a small test project to reproduce the error that I attached. I'm not sure if this is the correct way to move to a different screen with buttons generated with markers? The new screen is a mess if I go through the markers button, but it does navigate if I press the button (SelectMarker) directly.

Thanks so much for your help

Solution

Hi Stephen,

You just need to make this change to your code:

SyntaxEditor Code Snippet

        '<button type=\'buttton\' onclick=\'request_truck(); return false;\'>Request Pickup</button>'+

Include the "return false;" after the on click action. Why is this? Because since you are using a button this is interacting with the form that Outsystems includes on the page. This cancel the form to submit. 

Your other question if this is the correct way. If you can you can include on this onclick the link to the page right away instead of calling a js action to do a on click button to navegate. To get the link of an outsystems page you can use GetEntryUrl from HTTPRequestHandler.

Hope this help.

Regards,

Marcelo


Solution