jknj72
asked on
ModalPopup question
I have a modalPopup for adding comments. When the Popup first appears I have a imagebutton that when I click I want a row in my table to become visible. When I click the imagebutton though my Popup disappears?
I am calling a javascript function to make the <tr> visible but its not working.
Here is my code
Again, when I click on the image button the entire popup disappears and in javascript function I added an alert to see if its getting the correct id and to see if it was working correctly but it returns NULL. Is it because its in a modal popup and within a panel that it doesnt recognize the <tr>
Here is the javascript function
Any help would be appreciated!!
JK
I am calling a javascript function to make the <tr> visible but its not working.
Here is my code
<%--New Popup Control for Approving Timesheets--%>
<cc1:ModalPopupExtender ID="PopupApproveTimesheets" runat="server" TargetControlID="HiddenField2" PopupControlID="pnlApprove" Drag="true" PopupDragHandleControlID="pnlApprove" CancelControlID="btnBatchCancel" BackgroundCssClass="popup-background" >
</cc1:ModalPopupExtender>
<asp:HiddenField ID="HiddenField2" runat="server" />
<asp:Panel ID="pnlApprove" runat="server" BorderColor="Black" BorderStyle="Solid" BorderWidth="1" Width="350px" Height="360px" style="display:block">
<table style="border:3px Solid #7092BE; width:100%; height:100%;background-color:white;">
<tr style="background-color:#7092BE; width:100%;height:12%;vertical-align:central;">
<td colspan="2" style="color:White; font-weight:bold; font-size:larger;" align="center">Approve Timesheets</td>
</tr>
<tr>
<td align="center" style="font-weight:bold;"><br />
Week ID: </td>
<td style="padding-left: 10px;"><br />
<asp:Label ID="lblWeeks" runat="server" Font-Bold="true" Text=""></asp:Label>
</td>
</tr>
<tr style="vertical-align:middle;">
<td align="center" style="font-weight:bold">Signature: </td>
<td style="padding-left: 10px;">
<asp:TextBox ID="txtSignature" runat="server" Text="" Width="180px" />
<asp:ImageButton ID="imgCommentApprove" runat="server" ImageUrl="~/images/flyout.png" ToolTip="Leave Comments" OnClientClick="DisplayComments(); "/> --HERE IS MY CALL TO FUNCTION
</td>
</tr>
<tr id="trComments" runat="server" style="display:none;vertical-align: top;"> --<TR> IM TRYING TO MAKE VISIBLE WHEN IMAGE BUTTON IS CLICKED
<td align="center" style="font-weight:bold;">
Comments: </td>
<td style="padding-left:10px;padding-right:5px;">
<asp:TextBox ID="txtCommentsApprove" runat="server" Height="100px" Text="" TextMode="MultiLine" Width="240px" />
</td>
</tr>
<tr>
<td></td>
<td align="center">
<asp:Button ID="btnBatchApprove" runat="server" BackColor="#46A3FF" Font-Bold="True" Font-Size="Medium" ForeColor="White" Height="30px" OnClick="btnBatchApprove_Click" Text="Ok" Width="100px" />
<cc1:RoundedCornersExtender ID="btnBatchApprove_RoundedCornersExtender" runat="server" BehaviorID="btnBatchApprove_RoundedCornersExtender" TargetControlID="btnBatchApprove" />
<asp:Button ID="btnBatchCancel" runat="server" BackColor="#46A3FF" Font-Bold="True" Font-Size="Medium" ForeColor="White" Height="30px" OnClick="btnBatchCancel_Click" Text="Cancel" Width="100px" />
<cc1:RoundedCornersExtender ID="btnBatchCancel_RoundedCornersExtender" runat="server" BehaviorID="btnBatchCancel_RoundedCornersExtender" TargetControlID="btnBatchCancel" />
</td>
</tr>
</table>
</asp:Panel>
Again, when I click on the image button the entire popup disappears and in javascript function I added an alert to see if its getting the correct id and to see if it was working correctly but it returns NULL. Is it because its in a modal popup and within a panel that it doesnt recognize the <tr>
Here is the javascript function
function DisplayComments() {
var row = document.getElementById("trComments");
alert(row);
if (row.style.display == "none")
row.style.display = "";
else
row.style.display = "none";
return;
}
Any help would be appreciated!!
JK
what if you just use OnClick=
ASKER
I tried that in my first attempt and it didnt work
Why are you using runat="server" on this tr?
Please post the rendered html of the page (View Source => Copy => Paste here)
We need to see what the actual HTML looks like.
I suspect you need to be doing something like
We need to see what the actual HTML looks like.
I suspect you need to be doing something like
var row = document.getElementById("<% =trComments.ClientID%>");
Due to the fact that the runat="server" is going to change your element id values.
ASKER
I did the runat="server" because I set visible =true in the code behind of the image click? That didnt work so I am trying the javascript way and guess I forgot.
ASKER
like i said, it actually works but the popup disappears when I click the image. I can see when the break point is in the page_load that the popup has the <tr> visible the way I need it but then poof, its gone.
ASKER
Inner HTML of panel
<table style="border:3px Solid #7092BE; width:100%; height:100%;background-color:white;">
<tbody><tr style="background-color:#7092BE; width:100%;vertical-align:central;">
<td colspan="2" style="color:White; font-weight:bold; font-size:larger;height:30px;" align="center">Approve Timesheets</td>
</tr>
<tr>
<td style="font-weight:bold;" align="center"><br>
Week ID: </td>
<td style="padding-left: 10px;"><br>
<span id="maincontent_lblWeeks" style="font-weight:bold;"> 8</span>
</td>
</tr>
<tr style="vertical-align:middle;">
<td style="font-weight:bold" align="center">Signature: </td>
<td style="padding-left: 10px;">
<input name="ctl00$maincontent$txtSignature" id="maincontent_txtSignature" style="width:180px;" type="text">
<input name="ctl00$maincontent$imgCommentApprove" id="maincontent_imgCommentApprove" title="Leave Comments" src="images/flyout.png" onclick="DisplayComments();" type="image">
</td>
</tr>
<tr id="maincontent_trComments" style="vertical-align: top;height:140px;display:none;">
<td style="font-weight:bold;" align="center">
Comments: </td>
<td style="padding-left:10px;padding-right:5px;">
<textarea name="ctl00$maincontent$txtCommentsApprove" rows="2" cols="20" id="maincontent_txtCommentsApprove" style="height:100px;width:240px;"></textarea>
</td>
</tr>
<tr>
<td></td>
<td align="center">
<input name="ctl00$maincontent$btnBatchApprove" value="Ok" id="maincontent_btnBatchApprove" style="color: White; background-color: rgb(70, 163, 255); font-size: medium; font-weight: bold; height: 30px; width: 100px; border-radius: 5px; border: 0px none;" type="submit">
<input name="ctl00$maincontent$btnBatchCancel" value="Cancel" id="maincontent_btnBatchCancel" style="color: White; background-color: rgb(70, 163, 255); font-size: medium; font-weight: bold; height: 30px; width: 100px; border-radius: 5px; border: 0px none;" type="submit">
</td>
</tr>
</tbody></table>
ASKER
View Source:
<div id="maincontent_pnlApprove" style="border-color:Black;border-width:1px;border-style:Solid;height:220px;width:350px;display:block">
<table style="border:3px Solid #7092BE; width:100%; height:100%;background-color:white;">
<tr style="background-color:#7092BE; width:100%;vertical-align:central;">
<td colspan="2" style="color:White; font-weight:bold; font-size:larger;height:30px;" align="center" >Approve Timesheets</td>
</tr>
<tr>
<td align="center" style="font-weight:bold;"><br />
Week ID: </td>
<td style="padding-left: 10px;"><br />
<span id="maincontent_lblWeeks" style="font-weight:bold;"> 8</span>
</td>
</tr>
<tr style="vertical-align:middle;">
<td align="center" style="font-weight:bold">Signature: </td>
<td style="padding-left: 10px;">
<input name="ctl00$maincontent$txtSignature" type="text" id="maincontent_txtSignature" style="width:180px;" />
<input type="image" name="ctl00$maincontent$imgCommentApprove" id="maincontent_imgCommentApprove" title="Leave Comments" src="images/flyout.png" onclick="DisplayComments();" />
</td>
</tr>
<tr id="maincontent_trComments" style="vertical-align: top;height:140px;display:none;">
<td align="center" style="font-weight:bold;">
Comments: </td>
<td style="padding-left:10px;padding-right:5px;">
<textarea name="ctl00$maincontent$txtCommentsApprove" rows="2" cols="20" id="maincontent_txtCommentsApprove" style="height:100px;width:240px;">
</textarea>
</td>
</tr>
<tr>
<td></td>
<td align="center">
<input type="submit" name="ctl00$maincontent$btnBatchApprove" value="Ok" id="maincontent_btnBatchApprove" style="color:White;background-color:#46A3FF;font-size:Medium;font-weight:bold;height:30px;width:100px;" />
<input type="submit" name="ctl00$maincontent$btnBatchCancel" value="Cancel" id="maincontent_btnBatchCancel" style="color:White;background-color:#46A3FF;font-size:Medium;font-weight:bold;height:30px;width:100px;" />
</td>
</tr>
</table>
</div>
Where is your modal markup and the code that manages it?
The button is obviously triggering a close event on the modal - but we can't guess what that is - can you show us.
Is there a link or a fiddle you can setup for us to look at?
The button is obviously triggering a close event on the modal - but we can't guess what that is - can you show us.
Is there a link or a fiddle you can setup for us to look at?
ASKER
Markup for ModalPopup
-imgCommentApproved calls DisplayComments and sets trComments display:block
-imgCommentApproved calls DisplayComments and sets trComments display:block
<%--New Popup Control for Approving Timesheets--%>
<cc1:ModalPopupExtender ID="PopupApproveTimesheets" runat="server" TargetControlID="HiddenField2" PopupControlID="pnlApprove" Drag="true" PopupDragHandleControlID="pnlApprove" CancelControlID="btnBatchCancel" BackgroundCssClass="popup-background" >
</cc1:ModalPopupExtender>
<asp:HiddenField ID="HiddenField2" runat="server" />
<asp:Panel ID="pnlApprove" runat="server" BorderColor="Black" BorderStyle="Solid" BorderWidth="1" Width="350px" Height="220px" style="display:block">
<table style="border:3px Solid #7092BE; width:100%; height:100%;background-color:white;">
<tr style="background-color:#7092BE; width:100%;vertical-align:central;">
<td colspan="2" style="color:White; font-weight:bold; font-size:larger;height:30px;" align="center" >Approve Timesheets</td>
</tr>
<tr>
<td align="center" style="font-weight:bold;"><br />
Week ID: </td>
<td style="padding-left: 10px;" ><br />
<asp:Label ID="lblWeeks" runat="server" Font-Bold="true" Text=""></asp:Label>
</td>
</tr>
<tr style="vertical-align:middle;">
<td align="center" style="font-weight:bold;height:30px">Signature: </td>
<td style="padding-left: 10px;" >
<asp:TextBox ID="txtSignature" runat="server" Text="" Width="180px" />
<asp:ImageButton ID="imgCommentApprove" runat="server" ImageUrl="~/images/flyout.png" ToolTip="Leave Comments" OnClientClick="DisplayComments();"/>
</td>
</tr>
<tr id="trComments" style="vertical-align: top;height:140px;display:none;">
<td align="center" style="font-weight:bold;">
Comments: </td>
<td style="padding-left:10px;padding-right:5px;" >
<asp:TextBox ID="txtCommentsApprove" runat="server" Height="100px" Text="" TextMode="MultiLine" Width="240px" />
</td>
</tr>
<tr>
<td></td>
<td align="center">
<asp:Button ID="btnBatchApprove" runat="server" BackColor="#46A3FF" Font-Bold="True" Font-Size="Medium" ForeColor="White" Height="30px" OnClick="btnBatchApprove_Click" Text="Ok" Width="100px" />
<cc1:RoundedCornersExtender ID="btnBatchApprove_RoundedCornersExtender" runat="server" BehaviorID="btnBatchApprove_RoundedCornersExtender" TargetControlID="btnBatchApprove" />
<asp:Button ID="btnBatchCancel" runat="server" BackColor="#46A3FF" Font-Bold="True" Font-Size="Medium" ForeColor="White" Height="30px" OnClick="btnBatchCancel_Click" Text="Cancel" Width="100px" />
<cc1:RoundedCornersExtender ID="btnBatchCancel_RoundedCornersExtender" runat="server" BehaviorID="btnBatchCancel_RoundedCornersExtender" TargetControlID="btnBatchCancel" />
</td>
</tr>
</table>
</asp:Panel>
ASKER
imgCommentApprove is causing a postback and making the Popup disappear??
ASKER
I added return false to my js call and it worked???
so heres my call in the imgbutton click
OnClientClick="DisplayComm ents(); return false;"
And it works....Thanks for all the help
so heres my call in the imgbutton click
OnClientClick="DisplayComm
And it works....Thanks for all the help
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I actually tried that in the beginning but I wasnt sure how to do it. Thats when I decided to post this question. I think your right though.
ASKER
Give 1/2 points to Julian Hansen please!
ASKER
eee
@jknj72,
I have re-opened the question so you can regrade.
I have re-opened the question so you can regrade.
ASKER
thx
@jknj72,
Apologies but I am going to have to ask you to regrade.
The answer you have selected does not relate to the question. At EE it is more than just about points for experts we are trying to build a solid PAQ (Previously Asked Questions) database that allows others to find solutions to their problems. For this we need the accepted answer to relate to the question asked - which is clearly not the case on this question.
If it is not too much trouble could I ask you to re-grade and select a solution(s) that relate to the problem you experienced.
Apologies but I am going to have to ask you to regrade.
The answer you have selected does not relate to the question. At EE it is more than just about points for experts we are trying to build a solid PAQ (Previously Asked Questions) database that allows others to find solutions to their problems. For this we need the accepted answer to relate to the question asked - which is clearly not the case on this question.
If it is not too much trouble could I ask you to re-grade and select a solution(s) that relate to the problem you experienced.
ASKER
sorry about that
No problem - appreciate the prompt response.
ASKER
So it seems like its working other than the fact that the Popup disappears when I click the button?