Hello all I am having a peculiar problem. In a test aspx (webform) I created the following. two checkboxes and some jQuery to hide or reveal the second one if the primary one was clicked. I then added a button that allowed me to render in the page the values of each checkbox to ensure that they are null. Aspx
<head runat="server">
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript">
$(function () {
$('#cb2').hide();
$('#cb1').click(function () {
if ($('#cb1').is(":checked")) {
$('#cb2').show('fast');
}
else {
$('#cb2').hide();
$('#cb2').removeAttr('checked');
}
});
});
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptManger1" runat="server"></asp:ScriptManager>
<div id="cbHolder">
<asp:CheckBox Text="checkbox 1" ID="cb1" runat="server" />
<asp:CheckBox Text="checkbox 2" ID="cb2" runat="server" />
<asp:Button ID="checkBtn" runat="server" Text="get value" OnClick="checkBtn_Click" />
<br />
<asp:Label ID="lbl_Values" runat="server" />
</div>
</form>
CodeBehind aspx.cs
protected void checkBtn_Click(object sender, EventArgs e)
{
lbl_Values.Text = cb1.Checked.ToString() + cb2.Checked.ToString();
}
This all works fine
However I have now added this same content to my project and instead of it being in the form the content is now in a SimpleModal window.
aspx
<div id="save-modal-content">
<asp:Label ID="ssHeader" runat="server" Text="<%$ Resources:InformResources, SaveSearch_lbl %>" />
<br />
<div class="ssContainer">
<div class="ssLabel">
<asp:Label Text="<%$ Resources:InformResources, Name_lbl %>" runat="server" /></div>
<div>
<asp:TextBox CssClass="ssTextBox" ID="txt_ssname" runat="server" /></div>
</div>
<br />
<div class="ssContainer">
<div class="ssLabel">
<asp:Label Text="<%$ Resources:InformResources, DescFull_lbl %>" runat="server" /></div>
<div>
<asp:TextBox CssClass="ssTextBox" ID="txt_ssDescription" runat="server" /></div>
</div>
<br />
<div class="ssContainer">
<div class="ssLabel">
<asp:Label Text="<%$ Resources:InformResources, Query_lbl %>" runat="server" /></div>
<div>
<asp:TextBox CssClass="ssQueryBox" ID="txt_ssQueryText" runat="server" Rows="6" TextMode="MultiLine" /></div>
</div>
<hr class="invisiblehr" />
<div id="cb1" class="cbHolder">
<asp:CheckBox ID="cb_Notifiy" OnCheckedChanged="cb_click" runat="server" Text="I wish to receive notificaions on this search" />
</div>
<br />
<div id="cb2" class="cbHolder">
<asp:CheckBox ID="cb_Email" runat="server" Text="I wish to receive notifications via email" />
</div>
<hr class="invisiblehr" />
<div class="saveButtonContainer">
<asp:LinkButton ID="ssSaveButton" CssClass="advButtons" Text="Save" OnClick="ssSaveButton_Click"
runat="server" />
<a href="#" id="ssCancelButton" class="advButtons">Cancel</a>
</div>
</div>
js file
$(function () {
$('#cb_Notifiy').click(function () {
if ($('#cb_Notifiy').is(":checked")) {
$('#cb2').show('fast');
}
else {
$('#cb2').hide();
$('#cb_Email').removeAttr('checked');
}
});
And code behind
public void ssSaveButton_Click(object sender, EventArgs e)
{
txt_ssname.Text = cb_Notifiy.Checked.ToString() + cb_Email.Checked.ToString();
string foo = txt_ssname.Text.ToString();
}
code to call Simple modal window
//SimpleModal Save Dialog $(function () { $('#btnSave').click(function (e) {
var searchtrm = $('#tbsearchterm').val();
if (searchtrm == "Enter Search Term" || $.trim(searchtrm) === "") {
$('#alert-modal-content').modal({ overlayClose: false, close: false, containerId: 'alert-container' });
$('<b>Whoops!</b><br/><br/><span>Before you can save your search you need to enter a search term or query.</span>').appendTo('#alertTerm');
}
else {
$('#txt_ssQueryText').val(searchtrm);
$('#save-modal-content').modal({ overlayClose: false, close: false, containerId: 'saveSearch-container' });
}
});
});
Aside from a few tags changing the code is relatively the same. However within the project whenever the save button is clicked the method is called but all values (checkboxes, textboxes) are null.
Can anyone help me figure out why it works in one project but not the other.
Thanks in advance
Discovered the answer to my question here from a previous SO post
In short simple modal out of the box appends the content to the body of the document. This is outside of the form tag which is why the elements could not be found. Simple modal offers a property call appendTo which for asp.net use appendTo: 'form'. Adding this tag will allow for properties as well as calls to be made to the code behind.
Thanks