How to prevent the page reload in javascript button filed

Dear All,

Hope all are doing good.

I am new to add JavaScript code implementing in outsystems.

I am implementing the web screen using totally with java script code. 

In java script code inside the body is like: 

----------

<body>

    <div class="w3-sidebar w3-bar-block w3-card w3-animate-left" style="display:none" id="mySidebar">

      <button class="w3-bar-item w3-button w3-theme-l1" onclick="w3_close()">Close ×</button>

      <canvas id="labelCanvas" ></canvas>

    </div>

            <div id="main">

      <div class="w3-theme">

        <button id="openNav" class="w3-button w3-xlarge" onclick="w3_open()">?</button>

        <button id="delivery_name" class="w3-button w3-xlarge" style="margin-left: 40%;"></button>

      </div>

      <div class="parent" id="visualization">

        <div id="instruction" style="color: rgb(135, 235, 152);">Sample screen</div>

        <canvas id="Mycanvas"></canvas>

      </div>

    </div>

------------


When opens the screen, workin perfect, but here in the screen left side, there is icon to clcik to show the particulars, So when click on that icon screen will expand and actually will show the details then when click on close, it should close side part. 

But problme is here, when clicks on the side bar icon lefside, the page is reloading and showing blank. 

when we try with javascript side in local system working perfect. 

here due to page is reloading automatically when clicks on the side bar, screen is blank. 

Pls check the attachement for more info. 

1.when clicks on the lefside bar, usually need to show the details in second screenshot But it is not showing those. Screen is going to blank like in 3 screenshot. 

2. this is actual need like these details. (working in local for sample purpose).

3. after clicks on the side bar/icon, page is reloading and blank screen displaying. 


Cud you help me on how to change the default webpage html code manually to this particular we screen, 


Solution

Hi Gangadhara,

Are you developing this in OutSystems, because from your post, I don't see any OutSystems related issue.

Either way, you have to debug your code in the browser with the dev tools, also expect the browser console for any errors. 

Regards,

Daniel

Solution

Hi,

You can use this script and include it in your page. Whenever your page try to reload a pop-up will appear. hence, prevent a direct reloading.

I hope this will help you.

<script type="text/javascript">
    window.onbeforeunload = function() {
        return "any alert mssg";
    }
</script>

Thanks,
Akif

Daniël Kuhlmann wrote:

Hi Gangadhara,

Are you developing this in OutSystems, because from your post, I don't see any OutSystems related issue.

Either way, you have to debug your code in the browser with the dev tools, also expect the browser console for any errors. 

Regards,

Daniel

 Hi Daniel, 

Thanks for the reply.

Here when i inspect the code, i see the below post action is exeucuting. This /Packaging.aspx is the my webscreen page name url. 

 

Thanks
Gangadhara.

Akif Arfien wrote:

Hi,

You can use this script and include it in your page. Whenever your page try to reload a pop-up will appear. hence, prevent a direct reloading.

I hope this will help you.

<script type="text/javascript">
    window.onbeforeunload = function() {
        return "any alert mssg";
    }
</script>

Thanks,
Akif

 Hi Akif,

Sure I wil try this. 

But Is there any wat to prevent the defaul html code for webscreen. Also is there any way to write custom HTML code so that I can remove the few code manully. 

Thanks

Gangadhara.

 

Hi All,

Inside the java script supporting files, changed the code and tested. Now working as expected.  

Thanks all for your support.
Gangadhara.