Prevent page from reload after running a piece of Javascript code

Mason Yang asked on August 30, 2019 21:45

Hi all,

We are trying to add a widget for a LibCal calendar to one of our pages. After adding the script to the head html section, we can display the calendar on our page correctly, but we are having problem to show the next month or week's calendar. What I found out is that the page will reload itself after a user clicks on the next month/week button on the calendar. So, the page will show the next week/month calendar for a split of second and then reload to the current month/week calendar. I can't find a way to prevent the page to reload. I searched online and someone suggested to check the box of "Use update panel" in the AJAX section, but it still won't work. Any suggestions? Thanks in advance for your help!

Mason

javascript

Recent Answers

Brenden Kehren answered on August 30, 2019 21:59

Are you sure it's reloading and not an actual link? Does the URL change and redirect to a new page with different URL parameters? If so, then you don't have a button action, you have a navigation action and you can't stop the page from reloading.

If it truely is a button and performing a submit, then there are multiple things you can do. One is to check the Use Update Panel checkbox but that would need to be on the actual HTML with the button in it (not the javascript code). IF there are other modal dialog issues, you may have to do some fancy javascript work to get the modal code outside of the <form> tag becuase it causes issues with postback. There are probably 2 or 3 other things too to look at as well. Not knowing how everything is setup, makes it hard to diagnose.

0 votesVote for this answer Mark as a Correct answer

Mason Yang answered on August 30, 2019 22:23

Hi Brenden,

Thanks for your suggestions! I have a test page at: https://www-test.marymount.edu/Academics/Library-Learning-Services/About-L-LS/L-LS-Hours. On the page, I edited HTML Envelop section to add Javascript code to "Content before" and "Content after" section as following:

Content before:

Content after: Then, I selected "Use update panel". At last, I added the following code to the source section for the content panel:

Now, the page will show the current week calendar. But when I try to see next week calendar by clicking on the next button, it show next week's calendar for a split of second, then the whole calendar will gone missing. If I refresh the whole page, the current week calendar will come back. Even thought I used Kentico for several years, but I don't have access as an administrator until recently, so I am pretty new to those advanced features. Thank you for your suggestion in advance!

Mason

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on August 30, 2019 22:30

I believe the blank calendar when moving to the next week is due to the partial update of the calendar. Your scripts before and after may have to be in the update panel to allow the calendar to function properly.

0 votesVote for this answer Mark as a Correct answer

Mason Yang answered on August 30, 2019 22:53

I put all those scripts of before and after in the update panel's source code and it does the same. Still the same problem. Thanks!

Mason

0 votesVote for this answer Mark as a Correct answer