JQuery is not being able to identify tags when I use in the Master Page. The following code:
<script type="text/javascript">
$("body").append('<div id="test"><p>Hello</p></div>');
</script>
Works fine in normal pages, but when the body is in the master page and I put this same code in the Master page - nothing happens!
How can I append to the page body from the ASP master page? Is there some sort of trick to this?
Any help would be greatly appreciated.
Mark.
looks like you need to wrap this in a document.ready block that way it will happen when the page is ready.
Remember the ASP.NET page lifecycle (refer here for a reference). I think this worked in your base page and not in the master page because the page happened to be ready once the base page loads, not once the master page loads.
<script type="text/javascript">
$(function() {
$("body").append('<div id="test"><p>Hello</p></div>');
});
</script>
which is also the same as
<script type="text/javascript">
$(document).ready(function() {
$("body").append('<div id="test"><p>Hello</p></div>');
});
</script>
Related
I have a master page with a few links on it, not asp:Hyperlinks, just normal tags. The links are on a menu bar that runs along the top of the page.
Then on the child page, when I click a button, I want to be able to get the value of a specific link on the menu bar at the top of the screen on the code behind page.
Does anyone know if I can do this, and if so, how?
I'm using .net web forms.
You can use jQuery to access elements within the master page.
<script>
$(document).ready(function () {
//Some function for someID on your master page:
$("#someID").toggle();
});
</script>
Since the master page and child pages are rendered before the (document).ready method completes, it ensures that all elements built onto the final page are visible.
Placing the above script into your child page will allow you to access elements in the master page file.
You will just need to ensure you have a jQuery link/reference:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
EDIT #1:
For getting the text off the master page into the code-behind of the child page you can do this (add hidden field to child page):
<asp:HiddenField ID="hdField" Value="SomeValue" runat="server" />
<script>
$(document).ready(function () {
//Some function for someID on your master page:
$("#hdField").value = ("#IDofLinkOnMasterPage").Value;
});
</script>
Then when your form posts to the child code-behind, you can look for the value of the hidden field by doing this:
var x = hdField.Value.ToString();
I have a user control on my web forms app and I need to reference a js file on the user control.
I would like to add this js file at the bottom of the output html page but I don't know how to do it from User Control.
I have following script references on my master page;
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js" type="text/javascript"></script>
and they are staying just after the </body> tag at the bottom. I'm using my user control like below on a web form page;
<userControl:SearchEngine ID="SearchEngine" runat="server"></userControl:SearchEngine>
and from this user control, I would like to add the a js at the bottom of the outputted html markup after the 3rd js file which you can see above.
any idea?
Try using RegisterClientStartUpScript() method to inject it at the end of the page:
http://msdn.microsoft.com/en-us/library/aa478975.aspx#aspnet-injectclientsidesc_topic2
Add a literal control at the bottom and set its text property with the content of the javascript file.
I have some linkbuttons to update my gridview which is in the middle of the page. Everytime I hit edit or delete etc the window scrolls to the top on the page that gets posted back. I want it to stay focused on the grideview. I have tried a javascript function but for some reason it did not work.
(edit: the following works as far as scrolling is concerned but prevents postback)
here is what I tried
<script type="text/javascript" language="javascript">
function goto() {
window.scrollTo(10, 1100);
}
</script>
<asp:LinkButton ID="lbtnGo" runat="server" OnClientClick="javascript:goto();return false;">GO</asp:LinkButton>
source
How can I do this?
Did you try with <%# Page MaintainScrollPositionOnPostback="true" %> in the page declaration?
Regards
Client-side event fires before server-side. So even if you scroll window to correct position - after postback you will be returned to the top. You can add the following code to your server-side LinkButton click event handler:
if (!this.IsStartupScriptRegistered("ScrollToGrid"))
{
String scriptString = "<script language=\"JavaScript\">";
scriptString += "window.scrollTo(10, 1100);";
scriptString += "</script>";
this.RegisterStartupScript("ScrollToGrid", scriptString);
}
this will add javascript block to your page after postback
There are, depending on the .NET framework properties available that can help one out:
ASP.NET 1.x: use SmartNavigation. ASP.NET 2.0: use MaintainScrollPositionOnPostBack. Use an UpdatePanel control to asynchronously update parts of a page
and the best way for this is UpdatePanel control to asynchronously update parts of a page
Is there any reason why registering a javascript file from the head tags of an ASP.NET master page wouldn't work? For example, I have the following (plus many other) file referece:
<script type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script>
but jquery (and every other JS reference) doesn't work when the page loads.
Any thoughts? Thanks.
The src attribute is relative, try
<script type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script>
and see if that fixes your problem
If that doesn't work, you can try this:
<script type="text/javascript" src="<%# ResolveUrl("~/js/jquery/jquery-1.4.2.min.js") %>"></script>
and in your Page Load handler in the master page add this code:
Page.Header.DataBind();
The masterpage can have script resources just like a normal HTML page; you'll probably want to check the problem with an HTTP debugger like FireBug or Fiddler2, if phsr is correct you'll see the requests failing with an ErrorCode.
Using master pages will not affect the loading of JavaScript files. Your problem is either the location of the file or the script tag is formatted incorrectly.
I'm trying to use jGrowl in an aspx page. But I encountered a problem that I couldn't solve.
When I use a regular aspx page the jGrowl is working fine. however when I use the page with a MasterPage the jGrowl is not working ,I got a javascript error saying $.jGrowl is not a function.
From Firebug Console, I can query $; $("a"); they return objects. Which means jquery is loaded, but $.jGrowl("hello world"); return "$.jGrowl is not a function."
Here is the sample code I'm using
<%# Page Language="VB" AutoEventWireup="false" CodeFile="growl.aspx.vb" Inherits="growl"
MasterPageFile="~/MyMaster.Master" Title="growl" %>
<script language="javascript" type="text/javascript" src="Scripts/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery.jgrowl.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery-ui.min.js"></script>
<asp:Content ID="maincontent1" runat="server" ContentPlaceHolderID="MainContent">
$(document).ready(function() { $('#demo12').click(function() { $.jGrowl("Growl Notification");
}); });
<button id="demo12" type="reset" onclick="$.jGrowl('Hello WORLD');">
DEMO</button>
The master page contains an Asp:ScriptManager.
Any help is very appreciate it.
Thanks,
Have you tried using jQuery.noConflict() and jQuery.jGrowl() to see if there is a conflict with the $ function between jQuery and the Microsoft javascript libraries?
Might be obvious, but can you check if you are correctly referencing the library? You might have the wrong path.
I found my problem. It was a literal in the MasterPage that is set in the page_Load to include the javascript library. When I removed it it works fine.
Thanks guys for your help.