locked
Confused on implementing popup with javascript RRS feed

  • Question

  • User-1767698477 posted

    I'd like to understand how this works with Javascript. Basically, I have the popup working with the modal extender in my repeater, (as far as opening and closing the popup with the link in the repeater) and if I can just can the variables of the html dropdown selector and text box to the page I designated in action="alertmod.aspx", I should be able to retrieve them with the request.query method I believe. I changed the button to submit the form to a asp.net button with runat="server", but I think javascript won't require that kind of button running on client side. How do I make the modal extender do what it needs to do to get the data alertmod.aspx? Also, I need to get the TopicID from the sqldatasource and send it along with the other 2 variables. How is this done?

    Here what I have currently:

    <asp:Repeater ID="forumpost" runat="server" DataSourceID="SqlDataSource1" OnItemDataBound="Forumpost_Onitemdatabound">
            <ItemTemplate>
                <table border="1" width="99%" align="center">
                    <tr>
                        <td align="center">
                            <b>Author</b>
                        </td>
                        <td>
                            <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl='<%#Eval("TopicID", "replytopost.aspx?tid={0}") %>'>Reply</asp:HyperLink>
                            <asp:HyperLink ID="Hyperlink5" CssClass="hideGridColumn" runat="server" NavigateUrl='<%#Eval("TopicID", "editpost.aspx?tid={0}") %>'>Edit</asp:HyperLink>
                            <asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl='<%#Eval("Username", "viewposter.aspx?mid={0}") %>'>View Poster Profile</asp:HyperLink>
                            <asp:HyperLink ID="BtnShow" runat="server" href="">Alert Moderator</asp:HyperLink>
                            <!-- ModalPopupExtender -->
                            <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow"
                                CancelControlID="btnClose" BackgroundCssClass="modalBackground" >
                            </cc1:ModalPopupExtender>
                            <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
                                <h2>
                                    Alert Moderators</h2>
                                <div id="inline">
                                    <form id="contact" name="contact" action="alertmod.aspx" method="post">
                                    <label for="alert-type">
                                        Type:</label>
                                    <select id="alert-type">
                                        <option value="0">(Choose an Alert Type)</option>
                                        <option value="Spam">Spam/Advertising</option>
                                       </select>
                                    <br />
                                    <br />
                                    <label class="reason" for="alert-reason" >
                                        Reason:</label>
                                    <textarea id="alert-reason" cols="30" rows="5"></textarea>
                                    </form>
                                    <br />
                                     <asp:Button ID="BtnSubmit" runat="server" Text="Submit" />
                                    <div class="float-right error" style="display: none;">
                                        Please fix errors!</div>
                                </div>
                                <div class="messages" style="display: none;">
                                </div>
                                <br />
                                <asp:Button ID="btnClose" runat="server" Text="Close" />
                            </asp:Panel>
                            <!-- ModalPopupExtender -->
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; text-align: center; font-size: large;" width="150px">
                            <asp:Image ID="Avatar1" runat="server" Width="80px" Height="80px" />
                            <br />
                            <asp:Label ID="lbluser" runat="server" Text='<%# Container.DataItem("Username")%>'
                                Font-Size="Large"></asp:Label>
                            <br />
                            <asp:Label ID="Lblposts" runat="server" Text="" Font-Size="Small"></asp:Label>
                        </td>
                        <td width="800px" valign="top">
                            <asp:Literal ID="Literal1" runat="server" Mode="Transform" Text='<%# Container.DataItem("Threadtext")%>'></asp:Literal>
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:Repeater>

    Sunday, February 14, 2016 5:43 AM

Answers

  • User-219423983 posted

    Hi sking,

    I'm not using a gridview. It's an html form stuffed into a repeater.

    Yes. It’s a GridView. But, you could follow the method bind the data to the popup in your Repeater.

    My goal is to send an email message with the Mailmessage class. To do this I need the variables with a POST and action="alertmod.aspx".

    As i'm not clear where and how you want to send the email, if you want to use the Mailmessage to send the email, you could refer to the following article to learn how to achieve it.

    http://www.aspsnippets.com/Articles/Send-email-using-Gmail-SMTP-Mail-Server-in-ASPNet.aspx

    Best Regards,

    Weibo Zhang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 16, 2016 4:56 AM

