Here is my ascx page with embedded javascript.
I'd like to highlight the view which I have wrapped in a div tag (div2 for test purposes) when the view changes.
As of now the views change fine, but I cannot get the highlight to work.
Is something wrong with my javascript or am I missing something else??
Thanks
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<p>This is View 1</p>
<asp:Button ID="Button1" runat="server" Text="Next" onclick="Button1_Click" />
</asp:View>
<asp:View ID="View2" runat="server">
<div id="div2" style="height:auto; width:auto;">
<p>This is View 2</p>
<asp:Button ID="Button2" runat="server" Text="Previous"
onclick="Button2_Click" />
<asp:Button ID="Button3" runat="server" Text="Next" onclick="Button3_Click" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
$("#div2").effect("highlight", {}, 3000);
});
});
</script>
</asp:View>
<asp:View ID="View3" runat="server">
<p>This is View 3</p>
<asp:Button ID="Button4" runat="server" Text="Previous"
onclick="Button4_Click1" />
</asp:View>
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
Code Behind:
namespace Multiview1.Multiview1
{
public partial class Multiview1UserControl : UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
MultiView1.SetActiveView(View1);
}
protected void Button1_Click(object sender, EventArgs e)
{
MultiView1.SetActiveView(View2);
UpdatePanel1.Update();
}
protected void Button3_Click(object sender, EventArgs e)
{
MultiView1.SetActiveView(View3);
UpdatePanel1.Update();
}
protected void Button2_Click(object sender, EventArgs e)
{
MultiView1.SetActiveView(View1);
UpdatePanel1.Update();
}
protected void Button4_Click1(object sender, EventArgs e)
{
MultiView1.SetActiveView(View2);
UpdatePanel1.Update();
}
}
}
The problem appears to be loading multiple versions of jquery.
I've set up a fiddle to show the issue. When the 2nd jquery library is commented out it works fine when it's not it doesn't work at all.
Jsfiddle
use your Button click like this
$("#<%=Button1.ClientID%>").click(function () {
$("#div2").effect("highlight", {}, 3000);
});
});
As it is an asp.net control.
EDIT : You are going in wrong direction there is nothing wrong with the jquery click, Problem here is your div tags are inside updatepanel check this LINK
Related
i have a page that get url address with hash(#):
localhost:15164/L3/mobile/#Android/Alcatel
i want to get url address with jquery and use it on page load event in code behind.
<head runat="server">
<title></title>
<script src="js/jquery1.8.2.js"></script>
<script>
$(document).ready(function () {
var url = window.location.href;
var rest = url.substring(url.lastIndexOf("#") + 1, url.length);
$('#urlLable').text(rest);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="urlLable" runat="server" Text="Label"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
page load ( to get address from jquery):
protected void Page_Load(object sender, EventArgs e)
{
urlLable.DataBind();
string urlStr = urlLable.Text;
Response.Write(urlStr);
}
The hash is available here:
location.hash
I am using ImageGallery control of FreeTextbox DLL for uploading images to server.
The issue i am facing is when i click on upload button this error page is shown
I Check the console of chrome, i got following error
here is my aspx code of ftb.imagegallery.aspx
<%# Register TagPrefix="FTB" Namespace="FreeTextBoxControls" Assembly="FreeTextBox, Version=3.3.1.12354, Culture=neutral, PublicKeyToken=5962a4e684a48b87" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<FTB:ImageGallery ID="ImageGallery1"
AllowImageDelete="true" JavaScriptLocation="InternalResource" UtilityImagesLocation="InternalResource"
AllowImageUpload="true" AllowDirectoryCreate="true" AllowDirectoryDelete="true" runat="Server" />
</div>
</form>
</body>
</html>
I didn't able to solve this issue, Alternatively I manage to get past to this problem by manual uploading the image using A FileUpload Controll. Here is my code for anyone who face this problem in future.
1.ftb.imagegallery.aspx
<form id="form1" runat="server">
<div>
<FTB:ImageGallery ID="ImageGallery1"
AllowImageDelete="true" JavaScriptLocation="InternalResource" UtilityImagesLocation="InternalResource"
AllowImageUpload="False" AllowDirectoryCreate="true" AllowDirectoryDelete="true" runat="Server" />
</div>
<div class="col-md-6">
<div class="col-md-8">
<asp:FileUpload runat="server" ID="fileupload1" CssClass="form-control" AllowMultiple="False" />
</div>
<div class="col-md-4">
<asp:Button runat="server" Text="UPLOAD" CssClass="btn btn-success" ID="btnsumbit" OnClick="btnsumbit_OnClick" />
</div>
</div>
</form>
2.Code behind
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnsumbit_OnClick(object sender, EventArgs e)
{
if (fileupload1.HasFile)
{
foreach (HttpPostedFile file in fileupload1.PostedFiles)
{
string fileName = Path.GetFileName(fileupload1.PostedFile.FileName);
fileupload1.PostedFile.SaveAs(Server.MapPath("~/Images/") + fileName);
Response.Redirect(Request.Url.AbsoluteUri);
}
}
}
How to call server side function using HTML anchor tag.
Here I showed some example of my code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Update</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Update
</div>
</form>
</body>
</html>
c#
protected void btnSubmit_Click(object sender, EventArgs e)
{
//Update User Details
}
Try like this,
create one submit button and hide that
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Update</title>
<script language="javascript" type="text/javascript">
function fireServerButtonEvent(){
document.getElementById("btnSubmit").click();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:button id="btnSubmit" runat="server" text="Submit" xmlns:asp="#unknown">
onclick="btnSubmit_Click" style="display:none" /></asp:button>
Update
</div>
</form>
</body>
</html>
You can either add runat="server" and OnServerClick="btnSubmit_Click" to your anchor tag like this:
Update
Or you can use asp:LinkButton. This has an OnClick attribute that will call the method in your code behind:
<asp:LinkButton ID="LinkButton1" runat="server"
OnClick="LinkButton1_OnClick">Update</asp:LinkButton>
protected void LinkButton1_OnClick(object sender, EventArgs e)
{
//Update User Details
}
I'm creating the following functionality: create table on button click using data from the excel file which was loaded and save this table to xml file. After saving I want to show modal window (bootstrap) with some message. Window managed by javascript function and I called this function from the code behind.
This is my HTML page:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="modalSaved" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>
Changes were saved successfully!
</p>
</div>
<div class="modal-footer">
<button type="button" runat="server" id="ok" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<div id="file">
<asp:FileUpload runat="server" ID="OpenFile" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
</div>
<div id="actions" runat="server">
<asp:Button ID="CreateRepBtn" runat="server" OnClick="CreateRepBtn_Click" />
<asp:Button ID="SaveToXml" runat="server" OnClick="SaveToXml_Click" />
</div>
<script type="text/javascript">
function openModalSaved() {
$('#modalSaved').modal('show');
}
</script>
</form>
</body>
And C# code with calling the javascript function:
protected void SaveToXml_Click(object sender, EventArgs e)
{
/* save to xml code */
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModalSaved();", true);
}
The problem is that modal window doesn't appear. I supporse it is connected with FileUpload element somehow because on another page without FileUpload such code works perfect.
I've also tried to use UpdatePanel (FileUpload element was outside) but it doesn't help.
Does anybody know how to solve this problem? Any suggetions are welcome.
protected void SaveToXml_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$(function(){openModalSaved();});", true);
}
For various your solution may not work, change a bit the implementation and remove script registration from button click callback.
Add in markup hidden placeholder containing client script with call of openModalSaved at document ready:
<script type="text/javascript">
function openModalSaved() {
$('#modalSaved').modal('show');
}
</script>
<asp:PlaceHolder id="plhFileUploaded" runat="server" Visible="false">
<script type="text/javascript">
$(document).ready(function() {
openModalSaved();
});
</script>
<asp:PlaceHolder>
Code behind:
protected void SaveToXml_Click(object sender, EventArgs e)
{
/* save to xml code */
plhFileUploaded.Visible = true;//this will render your placeholder contacting the script
}
Task is to write enter page that allows user to pick state specific page layout in CSS.
Currently I have enter.aspx.cs code set as:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
public partial class enter : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void EnterButton_Click(object sender, EventArgs e)
{
HtmlLink link = new HtmlLink();
link.Href = CSSDropDownList.Text;
Label1.Text = CSSDropDownList.Text;
link.Attributes.Add("rel", "stylesheet");
link.Attributes.Add("type", "text/css");
Page.Header.Controls.Add(link);
}
protected void Page_Init(object sender, EventArgs e)
{
HtmlLink link = new HtmlLink();
link.Href = CSSDropDownList.Text;
link.Attributes.Add("rel", "stylesheet");
link.Attributes.Add("type", "text/css");
Page.Header.Controls.Add(link);
}
}
and enter.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="enter.aspx.cs" Inherits="enter" %>
<!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>Welcome</title>
</head>
<body>
<form id="form1" runat="server">
<div class="className">
<p style="text-align: center">Choose your location: <br />
<asp:DropDownList ID="CSSDropDownList" runat="server"
CssClass="btn" AutoPostBack="True">
<asp:ListItem Value="Styles/Site-ar.css">Arkansas</asp:ListItem>
<asp:ListItem Value="Styles/Site-ok.css">Oklahoma</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="EnterButton" runat="server" Text="Enter"
onclick="EnterButton_Click" CssClass="btn" />
</p>
<p style="text-align: center">
<asp:Label ID="Label1" runat="server"></asp:Label>
</p>
</div>
</form>
</body>
</html>
So far I can get the style sheet changed to current page using this method but what I am looking for is to change style sheet for all pages on the site using the selection that user makes at the entry page. What code should I use to accomplish this? If it is easier to use different master pages this can too work. Any help would be greatly appreciated :)