locked
Javascript causing unwanted webform postback RRS feed

  • Question

  • User-962338856 posted

    I'm trying to use this javascript calendar on a webform, but clicking dates cause a postback, so the page is reloaded every time. Here's the function that causes the postback:

    mini_cal.on("click, focusin", ".a-date", function(){
    if(!$(this).hasClass('blurred'))
    showEvent($(this).data('event'));
    });`

    The original repo can be found here:  github.com/jesstrux/jquery-mini-event-calendar

    Adding e.preventDefault() stops the postback but then showEvent() is not called. On a plain html page everything works fine, but I need this on an aspx page cause I need to pull the events from db, server side. I hope someone could come up with a solution, since the author himself does not seem to be able to come up with one.

    Sunday, September 30, 2018 4:44 PM

Answers

  • User1724605321 posted

    Hi Premy ,

    When clicking the next month button , it will re-add the buttons inside the area , so the default type will be submit again . You can try :

    1. Use update panel and put the control inside it .

    2. If possible , modify the source code , search button class='a-date  part , modify the code and add type="button" property .

    3. Use other Jquery plugin , such as Jquery ui Datepicker .

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 2, 2018 2:26 AM

All replies

  • User1724605321 posted

    Hi Premy ,

    The element is button if you check the page source in F12 develop tools . In asp.net web forms it will submit and cause postback by default since the default type is "submit" . You can change the type to "button" after loading the calendar :

              $(document).ready(function(){
    			$("#calendar").MEC({
    				calendar_link: "example.com/myCalendar",
    				events: db_events
    			});
    			//if you don't have events, use
                $("#calendar2").MEC();
    
    
                $("button").prop("type", "button");
    
    
    
    	    });

    Then you can write the javascript function and use Ajax to call server side function to access the database .

    Best Regards,

    Nan Yu

    Monday, October 1, 2018 6:45 AM
  • User-962338856 posted

    Hi Nan Yu, thank u for your answer. Your solution "kinda works" cause if you click to go to another month and then click on a date, the page reloads (postback). On the current month it works fine.

    Having said that, I have trouble grasping how setting the type to button, which is already a button, prevents postback. If you'd have the time to explain me a little I'd appreciate it cause it would help me understanding js a bit better.

    Monday, October 1, 2018 3:27 PM
  • User1724605321 posted

    Hi Premy ,

    When clicking the next month button , it will re-add the buttons inside the area , so the default type will be submit again . You can try :

    1. Use update panel and put the control inside it .

    2. If possible , modify the source code , search button class='a-date  part , modify the code and add type="button" property .

    3. Use other Jquery plugin , such as Jquery ui Datepicker .

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 2, 2018 2:26 AM
  • User-962338856 posted

    Thank u Nan, the  type="button" routine did the trick.

    Tuesday, October 2, 2018 4:35 PM