All replies

  • User-219423983 posted

    Hi sking,

    How do I make the modal extender do what it needs to do to get the data alertmod.aspx? Also, I need to get the TopicID from the sqldatasource and send it along with the other 2 variables. How is this done?

    I assume you want to use JavaScript to submit the form which is in the modal extender to the page “alertmod.aspx” instead of using asp.net server button. If I’m wrong, please let me know.

    If so, you could refer to the following link to implement this need by using Ajax.

    http://stackoverflow.com/a/23518287

    About how to get the data from SqlDataSource, you could have a look at the below demo to learn how to bind the data to the Popup form. About the two variables, you could also store them as from controls in the Popup form.

    http://www.aspsnippets.com/Articles/Using-ASPNet-AJAX-ModalPopupExtender-for-adding-and-editing-rows-in-GridView.aspx

    Best Regards,

    Weibo Zhang

    Sunday, February 14, 2016 11:40 AM
  • User-1767698477 posted

    I'm not using a gridview. It's an html form stuffed into a repeater. The example you cite is for using a gridview.  My goal is to send an email message with the Mailmessage class. To do this I need the variables with a POST and action="alertmod.aspx".

    Monday, February 15, 2016 5:34 AM
  • User-219423983 posted

    Hi sking,

    I'm not using a gridview. It's an html form stuffed into a repeater.

    Yes. It’s a GridView. But, you could follow the method bind the data to the popup in your Repeater.

    My goal is to send an email message with the Mailmessage class. To do this I need the variables with a POST and action="alertmod.aspx".

    As i'm not clear where and how you want to send the email, if you want to use the Mailmessage to send the email, you could refer to the following article to learn how to achieve it.

    http://www.aspsnippets.com/Articles/Send-email-using-Gmail-SMTP-Mail-Server-in-ASPNet.aspx

    Best Regards,

    Weibo Zhang

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 16, 2016 4:56 AM
  • User-1767698477 posted

    If you look at the javascript code on this page by viewing the source, you will see that ajax is used to send the 2 fields of the alert moderator code to some page.  I need this same type of setup for my page. I tried to use regular asp.net variables rather than the html variables and I could not create a button click event due to the fact that this modal popup is buried in a repeater, and it is not even visible in the designer to click on and create a Button click sub.

    <script type="text/javascript">
    	function loadModal(type, modal) {
    		$("[data-uitype|='" + type + "']").each(function () {
    			$(this).click({ container: $("#dlg-" + type), modal: modal }, function (evt) {
    				postId = $(this).attr("data-postid");
    				forumId = $(this).attr("data-forumid");
    				username = $(this).attr("data-username");
    
    				var $container = evt.data.container;
    				var $modal = evt.data.modal;
    				var $content = $(".modal-inner", $container);
    				var $messages = $(".messages", $container);
    
    				$content.html("Loading...");
    				$content.show();
    				$messages.hide();
    				$modal.show();
    
    				setTimeout(function () {
    					$.ajax({
    						url: "/dialog/" + type + "/" + (postId || forumId || username || 0),
    						dataType: "html",
    						success: function (data) {
    							$content.html(data);
    						}
    					});
    				}, 250);
    			});
    		});
    	}
    </script>
    

    
    <div id="dlg-alert-post" class="modal" style="display:none;">
    	<a href="javascript:;" class="modal-close">&#10006;</a>
    	<div class="modal-contents clearfix">
    		<h2>Alert Moderators</h2>
    		<div class="modal-inner" style="margin-bottom:18px;">Loading...</div>
    		<div class="messages" style="display:none;"></div>
    	</div>
    </div>
    
    <script type="text/javascript">
    	$(document).ready(function () {
    		loadModal("alert-post", $(document).modal({ id: "#dlg-alert-post", overlay: ".modal-cover" }));
    	});
    </script>
    Tuesday, February 16, 2016 6:47 AM