Dynamically resizing div w/ javascript and jquery? - javascript

I'm trying to resize a div with a button click, using javascript and jquery. This is all in an asp.net web form. I have little experience with javascript and practically none with jquery. This is the code I have so far with help from other SO members. Besides it not working, I know there's something wrong because the alerts are not being displayed.
Any help is appreciated.
<head id="Head1" runat="server">
<title>Data Display</title>
<script type="text/javascript">
function toggleGridContent() {
var id = "#gridViewContainer";
if ($(id).hasClass("small")) {
alert("found");
$(id).attr("class", "large");
} else {
alert("not");
$(id).attr("class", "small");
}
}
</script>
<style type="text/css">
.small {
height: 200px;
overflow: hidden;
}
.large {
height: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<input type="button" onclick="toggleGridContent()" value="toggleGridContent" />
<div class="small" id="gridViewContainer" style="border: 1px solid red">
<asp:GridView ID="GridViewNsbAll" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:BoundField DataField="subgroup" HeaderText="subgroup"></asp:BoundField>
<asp:BoundField DataField="count" HeaderText="count"></asp:BoundField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>

You have to add a reference to the jQuery library. If you have it in your web site you can use something like this:
<script type="text/javascript" src="jquery.js"></script>
Easier would be to link to the latest hosted version
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Related

Using JS functions with Jquery in ASP Pages

I'm trying to run a JS function that uses JQuery to append information to the HTML of an ASP page and I just can't get it to work. I've made some research about it but maybe it's something a lot simpler.
%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Pruebas.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
const add = (param) => {
alert("hi");
$("div.auto-style1").append("<p>'" + param + "'</p>");
}
</script>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="height: 26px" Text="Button" />
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<div class="container">
some text
</div>
</form>
</body>
</html>
more specifically this is the function im trying to run
<script type="text/javascript">
const add = (param) => {
alert("hi");
$("div.auto-style1").append("<p>'" + param + "'</p>");
}
</script>
im trying to call this function from the C# code behind the page like this
protected void Button1_Click(object sender, EventArgs e)
{
String p = "this is a message";
ScriptManager.RegisterClientScriptBlock(this, GetType(), "myfunction", "add('" + p + "');", true);
}
If I try to run a JS function that produces a console log or an alert on the page it works fine. Maybe it is related to the Postback property in the ASP button?
If anyone can shed some light on this I will be thankful.
There is no any .auto-style1 class in your code. Please add a class in div to work this code.
<form id="form1" runat="server">
<div class="auto-style1">
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="height: 26px" Text="Button" />
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<div class="container">
some text
</div>
</form>

jQuery Dialog - Object doesn't support property or method 'dialog'

I am trying to use Jquery dialog box, but I am getting Object doesn't support property or method 'dialog' error. Would appreciate any guidance. Is the dialog function deprecated now. I am using jquery-1.5.2.min.js. Here is my code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style type="text/css">
body {
font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif;
}
.ui-dialog-osx {
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
border-width: 0 8px 8px 8px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var Button1 = $("#Button1");
var Button2 = $("#Button2");
var Panel1 = $("#Panel1");
var dil = $("#dialog");
Button1.click(function (e) {
//Panel1.slideDown();
e.preventDefault();
$("#dialog").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I've read and understand this": function () {
$(this).dialog("close");
}
}
})
});
Button2.click(function (e) {
Panel1.slideUp();
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Show Panel" />
<asp:Button ID="Button2" runat="server" Text="Hide Panel" />
<br />
<br />
<asp:Panel runat="server" ID="Panel1" Height="185px" Width="320px" Style="display: none;"
BackColor="#FFFF99" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px">
Hello World!
</asp:Panel>
</div>
<div id="dialog" title="Important information">
<span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float: left; margin: 0 7px 0 0;"></span></span>
<div style="margin-left: 23px;">
<p>
We're closed during the winter holiday from 21st of December, 2010 until 10th of January 2011.
<br />
<br />
Our hotel will reopen at 11th of January 2011.<br />
<br />
Another line which demonstrates the auto height adjustment of the dialog component.
</p>
</div>
</div>
</form>
</body>
</html>
You may have made a slight error here:
<script src="Scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
I expect you meant to include jQuery, and then the script containing the dialog extension (possibly jQuery UI, or a packaged up subset of it).
So change your script tags to...
<script src="Scripts/jquery-v.v.v.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-v.v.v.min.js" type="text/javascript"></script>
You are including two versions of jquery on the same page and you forgot to include jquery-ui :)

read ckeditor content

I am using CKEditor in my asp.net page. For this i have added ckeditor.dll to my project.
And i am using this reference in .aspx page.
My problem is that i can not able to read ckeditor content in javascipt.
Can any one please tell me how to achive this.
Here is my code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CKEditorVamshi._Default" %>
<%# Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function validate() {
var text = $('#cke_<%= CKEditorGettingStarted.ClientID %> iframe').contents().find('body').html();
alert(text);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<CKEditor:CKEditorControl AutoPostBack="True" ID="CKEditorGettingStarted" runat="server"
Height="300px" BasePath="~/CKEditor" MaxLength="10" Width="100%" CausesValidation="true">
</CKEditor:CKEditorControl>
<br />
<input type="button" id="btnPreview" value="Preview" onclick="validate();" />
</form>
</body>
</html>
Thank you in Advance
try
CKEDITOR.instances.Your_Editor_Client_ID.getData();

Asp.net Masterpage and ContentPage JavaScript Function error

I am using a Masterpage for my upload_photo.aspx which displays the file upload page using colorBox. However, ever since i added (code below) in the Masterpage colorBox doesn't display:
<script type="text/javascript">
$(function () {
$("#txtAutoCompleteSearch").AutoComplete("search.aspx?searchword=");
});
function clear_textbox() {
if (document.aspnetForm.searchField.value == " Enter Your Search Here ")
document.aspnetForm.searchField.value = "";
};
</script>
Below is the mastpage code:
<%# Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="Css/menu_style.css" rel="stylesheet" type="text/css" />
<link href="styles/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load('jquery', '1.3.2');</script>
<script src="styles/js/jquery.autocomplete.js" type="text/javascript"></script>
<script src="styles/js/jquery.dimensions.js" type="text/javascript"></script>
<script src="styles/js/jquery.highlight-3.yui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txtAutoCompleteSearch").AutoComplete("search.aspx?searchword=");
});
function clear_textbox() {
if (document.aspnetForm.searchField.value == " Enter Your Search Here ")
document.aspnetForm.searchField.value = "";
};
</script>
</head>
<body>
<form id="masterPageForm" runat="server">
<div id="pagewidth">
<div id="Header">
<asp:Label ID="userName" runat="server" Text="" style=" color: Maroon; font-size: large; z-index: 103; left: 805px; position: absolute; top: 132px"></asp:Label>
<asp:LoginStatus ID="LoginStatus1" runat="server" ForeColor="White"
LogoutPageUrl="~/Default.aspx" LogoutText="Logout" CssClass="logOut"
BackColor="#454545" Font-Bold="True" Font-Names="Arial Black"
Font-Size="Small" />
<%--<asp:Image ID="logoHeader" runat="server" CssClass="rounded-corners" ImageUrl="~/img/logo.png"/>--%>
<asp:HyperLink ID="hlLogo" runat="server" ImageUrl="~/img/logo.png" NavigateUrl="~/home.aspx"></asp:HyperLink>
<%--style="width: 1000px; height: 120px; margin-top: 10px;" />--%>
<div style="top: 61px; left: 476px; position: absolute; height: 37px; width: 526px; font-size: medium; font-style: italic; color: #CCFF99; font-weight: bolder; z-index: 103;">
<input id="txtAutoCompleteSearch" name="searchField" class="tb11" type="text" onfocus="clear_textbox()" value=" Enter Your Search Here "/>
<asp:ContentPlaceHolder id="Heading" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="background">
<asp:menu id="NavigationMenu" CssClass="NavigationMenu"
staticdisplaylevels="2" DynamicHorizontalOffset="1"
staticsubmenuindent="1px" MaximumDynamicDisplayLevels="4"
orientation="Horizontal"
DynamicPopOutImageUrl="~/img/right-arrow.gif"
StaticPopOutImageUrl="~/img/drop-arrow.gif"
datasourceid="MenuSource"
runat="server" Height="30px">
<staticmenuitemstyle ItemSpacing="10" CssClass="staticMenuItemStyle"/>
<statichoverstyle CssClass="staticHoverStyle" />
<StaticSelectedStyle CssClass="staticMenuItemSelectedStyle"/>
<DynamicMenuItemStyle CssClass="dynamicMenuItemStyle" />
<dynamichoverstyle CssClass="menuItemMouseOver" />
<DynamicMenuStyle CssClass="menuItem" />
<DynamicSelectedStyle CssClass="menuItemSelected" />
<DataBindings>
<asp:MenuItemBinding DataMember="siteMapNode"
NavigateUrlField="url" TextField="title"
ToolTipField="description" />
</DataBindings>
</asp:menu>
</div>
<asp:TreeView ID="NavigationTreeView" runat="server" Visible="false" DataSourceID="MenuSource" />
<div id="e">
<asp:SiteMapPath ID="SiteMapPath1" runat="server"
RenderCurrentNodeAsLink="true"
CssClass="currentNodeStyle"
PathSeparator=" >> " Visible="False">
<PathSeparatorStyle ForeColor="#5D7B9D" CssClass="currentNodeStyle" />
<CurrentNodeStyle ForeColor="#333333" CssClass="currentNodeStyle" />
<NodeStyle ForeColor="#7C6F57" CssClass="currentNodeStyle" />
<RootNodeStyle ForeColor="#5D7B9D" CssClass="currentNodeStyle" />
</asp:SiteMapPath>
</div>
<asp:Panel ID="AccessKeyPanel" runat="server">
</asp:Panel>
<asp:SiteMapDataSource id="MenuSource" runat="server" StartFromCurrentNode="false" ShowStartingNode="true" />
<div id="tabDiv">
<asp:ContentPlaceHolder id="mainBody" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
© Copyright Family Photo Online System</div>
</div>
</div>
</form>
<script type="text/javascript">
function navigateTo(url) {
window.location = url;
}
</script>
</body>
</html>
Below is the upload_photo.aspx code for the javascript:
<script src="alerts/impromptu/jquery.js" type="text/javascript"></script>
<script src="alerts/impromptu/jquery-impromptu.2.6.min.js" type="text/javascript"></script>
<link href="alerts/impromptu/impromptu.css" rel="stylesheet" type="text/css" />
<link href="colorBox/colorbox.css" rel="stylesheet" type="text/css" />
<script src="colorBox/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="colorBox/jquery.colorbox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({ transition: "fade" });
$("a[rel='example3']").colorbox({ transition: "none", width: "75%", height: "75%" });
$("a[rel='example4']").colorbox({ slideshow: true });
$(".example5").colorbox();
$(".example6").colorbox({ iframe: true, innerWidth: 425, innerHeight: 344 });
$(".example7").colorbox({ width: "47%", height: "100%", iframe: true });
$(".example8").colorbox({ width: "50%", inline: true, href: "#inline_example1" });
$(".example9").colorbox({
onOpen: function () { alert('onOpen: colorbox is about to open'); },
onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
onClosed: function () { alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function () {
$('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
Firebug throws the following error:
$("a[rel='example1']").colorbox is not a function
http://localhost:3478/upload_photo.aspx
Line 19
If I remove the Javascript function from the Masterpage the colorBox jQuery works fine.
Can anyone advice me where I am going wrong and how i can correct it? Any help would be appreciated.
Thanks
It might be because you're including jquery both in the master page and in the photo page. This will cause jQuery to load, initialize, run the script in your master page, then throw it all out and reload, reinitialize everything when it hits the script tag for jQuery in the upload_photo.aspx. You only want each javascript library to load once, otherwise all sorts of confusion sets in.

how to make this code short & optimal

<HTML>
<HEAD>
<title>Login</title>
<script type="text/javascript" src="http://script.auction.co.kr/common/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(":input[name='txtPassword']").blur(function(e){
$(this).css("background-color","white");
});
$(":input[name='txtPassword']").focus(function(e){
$(this).css("background-color","#FDFCDC");
});
$(":input[name='txtID']").blur(function(e){
$(this).css("background-color","white");
});
$(":input[name='txtID']").focus(function(e){
$(this).css("background-color","#FDFCDC");
});
});
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<div id="body">
<input type="text" id="txtID" name="txtID" CssClass="txt" Width="130px" tabIndex="1"></input>
<input type="password" id="txtPassword" name="txtPassword" Width="130px" TextMode="Password" tabIndex="2"></input>
</div>
</form>
</body>
Here is a code I wrote.
In this code, I feel very uncomfortable , that's because
two TextBoxes act almost same.
But I 'm not able to make this code shorter..
I think there must be optimal code.
I know below code work same. But I hope to attach the control name or ID. to read code easily
$(":input").blur(function(e){
$(this).css("background-color","white");
});
$(":input").focus(function(e){
$(this).css("background-color","#FDFCDC");
});
Like this:
$("#txtID, #txtPassword").focus(function(e){
$(this).css("background-color","#FDFCDC");
}).blur(function(e){
$(this).css("background-color","white");
});
Or, better yet:
<style type="text/css">
#txtID, #txtPassword {
background-color: white;
}
#txtID:active, #txtPassword:active {
background-color: #FDFCDC;
}
</style>

Categories