The following code works in a standalone web forms page but not when I bring it into my website which has a master page. Using the Chrome developer tools I see that jQuery and jQuery.uploadify are loaded. The error that occurs when the page loads is:
Uncaught TypeError: $(...).uploadify is not a function
Error occurs on line:
$("#file_upload").uploadify({
Here is the code:
<%# Page Title="" Language="C#" MasterPageFile="~/Shared/DefaultMaster.master" AutoEventWireup="true" CodeBehind="UploadUploadify.aspx.cs" Inherits="Impact.Thm.Web.Utilities.UploadUploadify" %>
<asp:Content ID="Content1" ContentPlaceHolderID="DefaultHeaderContent" runat="server">
<link rel="Stylesheet" type="text/css" href="./App_Themes/Uploader/uploadify.css" />
<script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./Scripts/jquery.uploadify.min.js"></script>
<title>Testing Uploadify</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="JavascriptContent" runat="server">
<script type = "text/javascript">
$(function () {
$("#file_upload").uploadify({
'auto': false,
'swf': '/Scripts/uploadify.swf',
'uploader': 'UploadifyStatus.ashx'
});
});
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="DefaultContent" runat="server">
<div style="border: thin solid black">
<p><input type="file" name="file_upload" id="file_upload" /></p>
</div>
<p>Upload Files</p>
</asp:Content>
How can I get rid of this error so that it sees the uploadify function?
I'd suggest moving your click event to the page load event (with your other uploadify function), rather than on the link itself:
<asp:Content ID="Content2" ContentPlaceHolderID="JavascriptContent" runat="server">
<script type="text/javascript">
$(function() {
$("#file_upload").uploadify({
'auto': false,
'swf': '/Scripts/uploadify.swf',
'uploader': 'UploadifyStatus.ashx'
});
$("#upload-link").click(function() {
$('#file_upload').uploadify('upload','*');
});
});
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="DefaultContent" runat="server">
<div style="border: thin solid black">
<p><input type="file" name="file_upload" id="file_upload" /></p>
</div>
<p>
<a id="upload-link" href="#">Upload Files</a>
</p>
</asp:Content>
To get jQuery.uploadify to work when using a Master Page I had to add a reference to the javascript file. Added the following to the DefaultMaster.master
<asp:ScriptManager> ...
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery.uploadify.min.js" />
Now I don't get the error:
Uncaught TypeError: $(...).uploadify is not a function
Related
What I'm trying to do is use the contextmenu() to trigger the input of type="file"
When simply trying it out as .html file it works perfectly normal:
<input type="file" id="File1" class="file2" runat="Server" accept="image/*">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$("body").contextmenu(function () {
alert("right click!!");
document.getElementById('File1').click();
return false;
});
});
</script>
But when I try to do the exact same thing in my asp.net project, it does not "click" the button:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="TESTER.aspx.cs" Inherits="CustomTemplates.TESTER" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<input type="file" id="File1" class="file2" runat="Server" accept="image/*">
<script>
$(function () {
$("body").contextmenu(function () {
alert("right click!!");
document.getElementById('MainContent_File1').click();
return false;
});
});
</script>
</asp:Content>
although the alert does get shown. (Also I made sure the ID of the input is correct from the console)
What can be the cause of this?
I have a aspx page with a placeholder in an update panel. The user control is attached to the placeholder depending the value of a dropdown on the page. The user control loads correctly, but it seems that the click event of the button is not firing. I've put a breakpoint in the .js file, but it never goes into the js function. Not sure if the javascript is even loaded.
The aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Page.aspx.cs" Inherits="UserControlTest.Page" %>
<%# Register Src="~/TestUserControl.ascx" TagPrefix="uc1" TagName="TestUserControl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/testUserControl.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>
<div>
<h4>This is the page</h4>
<div class="form-group">
<label class="col-md-5 control-label" for="selUserControl">Enquiry Type <span class="glyphicon glyphicon-asterisk pull-right" style="color:red"></span> </label>
<div class="col-md-7">
<asp:DropDownList ID="selUserControl" CssClass="form-control reqrd" runat="server" OnSelectedIndexChanged="selUserControl_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
</div>
</div>
<div id="divUserControl">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder runat="server" ID="phUserControl" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="selUserControl" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
The aspx.cs page:
protected void selUserControl_SelectedIndexChanged(object sender, EventArgs e)
{
TestUserControl uc = (TestUserControl)LoadControl("~/TestUserControl.ascx");
uc.ID = "ucUserControl";
phUserControl.Controls.Add(uc);
}
The .ascx page:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="TestUserControl.ascx.cs" Inherits="UserControlTest.TestUserControl" %>
<div>
<h4>This is the User Control</h4>
</div>
<div class="form-group">
<div class="col-md-7">
<input type="button" id="btnPress" class="btn" value="Press!" />
</div>
</div>
The .js file:
$(document).ready(function () {
$("#btnPress").click(function () {
alert('Hi There from User Control');
});
});
By the time your js is run, #btnPress doesn't exist on the page (or at least the original #btnPress doesn't. #DelightedD0D is right. I'd look into using event delegates and attaching them to your document. This way you can attach/detach as many #btnPress as you'd like and your clicks will bubble to document and be handled by the delegate.
$(document).on('click', '#btnPress', function(){
alert('Hi There from User Control');
});
I used this Plugin in Webforms. I have Content Place holder on my Form so I converted the Code into Below:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$('#<%=dialog.ClientID %>').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$('#<%=opener.ClientID %>').click(function() {
$('#<%=dialog.ClientID %>').dialog("open");
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="dialog" runat="server" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button runat="server" id="opener">Open Dialog</button>
</asp:Content>
But it is not working. How do i solve this ?
The <button> element submits the page back to the server after being clicked. This is its default behavior inside a form (a Webforms page is a form) and that's why you cannot see the dialog.
You can just add a type="button" to your button like this:
<button runat="server" type="button" id="opener">Open Dialog</button>
It will prevent the button from posting the page back to the server and you will be able to see the dialog.
I have wrote this code:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script language="javascript" type="text/javascript">
// <![CDATA[
function btnClient_onclick() {
document.getElementById("lblClient").innerText = "Changed";
document.getElementById("lblServer").innerText = "Server";
}
// ]]>
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
<asp:Button ID="btnServer" runat="server" onclick="btnServer_Click"
Text="Server" />
<asp:Label ID="lblServer" runat="server" Text="Server"></asp:Label>
</p>
<p>
<input id="btnClient" type="button" value="Client" onclick="return btnClient_onclick()" />
<asp:Label ID="lblClient" runat="server" Text="Client"></asp:Label>
</p>
</asp:Content>
and when i run it, got this errro : Unable to set property 'innerText' of undefined or null reference
Set
ClientIDMode to static
on both the labels and see if that works
try this
document.getElementById("lblClient").setAttribute('text', "Changed");
I have a master page in which i have a div like
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="NGO_MS.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="container">
<div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse " id="menu">
<ul class="nav navbar-nav navbar-right alert-success">
<li class="active">Home</li>
</ul>
</div>
</div>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="container" style="background-color: white">
<div>
<div style="float: left; color: green">
</div>
<div style="float: right; color: green">
</div>
</div>
</div>
</body>
</html>
In dashboard.aspx i want to hide div with id menu which is present in master page.. some thing like this ..
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="dashboard.aspx.cs" MasterPageFile="~/Site.master" Inherits="NGO_MS.dashboard" %>
<%# Register TagPrefix="UC_LeftMenu" TagName="LeftMenu" Src="UserControls/UC_LeftMenu.ascx" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
$(document).ready(function () {
$('#menu').hide();
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<form runat="server" ID="Form1">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="col-md-10">
<UC_LeftMenu:LeftMenu ID="LeftMenu" runat="server" />
<div class="col-md-9">
<%--dashboard content will go here --%>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</asp:Content>
How can I fix this its not working. Thankyou :)
I am using update panel in dashboard but this update panel is not wrapping div with id menu. How i can resolve this.
You need ScriptManager if you want to call pageLoad.
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function pageLoad() {
$('#menu').hide();
}
</script>
Since you are using jQuery, you can use the following -
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#menu').hide();
});
</script>
Another Approach using Server Side Code
You can create Menu as Server Control, and access it from dashboard codebehind.
Site.Master
<div class="container">
<div>
<div class="navbar navbar-default" role="navigation">
<asp:Panel runat="server" ID="MenuPanel"
CssClass="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right alert-success">
<li class="active">Home</li>
</ul>
</asp:Panel>
</div>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
Site.Master.cs
public partial class Site : System.Web.UI.MasterPage
{
public bool MenuPanelVisible
{
set { MenuPanel.Visible = value; }
}
}
dashboard.aspx.cs
public partial class dashboard : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var master = Master as Site;
if (master != null)
{
master.MenuPanelVisible = false;
}
}
}
You need to put your pageLoad functionality in the jQuery document ready handler so it executes after the DOM has loaded.
It should look something like this:
<script type="text/javascript">
$(document).ready(function() {
$('#menu').hide();
});
</script>
check your HTML. if i am not mistaken, the ID will not be generated to HTML 1:1.
also currently your JS will not be executed... on the other hand you can define server-sided code too:
<script language="C#" runat="server" type="text/c#">
public void Page_Load(object sender, EventArgs e){
//hide the menu here
}
</script>
alternatively you could even do the following:
<div id="menu" onload="this.visibility=hidden;"></div>