Sunday 15 April 2012

Jquery show/hide breaks sharepoint date picker functionality -



Jquery show/hide breaks sharepoint date picker functionality -

i have built custom new , edit form in sharepoint 2007 jquery 1.11, has customized line item style fields showing or hiding based on corresponding set of checkboxes. jquery functionality working fine, date picker functionality sharepoint doesn't seem work on fields i've hidden , showed again. when unhide element removing style tag (display:none) date picker works properly, jquery touches functionality goes away. below illustration of of code.

html

<tr id="trtohideshow" style="display:none"> <td>line item label</td> <td>sharepoint date field picker<td> </tr>

js

//show hide line item referral info based on check box status of services interested in $("#checkboxid").on("click", function() { if ( $("#checkboxid").is( ":checked" ) ){ $("#trtohideshow").show("slow"); }else{ $("#trtohideshow").hide("slow"); }

ultimately solved problem getting away using show() , hide(), , using css class instead of setting display:none inline style on tr.

i created next css class:

<style> .hiderow{ display:none; visibility:hidden; } </style>

and applied .hiderow class each tr element:

<table> <tr id="trtohideshow" class="hiderow"> <td>line item label</td> <td>sharepoint date field picker<td> </tr> </table>

then in jquery function adds/removes class of the row depending on :checked, used addclass , removeclass on tr element:

$(("#checkboxid").on("click", function() { if ( $(("#checkboxid").is( ":checked" ) ){ $("#trtohideshow").removeclass("hiderow"); }else{ $("#trtohideshow").addclass("hiderow");} });

this code newform.aspx , adds/removes on click event - if want implement on editform.aspx, you'll need add together next function $(document).ready lastly 1 rows checked shown when page loads:

if ( $("#checkboxid").is( ":checked" ) ){ $("#trtohideshow").removeclass("hiderow"); }else{ $("#trtohideshow").addclass("hiderow");}

it's same function, without click event chooses remove class or leave right when page loads. hope helps someone.

jquery sharepoint datepicker hide show

No comments:

Post a Comment