Can someone help me with my test environment for calling Javascript function through external file in DevExpress?
In my root.aspx, I included my external Javascript as you may see below:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Root.master.cs" Inherits="TestProjects.RootMaster" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
<title></title>
<link rel="stylesheet" type="text/css" href="Content/Site.css" />
<script type="text/javascript" src="Script/TestJS.js" id="dxss_SOMECODE"> </script>
</head>
And in my content page I have this code:
<%# Page Title="" Language="C#" MasterPageFile="~/Light.master" AutoEventWireup="true" CodeBehind="testPage.aspx.cs" Inherits="TestProjects.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<p>
</p>
<dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server">
<Items>
<dx:LayoutItem>
<LayoutItemNestedControlCollection>
<dx:LayoutItemNestedControlContainer runat="server">
<dx:ASPxTextBox ID="ASPxFormLayout1_E1" runat="server">
<ClientSideEvents TextChanged="jsAlert()" />
</dx:ASPxTextBox>
</dx:LayoutItemNestedControlContainer>
</LayoutItemNestedControlCollection>
</dx:LayoutItem>
</Items>
</dx:ASPxFormLayout>
</asp:Content>
And in my Javascript file I have this code:
function jsAlert(s,e)
{
alert("just a test");
}
My problem occurs when I run the page, it displayed the alert even though I didn't put any changes in the textbox, but when I do put some changes it would display error. Can anyone tell me what's wrong with my coding?
Thanks.
Can you try this;
<ClientSideEvents TextChanged="function(s, e) { alert('just a test'); }" />
Or;
<ClientSideEvents TextChanged="function(s, e) { jsAlert(s,e); }" />
Related
net site with master and child pages. I am generating title via .cs code file on each child page. It works fine on the desktop. However, when I try to browse via mobile, it throws the above error. Below is code for master page.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="xyz.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css" type="text/css" >
</head>
<body>
<form runat="server">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
****child page code behind ***
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HtmlTitle title = new HtmlTitle();
title.Text = "child page title";
Header.Controls.Add(title);
}
}
*** child page ****
<%# Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="childpage.aspx.cs" Inherits="xyz._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>
what is the best way to handle this. Appreciate your thoughts on this.
I'm trying to create razor #section in one of my views, using umbraco:Macro tag, in order to add scripts/styles specific for each view into head tag.
My current code looks like this(head section of master page):
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="/css/foundation.min.css">
<script type="text/javascript" src="/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/js/responsiveslides.js"></script>
<script type="text/javascript" src="/js/js.js"></script>
<umbraco:Macro runat="server" language="cshtml">
#if(IsSectionDefined("JSIncludes"))
{
#RenderSection("JSIncludes")
}
#if(IsSectionDefined("CSSIncludes"))
{
#RenderSection("CSSIncludes")
}
</umbraco:Macro>
</head>
and this(actual section in view):
<asp:Content ContentPlaceHolderId="ContentPlaceHolderDefault" runat="server">
<umbraco:Macro runat="server" language="cshtml">
#section JSIncludes
{
<script type="text/javascript" src="/js/main_page.js"></script>
}
</umbraco:Macro>
But when i'm trying to open a page, i'm getting "Error loading MacroEngine script (file: )" error on top of my page.
Do anyone know the reason of this?
Would be great, if somebody knew how to add things like this properly.
Thanks in advance.
You don't need to use a razor macro to add page-specific script references, use a ContentPlaceHolder
Master page:
<head>
<asp:ContentPlaceHolder ID="PageScripts" runat="server" />
<asp:ContentPlaceHolder ID="PageStyles" runat="server" />
Content page:
<asp:Content ID="PageScript" runat="server" ContentPlaceHolderID="PageScripts">
<script type="text/javascript" src="/js/main_page.js"></script>
</asp:Content>
Reference
I have ASP.Net Masterpage design & have to user a Fancybox to show videos as modal, When i show videos on a ContenPage & place all related scripts to FB on that page then it works fine for that page without any issue. But i also need Top 10 Videos to be shown on some page as a user control. What i do is that i create a User Control & put all the related scripts in that user control except the main jQuery which i user in masterpage & download as CDE.
In this case fancybox doesnt trigger.
I am to make it work if i black fancy-box related scripts on all contents page which i dont want to.
I want script to be in userControl
I have placed my sample code for user control & master Page below.
USER CONTROL
<%# Control Language="C#" AutoEventWireup="true" CodeFile="ucMostPopular.ascx.cs" Inherits="ucMostPopular" %>
<script src="<%= Helper.ResolveUrl("~/scripts/fancybox/jquery.fancybox-1.3.4.js") %>" type="text/javascript"></script>
<link href="<%= Helper.ResolveUrl("~/styles/english-jquery.fancybox-1.3.4.css") %>" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//Code to Reinitialize Fancybox script when using update panel START
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) { }
function EndRequest(sender, args) { InitMyFancyBox(); }
$(document).ready(function () {
InitMyFancyBox();
});
function InitMyFancyBox() {
$(document).ready(function () {
$(".youtube").click(function () {
// first, get the value from the alt attribute
var newTitle = $(this).find("img").attr("alt"); // Get alt from image
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
//'title': this.title, // we will replace this line
'title': newTitle, //<--- this will do the trick
'width': 680,
'height': 495,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': { 'wmode': 'transparent', 'allowfullscreen': 'true' }
});
// alert(this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'));
$.ajax({
type: "POST",
url: "UpdateVideoViews.aspx?youtubeVideoID="+this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
});
return false;
});
});
}
</script>
<!-- Videos -->
<div id="Videos" class="tab_text">
<div id="popular-videos-wrapper">
<asp:Repeater ID="rptPopularVideos" runat="server" EnableViewState="False" >
<ItemTemplate>
<div class="popular-article-title">
<asp:Label ID="lblCounter" CssClass="lblCounter" runat="server" Text='<%# Container.ItemIndex + 1 %>' > </asp:Label>
<asp:HyperLink ID="hylnkArticle" CssClass="popular-youtube-links" ToolTip ='<%# Eval("VideoTitle")%>' NavigateUrl='<%# generateVideoURL(Eval("VideoYoutubeID")) %>' runat="server" BorderWidth="0">
<asp:Label ID="lblArticleTitle" Text='<%# getVideoTitle(Eval("VideoTitle"))%>' runat="server" ></asp:Label>
</asp:HyperLink>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
<!-- Videos -->
MASTER PAGE
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="SiteMasterPage" %>
<%# Register Src="~/en/UserControls/ucLiquidCarousel.ascx" TagName="ucLiquidCarousel" TagPrefix="uc"%>
<%# Register Src="~/en/UserControls/ucNewsTicker.ascx" TagName="ucTicker" TagPrefix="uc"%>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 id="Head1" runat="server">
<title></title>
<asp:Literal ID="litCtrMetaForSM" runat="server"></asp:Literal>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="http://www.alshindagah.com/favicon.ico">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<link href="../styles/english_css.css" rel="stylesheet" type="text/css" />
<link href="../styles/horizontal-menu-english.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder>
<script type="text/javascript">
.....
//Other scripts
.....
</script>
I am not sure why this is not working i have moved script related to fancy box on masterpage then it worked only for default page & failed on other pages.
I also used ResolveURL(...) that didn't work either
I dont get any error regarding script.
I would appreciate help in this regard so that my fancybox will work by placing all the scripts related to fancybox from usercontrol it self
How could I add a tooltip to a ext:FileUploadField control? I tried to assign a ToolTip for my Browse button like the below, but it's not working.
<ext:FileUploadField ID="FileUpload1" runat="server" Icon="BrowsePicture" ButtonText="" ButtonOnly="true" AutoPostBack="true">
<ToolTips>
<ext:ToolTip runat="server" ID="FileUpload1_TT" Title="Browse" Html="Browse"></ext:ToolTip>
</ToolTips>
<Listeners>
<FileSelected Fn="showFile" />
</Listeners>
</ext:FileUploadField>
You can set Target="#{FileUpload1}-file" on the <extTooltip>.
The following example demonstrates the full scenario.
Example
<%# Page Language="C#" %>
<%# Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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>Ext.NET Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<form runat="server">
<ext:FileUploadField ID="FileUpload1" runat="server" ButtonOnly="true" ButtonText="Select">
<ToolTips>
<ext:ToolTip runat="server" Title="Browse" Html="Browse" Target="FileUpload1-file" />
</ToolTips>
</ext:FileUploadField>
</form>
</body>
</html>
Wrapping the string FileUpload1 with #{} will ensure the client-side .ID (.ClientID) is used to reference the correct instance of the <ext:FieldUploadField> object.
Hope this helps.
I'm semi-new to writing ASP.Net applications using master pages and I've run into an issue I've spent some time on but can't seem to solve.
My situation is that I have a master page with a structure that looks like this:
<head runat="server">
<title>Test Site</title>
<link rel="Stylesheet" type="text/css" href="Default.css" />
<script type="text/javascript" language="javascript" src="js/Default.js" />
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Pragma" content="no-cache"/>
<asp:ContentPlaceHolder ID="cphHead" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="divHeader">
<asp:ContentPlaceHolder ID="cphPageTitle" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="divMainContent">
<asp:ContentPlaceHolder ID="cphMainContent" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
I then have a page that uses this master page that contains the following:
<asp:Content ContentPlaceHolderID="cphHead" runat="server">
<script type="text/javascript" language="javascript" >
function test() {
alert("Hello World");
}
</script>
</asp:Content>
<asp:Content ContentPlaceHolderID="cphMainContent" runat="server">
<fieldset>
<img alt="Select As Of Date" src="Images/Calendar.png" id="aAsOfDate" class="clickable" runat="server" onclick="test();" />
<asp:Button runat="server" CssClass="buttonStyle" ID="btnSubmit" Text="Submit" OnClick="btnSubmit_Clicked"/>
</fieldset>
</asp:Content>
When I run this page and click on the image I get an "Object Expected" error.
However, if I place the test function into my Default.js external file it will function perfectly.
I can't seem to figure out why this is happening. Any ideas?
EDIT:
Try using an http analyzer like fiddler (fiddler2.com/fiddler2) to see if the script is actually loading. The issue is probably that the relative path of the aspx page is incorrect for the script you're loading. The path is always relative to the executing aspx, not the location of the Master Page. If the script isn't loaded, the function test() never exists hence the error.
Try this in your header to make sure the path is always correct
<script type="text/javascript" language="javascript" src='<%= Page.ResolveClientUrl("~/js/Default.js") %>' ></ script>
instead of
<script type="text/javascript" language="javascript" src="js/Default.js" />