1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. using button switch onclick javascript

using button switch onclick javascript

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>

3 Replies
VK Vinoth Kumar Sundara Moorthy Syncfusion Team 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 


AF afiqdoherty 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 :)

SI Silambarasan I Syncfusion Team 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 


Loader.
Up arrow icon