On my page, there is a div that displays a message with the span tag "x". When the user clicks on the x, the div hides. Initially, this functionality worked fine with the JavaScript code in an external script file. However, when I introduced some inline JavaScript on the page, the div stopped working. I even tried moving the inline script to an external file, but simply including the file name on the page caused the div to malfunction. Below is the code for my page, with the 'msgpanel' div that shows and hides.
<%@ Page Title="" Language="C#" MasterPageFile="~/mCSSv2.Master" AutoEventWireup="true"
CodeBehind="WU_adddetails.aspx.cs" Inherits="mCSSv2.WU_adddetails" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="/js/popup.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/pasteimage.js"></script>
<style type="text/css">
#upload_image {
width: 300px;
height: 300px;
background-color: #F5F6F7;
border-radius: 10px;
border: 2px solid #E5E5E5;
text-align: center;
margin: 15px;
}
// More CSS styles here
<!-- Closing tags and more content -->
</style>
<div id="main-content">
// More HTML content here
<div id="msgpanel" runat="server">
<asp:Literal ID="msg" runat="server" Visible="false"></asp:Literal>
</div>
// More HTML content here
</div>
</asp:Content>Below is the snippet of JavaScript code from my script file that is responsible for hiding the div:
$(document).ready(function() {
/*
* Closable Alert Boxes
*/
$('span.hide').click(function() {
$(this).parent().slideUp();
});
(function($) {
$.pasteimage(function(value) {
$("#upload_image img").attr("src", value);
// Additional logic here
});
})(jQuery);