So here I want to put some JavaScript for my carousel from Twitter bootstrap, the problem is, it seems having no effect no matter where I put it, I already made sure the id matches. Here's the code (note: I'm using master page)
$(‘.carousel‘).carousel
({
interval: 1000
})
I put it in <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content> which I believe is the head, but it still not working, any advice on how to do this?
Assuming your master page has something like this in it:
<head>
<asp:ContentPlaceHolder ID="head" runat="server" />
</head>
Then any page which is based on this master page you can indeed put anything inside <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> which you want to be placed in the <head> section of your web page. This routinely contains bits of javascript, however in order for jQuery to do it's think you must wait until the document is ready:
<script>
$(document).ready(function(){
$('.carousel').carousel
({
interval: 1000
});
});
</script>
As an additional point (or, stab in the dark) you mention in your question "I already made sure the id matches" however you have not referenced any element by ID (except perhaps the ContentPlaceholder); your jQuery code references an element by class name .carousel.
Put your code in child page in which you have implemented carousel. also make sure to reference JQuery and carousel script file
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({
interval: 1000
});
});
</script>
Related
I have an array of objects that are loaded server side in the C# code from a text file I am attempting to pass this array to one of the content pages. It worked without issue when I did not use a master page but once I added the master page it no longer works.
Here is the aspx.cs page:
// Convert list of objects to a json array
string jsonString = JsonConvert.SerializeObject(clownIncidents);
cs.RegisterArrayDeclaration("markers", jsonString);
When I try to access it on the content page it says markers is undefined:
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<div id="map" ></div>
<script src ="jss/Maps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=MYKEYcallback=initMap"></script>
</asp:Content>
Lastly here is the JavaScript referenced in the content page:
function initMap() {
alert(markers);
}
This occurs because the JavaScript code generated from cs.RegisterArrayDeclaration("markers", jsonString); appears in the HTML after your script in the content page. So, when your script runs, the variable markers is not yet defined.
To overcome this you need to add a new <asp:ContentPlaceHolder> in your Master page, which must be after the <form runat="server"> element and use that ContentPlaceHolder to have your JavaScript.
For example, your Master page will be:
<form runat="server">
<%-- Here is your Master page --%>
</form>
<asp:ContentPlaceHolder ID="ScriptContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
And then, in your .aspx content page, you can have your script like this (add the following snippet in the end of your .aspx page):
<asp:Content ID="Content2" ContentPlaceHolderID="ScriptContentPlaceHolder" runat="server">
<div id="map" ></div>
<script src ="jss/Maps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=MYKEYcallback=initMap"></script>
</asp:Content>
I'm sorry if the title of this question is quite vague...
I have a Web Application composed by a MasterPage in wich I include all my css and js files and any other page will be loaded into the content of the MasterPage.
In a page I call another page via javascript with this call:
<script type=text/javascript>window.open('ApriOrdine.aspx?ID=B300&MODE=UPD',null,'scrollbars=1')</script>
the page ApriOrdine.aspx contains 2 UserControls. I have a problem with css rules, I cannot set the padding using css rules written in css external files.
This is the whole code of my ApriOrdine.aspx:
<%# Page Title="Orders" Language="C#" AutoEventWireup="true" CodeBehind="ApriOrdine.aspx.cs" Inherits="WebApplication1.ApriOrdine" EnableEventValidation="false" %>
<%# Register TagPrefix="UC" TagName="UserControlCom" Src="~/Commessa.ascx" %>
<%# Register TagPrefix="UC" TagName="UserControlCli" Src="~/Cliente.ascx" %>
<head runat="server">
<link href="css/css.css" rel="stylesheet">
</head>
<body>
<form runat="server">
<div class="ApriOrdine">
<div>
<UC:UserControlCom runat="server" ID="ucCommessa" />
</div>
<div>
<UC:UserControlCli runat="server" ID="ucCliente" />
</div>
</div>
</form>
</body>
As you can see, the css.css file it's included behind head tags.
The problem in that if I write this css rule in my css.css like this it doesn't works.
.ApriOrdine
{
padding:50px;
}
Instead, if I assign the padding using style attributes to the div it works perfectly...
<div class="ApriOrdine" style = "padding:50px;">
EDIT
this is my complete source code
and this is the css
So, what is wrong here? Please help me, thanks!
If you need some more details please ask me!
The only reason i see is that your reference to the css is not good.
I don't know the structure of your project but i guess the master page is not at the same place as your .aspx page. So if you copy and paste the reference from the master page it's not working in the .aspx page cause the structure is not the same.
An other thing you could do is once the page is loaded, open the source code of the page and look at the reference generated in the page and make sure the path is good.
Hope this help.
I am in the process of handling a Long Press event in the JavaScript of an ASPX page but since I don't have much experience with JavaScript having a couple issues. I am working of a question which was already asked here.
When I run the code I get the message "$ is not defined" and when I change $("Button1") to ("Button1") then I get the message stating the mouseup function doesn't exist. The primary problem I'm having is accessing the aspx control properly. Below is my code.
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function () {
var pressTimer;
var longPress = 1000;
$("#<%= Label1.ClientID %>").bind("touchend", function (e) {
var d = new Date();
var timeDiff = d - pressTimer
if (timeDiff > longPress) {
document.getElementById("demo").innerHTML = "Mouse Up";
//actual logic here
}
return false;
});
$("#<%= Label1.ClientID %>").bind("touchstart", function (e) {
pressTimer = new Date();
return false;
});
});
</script>
<title>Long Press Testing</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:label ID="Label1" runat="server" text="Hold This Down" />
<br />
<p id="demo"></p>
</div>
</form>
</body>
</html>
Thanks for the help.
[EDIT] - Turns out I was missing the ready statement so the event is now firing as it should. This is the final version which is behaving properly. Also I wrote this to handle long press functionality on the iPad so if anyone is trying to do that this code is a good place to start.
You are missing jQuery script registration in head section like:
<script src="jquery.js"></script>
$ sign is jQuery's identifier, not JavaScript's.
Also, your buttons will not work, because you are referencing server button, but you must provide an id for JavaScript to work properly:
$("#<%= Button1.ClientID %>").mouseup(function () {
clearTimeout(pressTimer)
// Clear timeout
return false;
})
Looks like you are attempting to use jQuery (or another similar framework) without actually registering the appropriate script. You will need an <script/> block or some similar construct.
Looks like you havent included jquery in your project. you can include it by using the google hosting below, or go to jquery.com and download it and include it. your going to want to put in the Head tag above the other scripts you wrote. also, you might want to add a # before the id because it uses css selectors. Also, im not sure how much of the code will execute because thats a server button which will cause a post back.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
I've a specific requirement of rendering Javascript onto a master page of an asp.net site. There are two specific requirements of it:
1) The position - It should be rendered at the very end of the page just before BODY tag
2) Control - Render it only when requested.
I solved #2 by creating a web-part which will render the javascript only when its placed on the page. But I could not achieve #1 since the web part doesn't give me control over where to render the javascript inside body tag.
Did anyone solve this problem before?
Please advice.
Thanks
Sachit
Try using ClientScript.RegisterStartupScript, it injects the script right above the </body> tag.
RenderControl is the last method to return in MasterPage Event Lifecycle that you can override. My guess would be to put it there.
If you are using Master Page, then why not put a content place holder just before the end body tag? The content pages should render their JavaScript in that particular place holder.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<asp:ContentPlaceHolder ID="headerContent" runat="server"/>
</head>
<body>
<form id="mainForm" runat="server">
<asp:ContentPlaceHolder ID="mainContent" runat="server" />
<asp:ContentPlaceHolder ID="footerContent" runat="server" />
</form>
<asp:ContentPlaceHolder ID="footerJsContent" runat="server"/>
</body>
</html>
Content pages should render their JavaScript inside the footerJsContent place holder.
I have a simple View and I wish to add a JQuery DatePicker JavaScript to this view (and not every view, via a masterpage).
I'm not sure what is the best way to do this.
Second, I'm conscious of where/when my JavaScript loads. I'm a fan of YSlow and it recommends that I add any scripts to the bottom of the page, which I do.
So, how could I do both?
Here's the view:
<%# Page
Language="C#"
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h2>Index</h2>
<% using (Html.BeginForm()) {%>
<p>
<label for="StartDate">Start Date:</label>
<!-- JQuery DatePicker to be added, here. -->
</p>
<% } %>
</asp:Content>
In ASP.NET MVC3, you can now use a RenderSection to achieve this, at least for simpler scenarios. Just add a RenderSection to the bottom of the layout page, and from your view fill in the appliation code
RenderSections: http://www.dotnetcurry.com/ShowArticle.aspx?ID=636
Your MasterPage should have a ContentPlaceHolder for the head.
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server" />
</head>
Then you're able to include head elements (JavaScripts, StyleSheets, etc...) in your views:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="/Scripts/jquery/ui/ui.datepicker.js" type="text/javascript">
</script>
<link href="/Styles/myStyle.css" rel="stylesheet" type="text/css" />
</asp:Content>
One way is put a content placeholder at the bottom of your master page, then the specific slave page that needs the javascript can specify the placeholders contents as the required javascript. Other pages that don't need the javascript simply don't specify any content for the placeholder.