Wednesday, 25 July 2012

Onchange event issue-Jquery tabs implementation - SharePoint 2010

Hi,
We were facing an issue with Jquery tabs implementation.
If we were using below code in a simple new item form, it was working fine.
But if we were using it in a new item form( in which Jquery tab used), it was not working at all.
$(document).ready(function () {
    $("input[title='FromDate']").change(function () {
        alert('From date');
    });
});
To create Jquery tab, we referred below url.
http://amitphule.blogspot.hk/2011/08/change-look-and-feel-of-sharepoint-page.html

We posted quetion on different forums like MSDN, stackoverflow. But unfortunately we did not recieve correct solution.
http://social.msdn.microsoft.com/Forums/en-US/sharepoint2010programming/thread/d034936b-c3a0-4c9d-b755-c964541c0fbb
http://stackoverflow.com/questions/11633375/jquery-tabs-implementation-sharepoint-2010/11633507#11633507


Finally, after scratching head for couple of days, I got below workaound.
Below workaround is combination of Juuery & simple Javascript.
Use of Javascript in below workaound: As Jquery was not binding Change event to text box, we used simple Javascript to do that.
Use of Jquery: To bind Change event to text box, we need ID attribute in Javascript. In SharePoint ID attribute for control generates run time & to get that ID we used Jquery.


<script type="text/javascript">
var strID;

_spBodyOnLoadFunctionNames.push("BindEvent");
function BindEvent()
{
SetID();
document.getElementById(strID).onchange = function() {FromDate_OnChange();}
}

function SetID()
{
strID=$("input[title='FromDate']").attr("id");
}

function FromDate_OnChange()
{
    //Do something;
}
</script>


Hope this will help.