I have a little problem, i am trying to achive what is happening in this fiddle http://jsfiddle.net/yXRSz/ basicly it enables a button when the T&C's have been read.
The problem that i am having is that i want this to happen in a AjaxControlToolkit Modal window. The javascript is not running the scroll function when the modal appears and scroll bar is moved. The scroll bar is the overflow on a div
I expect this is becase the modal is hidden when the JS is loaded, i have tried to add the onload and oninit methods and inject the script to the page with no luck, anyone have any idea on how i inject once then modal has loaded?
Code Below
<asp:Panel ID="pnlAcceptTerms" runat="server">
<div id="divTerms" class="modal modal_styled_dark" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<h3 id="H1">Terms & Conditions</h3>
<p>
You have chosen to enter score values, in order for us to proceed with the values you have entered you must accept
that we hold no responsibility for the values that you have entered. If you decline this we will only display the factual information.
</p>
</div>
<div class="modal-body" id="divTermsScrollArea" runat="server">
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
<p>Terms and conditions are entered here</p>
</div>
<div class="modal-footer">
<div class="button-wrapper submit-button-wrapper clearfix">
<div class="button-input-wrapper submit-button-input-wrapper" style="float: left;">
<asp:Button ID="btnDeclineTerms" runat="server" Text="I Decline Terms" CssClass="ka-form-submit"
CausesValidation="false" OnClick="btnDeclineTerms_Click" />
</div>
<div class="button-input-wrapper submit-button-input-wrapper" style="float: right;">
<asp:Button ID="btnAcceptTerms" runat="server" Text="I Accept Terms" CssClass="ka-form-submit"
OnClick="btnAcceptTerms_Click" UseSubmitBehavior="true" Enabled="false" />
</div>
</div>
</div>
</div>
<div id="divScrollScript" runat="server"></div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpeTerms" runat="server" TargetControlID="btnHideMe2"
PopupControlID="pnlAcceptTerms" DropShadow="true" BackgroundCssClass="modal-backdrop" OnLoad="mpeTerms_Load" OnInit="mpeTerms_Init">
</ajaxToolkit:ModalPopupExtender>
And code behind i have
string script = "";
script += "<script type=\"text/javascript\">\r\n";
script += " alert('#" + divTermsScrollArea.ClientID + "');\r\n";
script += " jQuery('#" + divTermsScrollArea.ClientID + "').scroll(function () {\r\n";
script += " alert(jQuery(this).scrollTop());\r\n";
script += " if (jQuery(this).scrollTop() == jQuery(this)[0].scrollHeight - (jQuery(this).height() + 30)) {\r\n";
script += " jQuery('#" + btnAcceptTerms.ClientID + "').removeAttr('disabled');\r\n";
script += " }\r\n";
script += " });\r\n";
script += "</script>\r\n";
divScrollScript.InnerHtml = script;
+30 is becasue of the padding on the div
Cheers Joe.
Right this took me some time to work out, but i have in fact managed to add a show event to the modal popup extended
Just in case anyone else runs into the same issue my new code is below
<script language="javascript" type="text/javascript">
// add event handler to modal show event
// enable accept button when scroll to bottom of terms
function pageLoad() {
$find('<%= mpeTerms.ClientID %>').add_shown(function () {
jQuery('#<%= divTermsScrollArea.ClientID %>').scroll(function () {
//console.log(jQuery(this).scrollTop().toString() + ' : ' + (jQuery(this)[0].scrollHeight - (jQuery(this).height() + 30)).toString());
if (jQuery(this).scrollTop() == (jQuery(this)[0].scrollHeight - (jQuery(this).height() + 30))) {
jQuery('#<%= btnAcceptTerms.ClientID %>').removeAttr('disabled');
}
});
});
}
</script>
The $find(modal popup exender name).add_shown( function () {
adds a function to the modal popups show event, enables you to run script inside there, i got the code for this from http://weblogs.asp.net/yousefjadallah/archive/2010/04/15/add-shown-amp-add-hiding-modalpopupextender-events.aspx
the reason my original code was not working is because the modal on the page load is shown, but when the popup extender loads it hides it, thus rendering the js useless. So by adding the scroll function when the modal is shown the js is active :)
Cheers
Joe.