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.
Related
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
I want to show data in a popup window. popup window will be show by clicking on an image. but data doesn't show.
javascript codes:
<script type="text/javascript">
$(document).ready(function () {
$('.popup').click(function () {
$('.box').show("slow");
$('.close').show("slow");
})
$('.close').click(function () {
$('.box').hide("slow");
})
})
</script>
by click on image1 popup window show and by click on image 11 an image sould be show in popup window but doesn't work.
<asp:Image ID="Image1" runat="server" CssClass="popup" />
<div class="box">
<div class="close">
×
</div>
<center>
<asp:Image ID="Image11" runat="server" CssClass=bigpic />
</center>
</div>
the image show but fade quickly!
You can use the jQuery UI library to display a popup, here's an example:
Javascript:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('.popup').click(function () {
$(".box").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
});
</script>
.ASPX:
<asp:Image ID="Image1" runat="server" CssClass="popup" ImageUrl="~/Images/img1.jpg" />
<div class="box">
<asp:Image ID="Image11" runat="server" CssClass="bigpic" />
</div>
I am trying to do a JavaScript in my WebSite that when i click a button a popup appears, but the Aspx reload the webpage everytime I click a button, the javaScript before the refresh works, but the page is reloaded and the page come back as it was without the popup. Is there any way to make the page do not refresh when I press a HTML button without affecting my aspx button functions?
Here is the HTML/ASPX:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script type="text/javascript" src="../Scripts/jquery.js"></script>
<script type="text/javascript" src="../Scripts/jqueryui.js"></script>
<script type="text/javascript" src="../Scripts/myjqTest.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div id="header">
<li><asp:LinkButton ID="loginoptionsButton" CssClass="loginoptionsButton"
runat="server" CausesValidation="False" ClientIDMode="Static"
OnClick="loginoptionsButton_Click">LOGIN</asp:LinkButton></li>
<li><asp:LinkButton ID="signuplogoutButton" CssClass="signuplogoutButton"
runat="server" CausesValidation="False" ClientIDMode="Static"
OnClick="signuplogoutButton_Click">CADASTRAR-SE</asp:LinkButton></li>
</div>
<div id="content">
<button id="TestJS" class="">Test</button>
<div id="Popup" class=""></div>
</div>
</form>
</body>
</html>
Here is the JS:
var test = document.getElementById("Popup");
test.addEventListener("click", function () {
if (test.className === "Hide") {
test.className = "";
} else {
test.className = "Hide";
}
});
Try this:
test.addEventListener("click", function (event) {
if (test.className === "Hide") {
test.className = "";
} else {
test.className = "Hide";
}
event.preventDefault();
});
I have a button that i use to call code behind in my aspx file. I am trying to change the text on the button to no avail.
HTML:
<button class="radius button" runat="server" id="buttonUpload" onServerClick="buttonUpload_Click" >Execute SQL</button>
Here is the javascript:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<%--<asp:ScriptManager ID="scripman1" runat="server" EnablePageMethods="True">
</asp:ScriptManager>--%>
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<script src="javascripts/modernizr.foundation.js"></script>
<style >
#import "css/datatables/demo_page.css";
#import "css/datatables/demo_table.css";
#import "Table Sorter/style.css";
</style>
<script type="text/javascript" src="js/tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/vendor/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#buttonUpload").text('Save');
});
I have tried $("#buttonUpload").html('Save'). Nothing seems to work.
Wait until the DOM has been loaded first (and jQuery). .text() and .html() will both work.
$(document).ready(function() {
$("#buttonUpload").text('Save');
});
I found out the problem was the runat"server" property
<button class="radius button" runat="server" id="buttonUpload" onServerClick="buttonUpload_Click" >Execute SQL</button>
When you remove that the button's text updates fine.
This is a part of my page:
<link href="scripts/jquery-ui.css" rel="stylesheet" />
<link href="scripts/jquery-ui.theme.css" rel="stylesheet" />
<script type="text/jscript" src="scripts/jquery.js"></script>
<script type="text/jscript" src="scripts/jquery-ui.js"></script>
<script type="text/jscript" src="scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<div>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/HeaderBar.png" CssClass="header" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/title.PNG" CssClass="Title" />
<img alt="" class="logo" src="Images/ECON_76px.png" />
<asp:Label ID="Label2" runat="server" CssClass="VersionText" Text="Version {0}"></asp:Label>
<asp:LinkButton ID="lbLogOff" runat="server" CssClass="lbLogOff" ToolTip="Close your current session">Log off</asp:LinkButton>
<asp:LinkButton ID="lbReset" runat="server" CssClass="lbReset" OnClientClick="ShowDialog();" ToolTip="Restart your session as if you would just have logged in">Restart</asp:LinkButton>
<asp:Label ID="lblTestDB" runat="server" CssClass="lblTestDB" Text="CONNECTED TO TEST DATABASE"></asp:Label>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" ViewStateMode="Enabled">
</asp:ContentPlaceHolder>
</div>
<div id="dialog" title="Restart">
<p>This will clear all data of the current session (as if you would have just logged in)!</p>
<p>Are you sure?</p>
<input id="yes" type="button" value="Yes" />
<input id="no" type="button" value="No" />
</div>
<script type="text/jscript">
function ShowDialog() {
$("#dialog").dialog({
buttons:
{
"Yes": function () { $("#dialog").dialog("close"); return false; }
, "No": function () { return true; }
}
}).prev().find(".ui-dialog-titlebar-close").hide();
}
</script>
</form>
</body>
The idea is to show a dialog when the restart button is clicked as I don't like the alert box of Chrome.
Why does it not work?
Kind of took it straight from an example in a book.
You aren't loading any jQuery UI CSS libraries, and you are loading 2 versions of normal jQuery. As a quick test, try removing your own jQuery libraries and link to Google to get you started. You can then gradually place yours back:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
A side note, you are mixing type "jscript" and "javascript". As of HTML5, you can simply leave off specifying type declarations. It will be assumed to be CSS or JavaScript.
There it needs some changes in your code. Try this:
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").dialog({
buttons:
{
"Yes": function () { $("#dialog").dialog("close"); return false; }
, "No": function () { return true; }
}
}).prev().find(".ui-dialog-titlebar-close").hide();
});
function ShowDialog() {
$("#dialog").dialog('open');
}
</script>