Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

In the Calendar with Add button, after the JS Calendar starts completely, the HTML below appears and I would like to run my JS with AsynchronousViewDefault_CalendarView attribute. However, it doesn't work at all.

Otherwise, is there any solution for my problem that I need to make sure that I can use the AsynchronousViewDefault_CalendarView attribute to run my JS?

HTML:

<div id="AsynchronousViewDefault_CalendarView">
    <div class="ms-acal-header">
    <div>
        <table class="ms-acal-month">
        </table>
        <div class="ms-acal-vlink">
            <table>
        <tbody>
            <tr>
                <td><a href="javascript:void(0)" title="Add" evtid="new_item">
                    <img border="0" src="/_layouts/images/caladd.gif">Add</a></td>
            </tr>
        </tbody>
    </table>
    </div>
</div></div></div>

Javascript:

$( "#AsynchronousViewDefault_CalendarView div div table" ).on( "click", function() {
    var abc = $("#AsynchronousViewDefault_CalendarView").find('a[title="Add"] [evtid="new_item"]').hover(
        function () {
            $(this).attr('href', 'http://share/Lists/Calendar.aspx?P=P1');
        }
    );
});

or

$( "#AsynchronousViewDefault_CalendarView" ).on( "click", '.ms-acal-vlink' , function() {
    var abc = $("#AsynchronousViewDefault_CalendarView").find('a[title="Add"] [evtid="new_item"]').hover(
        function () {
            $(this).attr('href', 'http://share/Lists/Calendar.aspx?P=P1');
        }
    );
});
share|improve this question
    
Make sure your HTML is rendered before the JS is executed. Try using $( document ).ready or load function –  Mohit Apr 24 '14 at 5:43

2 Answers 2

up vote 1 down vote accepted

I've done this before. The problem is that the #AsynchronousViewDefault_CalendarView is empty when the body loads, then its content is rendered asynchronously.

You need to attach the on click handler function to some outer container that you know it's there when the body loads. This is how I did it:

_spBodyOnLoadFunctionNames.push("spReady");

function spReady() {
  $('.s4-ba').on('click', '.ms-acal-item a', function(){ 
     console.log('clicked');  
  });
}
share|improve this answer
    
Thank you for your code. I am sure that it works very well because I got the same idea with you. –  PMay 1903 Apr 24 '14 at 9:47

Here is my solution, please let me know if it doesn't work with your SharePoint or anything goes wrong :-).

$(document).on("click", "#AsynchronousViewDefault_CalendarView .ms-acal-vlink", function () {
        var find_aTag = $(("#AsynchronousViewDefault_CalendarView").find('a[title="Add"]'));
        find_aTag.attr("href", "http://share/Lists/Calendar.aspx?P=P1");
    });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.