using button switch onclick javascript

[afiqdoherty]

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]

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, 

http://internaldemo.syncfusion.com:1717/F141762/mvcsample 

  

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> 

  

Sample link: http://www.syncfusion.com/downloads/support/forum/141762/ze/WebApplication2-857225106 

 

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]

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]

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