We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

using button switch onclick javascript

Thread ID:

Created:

Updated:

Platform:

Replies:

141762 Jan 3,2019 03:16 AM UTC Jan 4,2019 06:12 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Switch
afiqdoherty
Asked On January 3, 2019 03:16 AM UTC

Hi,

I have a landing page that enable user to select either they want the webpage to be automatically refresh every 1 minutes or not. My idea is using the MVC switch button rather than using single button. but i am not familiar with ejs()switch command. appreciate if you can help me to figure this out. Thanks :)

my plan view :

<div class="container switch-control">
     <label for="unchecked" style="padding: 10px 24px 10px 0"> 1 minutes refresh </label>
      @Html.EJS().Switch("unchecked").Render()
</div>

my current view:

<input type="button" value="1 Minute" onclick="setRe(60);">
<input type="button" value="No Refresh" onclick="setRe(0);">

javascript :

<script type="text/javascript">
    var reIt

    function doit() {
        if (window.location.reload)
            window.location.reload(true);
        else if (window.location.replace)
            window.location.replace(unescape(location.rel='nofollow' href))
        else
            window.location.rel='nofollow' href = unescape(location.rel='nofollow' href)
    }

    function startUp() {
        if (unescape(document.cookie).split(';')[1])
            reIt = setTimeout("doit()", unescape(document.cookie).split(';')[1])
        else
            reIt = setTimeout("doit()", 60000)
    }

    function setRe(val) {
        clearTimeout(reIt)
        if (val == 0) {
            document.cookie = ''
            return;
        }
        else
            document.cookie = val * 1000
        startUp();
    }
    onload = startUp
</script>

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On January 3, 2019 06:45 PM UTC

Hi Muhammed, 
  
Thank you for contacting Syncfusion support. 
  
We have checked your requirement ‘To refresh the page automatically at every 1 minute using switch’ and it can be achieved using ‘change’ event and ‘enablePersistence’ property in Switch control. We have created a sample to refresh the application for every 1 minute when switch is checked and stop refreshing when it is unchecked. 
 
We have hosted the sample in online and same can be found in below link, 
  
Please check the below code example, 
  
<label for="unchecked" style="padding: 10px 24px 10px 0"> 1 minutes refresh </label> 
@Html.EJS().Switch("unchecked").Change("setRe").EnablePersistence(true).Render() 
  
<script type="text/javascript"> 
    var interval; 
 
    //To relod the page based on setinterval. 
    function doit() { 
        clearInterval(interval); 
        if (window.location.reload) 
            window.location.reload(true); 
    } 
 
    //Will trigger on page reload. 
    function reloadpage() { 
        //To get the instance of switch component 
        var instance = ej.base.getComponent(document.querySelector("#switch"), 'switch'); 
        if (instance.checked) { 
            interval = setInterval(doit, 60000); 
        } 
    } 
 
    //This function will trigger while changing state in switch. 
    function setRe(val) { 
        if (val.checked) { 
            interval = setInterval(doit, 60000); 
        } 
        else { 
            clearInterval(interval); 
        } 
    } 
 
    onload = reloadpage; 
</script> 
  
 
Could you please check the above sample and get back to us with more information if you need any further assistance on this? 
  
Regards, 
Vinoth Kumar S 


afiqdoherty
Replied On January 4, 2019 03:13 AM UTC

Thanks so much for the solution...I think its working based on the sample code given. this because, when i switch to check for auto refresh, my page only refresh once. the next 1 minute will not be refreshed. it may caused by errors in my others javascript in this page, I think. I need to rechecked back my code.

Anyway, the solution is working and thank you very much :)

Silambarasan I [Syncfusion]
Replied On January 4, 2019 06:12 AM UTC

Hi Muhammad Afiq, 
 
Sorry for the inconvenience caused. 
 
We have checked the cause of auto reload is not worked for second time and it is occurred due to incorrect Switch id is passed for getting component instance in ‘reloadpage()’ function (Only misplaced with the provided code example alone – And, provided local sample & online demo sample are working properly).  Please refer the below modified code example to achieve your requirement. 
 
MODIFIED CODE EXAMPLE: 
 
<label for="switch" style="padding: 10px 24px 10px 0"> 1 minutes refresh </label>  
@Html.EJS().Switch("switch").Change("setRe").EnablePersistence(true).Render()  
   
<script type="text/javascript">  
    //..  
  
    //Will trigger on page reload.  
    function reloadpage() {  
        //To get the instance of switch component  
        var instance = ej.base.getComponent(document.querySelector("#switch"), 'switch');  
        if (instance.checked) {  
            interval = setInterval(doit, 60000);  
        }  
    }  
  
     //..  
  
</script>  
 
 
Could you please check the above solution and get back to us if you need further assistance? 
 
Regards, 
Silambarasan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon