I have an ASP.NET server control which relies on JQuery for certain functionality. I've tried to add as a webresource.
My problem is my method of including the jquery file adds it to the body, or the form to be exact:
this.Page.ClientScript.RegisterClientScriptInclude(...)
The alternative to this is to add it as a literal in the head tag:
LiteralControl include = new LiteralControl(jslink);
this.Page.Header.Controls.Add(include);
The problem with this however is any existing code srcs in the head which use JQuery fail, as JQuery is loaded afterwards (ASP.NET adds the literal at the bottom of the control tree).
Is there a practical way of making JQuery an embedded resource, but loaded in the head first? Or should I give up now.
If you want to package up jQuery and embed it inside your own server control you should serve it to the client using the ScriptManager. From the top of my head you have to:
add jQuery.js to your project
under its "Build Action" Property,
make it an Embedded Resource
in the AssemblyInfo.cs for your
control add
[assembly: WebResource("<Your Server Control namespace>.jQuery.js", "application/x-javascript")]
Make your control inherit from
System.Web.UI.ScriptControl (or at
least implement IScriptControl)
Override GetScriptReferences:
protected override IEnumerable<ScriptReference>
GetScriptReferences()
{
return new ScriptReference[] {
new ScriptReference("<Your Server Control namespace>.jQuery.js", this.GetType().Assembly.FullName),
};
}
All of your own client script should be setup inside:
protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
Which will then ensure the correct order of dependencies (ie jQuery will be available to your own client script).
Update:
A far easier way of doing it is to simply add the script tag dynamically, in your script and point to the google code hosting. e.g.
function include_dom(script_filename) {
var html_doc = document.getElementsByTagName('head').item(0);
var js = document.createElement('script');
js.setAttribute('language', 'javascript');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', script_filename);
html_doc.appendChild(js);
return false;
}
include_dom("http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js");
The function is taken from this article
Crecentfresh pushed me in the right direction, I also found
http://en.csharp-online.net/Creating_Custom_ASP.NET_AJAX_Client_Controls—IScriptControl.GetScriptReferences_Method.
My problem still remains though, the ScriptManager adds the references after the script in the head but I think this is an issue that can't be resolved. I've opted to answer myself but also upvoted crescentfresh.
Related
I'm adding a script tag to a web page once it's fully loaded in a WebEngineView, but it's silently failing somehow.
I inject the script by invoking webview.runJavaScript with this code:
var s = document.createElement('script');
s.src = "qrc:/jquery-2.1.4.min.js";
document.body.appendChild(s);
That's perfectly standard and to a certain extent it works as expected, i.e., if I view the html source of the page, the script tag has indeed been appended to the body.
The problem is that the script isn't being downloaded, or isn't being evaluated, or something. All I know is in the above example the jQuery functions aren't available. If I load a small JavaScript test file with one global variable, that variable's not available either. Changing the url to http instead of qrc and pointing it to a web server makes no difference.
Injecting an img tag works fine; the image is loaded and displayed.
But JavaScript is broken somehow. Does anyone know how to fix this?
The problem had to do with the asynchronous nature of QML and JavaScript.
I was inserting a script tag to inject jQuery, and then I was calling a function to de-conflict my inserted version of jQuery from whatever version of jQuery might already be in the original page.
But I believe the webview had not finished parsing the inserted jQuery library before my de-conflicting function was called, so it failed. (I'm not very experienced with browser programming or I might have suspected this from the beginning.)
The solution was to insert a script tag with a small bit of JavaScript that inserts jQuery and then sets a timeout to wait 200ms before calling the de-conflict function. Like so:
function insertAuhJQuery(){
var s = document.createElement("script");
s.src = "qrc:/jquery-2.1.4.min.js";
document.body.appendChild(s);
window.setTimeout(deConflictJQuery, 200);
}
function deConflictJQuery(){
auh = {};
auh.$ = jQuery.noConflict(true);
}
insertAuhJQuery()
That works reliably and is acceptable for my purpose.
Hi I have some controls on an asp.net modal which I show manually via code behind. Now I am trying to attach a selector on one of the controls inside pageLoad(), problem being is that the modal container is initially set to visible=false.
I tried checking for length but it still throws exception
if ($('#<%= myControl.ClientId %>').length > 0)
{
$('#<%= myControl.ClientID %>').click(function() {
// Do work
});
}
Compiler Error Message: CS0103: The name 'myControl' does not exist in the current context
A few things here, the first/main issue is that myControl isn't defined in the current scope, wherever you are in ASP.Net, that's entirely a .Net side problem.
For the Script, there are more issues, .ClientID, not .ClientId. Also, there's no need to check for it's existence, you can just do:
$('#<%=myControl.ClientID%>').click(function(){
// Do work
});
...if the control isn't there, it just won't find/bind anything. There's also an easier way to go about it in ASP.Net, if there's a unique class you can give it, just give add that class, e.g. CssClass="MyClass", then use that as your selector; like this:
$('.MyClass').click(function(){
// Do work
});
This allows you to put the script in an external file instead of the page as well, another benefit to the user.
On my page I have some images on thisdomain.com/images. on document.ready(), I change the src attribute of images to thatdomain.com/images. Firebug's Net tab shows me that images are downloaded from both thisdomain.com and thatdomain.com. How can I prevent the browser from downloading images from thisdomain.com?
$(document).ready(function(){
$("img").each(function() {
var $img = $(this);
var src = $img.attr("src");
$img.attr("src", src.replace(/thisdomain.com.com\/images/i, "thatdomain.com\/images"));
});
});
EDIT: ASP.NET server-side override of Render() using code "in front" i.e., <script runat="server"> I just added this to the aspx page without recompiling code-behind. It's a bit hack-ish but it works.
<script runat="server">
static Regex rgx = new Regex(#"thisdomain.com/images", RegexOptions.Compiled | RegexOptions.IgnoreCase);
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
using (HtmlTextWriter htmlwriter = new HtmlTextWriter(new System.IO.StringWriter()))
{
base.Render(htmlwriter);
string html = htmlwriter.InnerWriter.ToString();
string newHtml = rgx.Replace(html, "thatdomain.com/images");
writer.Write(newHtml.Trim());
}
}
</script>
This sounds like something that is impossible to achieve reliably, because images will start to load asynchronously as soon as a src has been specified.
I can't think of a workaround. The <base> tag would allow for some kind of "mass redirection" but the URIs would have to be relative ones for that to work.
I'm sure you have your reasons for outputting thisdomain.com in the first place, but I'm pretty sure you'll have to change your code so thatdomain.com gets output instead (or no src gets specified at all so you can add them using jQuery) if you want a 100% watertight solution.
This ain't going to work in the client side. Your best bet is a server side solution. Have the server side script (PHP? JSP? ASP? etc) to read the to-be-included HTML source and replace the src's accordingly with help of a decent DOM parser before it get emitted to the client side.
I don't that is possible at all. To use jQuery functions, the jQuery library needs to be downloaded, which probably means the browser already started downloading other assets, such as images.
You can't be completely sure to prevent downloading by changing the URL after the element has been parsed. The closest possible that you can get is by changing it immediately after the element:
<img id="something" src="http://www.thisdomain.com/images/hello.gif" />
<script type="text/javascript">
var $img = $('#something');
$img.attr("src", $img.attr("src").replace(/thisdomain.com\/images/i, "thatdomain.com\/images"));
</script>
I don't think there is a way to halt GET requests from img elements once the page has loaded. It's difficult to suggest an alternative since I'm not sure what you're trying to achieve.
Can you be more specific?
In my website I'm using the standard ASP.NET menu control. I already got so far as to write a custom control adapter to get rid of the rather tacky html output that is generated by the default control adapter.
One thing keeps buggering me though. Somehow ASP.NET is generating extra javascript that I don't want nor need for my menu controls, since I won't be using any of the dynamic features in the control. I replaced the control adapter, so it doesn't generate compatible HTML for that.
Anyone got an idea how I can prevent ASP.NET from generating the extra javascript for the menu control?
This problem cropped up for me after upgraded to ASP.net 4.0 with the installation of vs 2010. The fix is to either force the menu to render as a table or to turn off the new CSS/javascript "features" that 4.0 adds. Settings the menu's RenderingMode attribute to "Table" fixed this problem for me even though I use a Menu Adapter to render the control with lists.
<asp:Menu ID="mnuStuff" runat="server" RenderingMode="Table">
...
</asp:Menu>
You can do this site wide setting controlRenderingCompatibilityVersion to 3.5 in the web.config:
<system.web>
<pages controlRenderingCompatibilityVersion="3.5"/>
</system.web>
This will eliminate the rendering of inline javascript that asp injects in the base of the page.
If you prefer to stick with ASP.Net 4.0 control rendering you can create a custom menu (derived from System.Web.UI.WebControls.Menu) and replace the OnPreRender:
public class MyCustomMenu : Menu
{
protected override void OnPreRender(EventArgs e)
{
// Don't call base OnPreRender
//base.OnPreRender(e);
}
}
That did the trick.
An alternative way to get rid of the menu startup script is to call RegisterStartup script method before the Menu PreRender event, using the same script key, and outputting dummy (or empty) script.
This relies on internal implementation details of the Menu Type discovered using Reflector, so is somewhat fragile.
For example, a static class that looks something like:
static MenuHelper
{
private static Type _rendererType =
typeof(Menu).Assembly.GetType(
typeof(Menu).FullName + "+MenuRendererStandards"
);
public static void RemoveMenuScript(Menu menu)
{
string dummyScript = "<!-- Removed Menu Startup script -->";
string key = "_registerMenu_" + menu.ClientID;
ScriptManager.RegisterStartupScript(menu, _rendererType, key, dummyScript, false);
}
}
You then just need to make sure you call MenuHelper.RemoveMenuScript(menu) before the menu's PreRender event.
The OP is using an Adapter so Tim Santeford's answer is better in his situation. But if you want to render a static menu as a list without the startup code, and without the effort of writing an adapter, this might be an alternative.
<script type="text/javascript">
Sys.WebForms.Menu = "";
</script>
it works..
use it in aspx page
I just plan to ask about a similar question after 2 hours of search and have no luck.
What I want is to use the jquery superfish plugin as I want its animation for smooth looking. And with the ASP.NET generated javascript, the superfish just won't work.
And finally I try to set the ASP.NET Menu's control's attribute Enabled = false
and the outcoming source becomes this:
new Sys.WebForms.Menu({ element: 'mysitemeun', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: **true** });
After tracing the code, setting it disabled still have some style changes in the Menu but it will not add event to the MenuItem. And the superfish's animation works now.
if (!this.container.disabled) {
Sys.WebForms.Menu._domHelper.addEvent(this.element, 'mouseover', Sys.WebForms.MenuItem._onmouseover);
Sys.WebForms.Menu._domHelper.addEvent(this.element, 'mouseout', Sys.WebForms.MenuItem._onmouseout);
}
How do you get an ASP.NET application relative URL from JavaScript?
You could always generate a set of constants for paths that you will be using in a way which Javascript can see. ex:
<script type="text/javascript">
var Paths = {};
var Paths.Images = '<%= ...MapPath("~/images") %>';
var Paths.Scripts = '<%= ...MapPath("~/scripts") %>';
</script>
Of course, you can adapt this to your app's needs. For example, it might not be a bad idea to stick the initial declaration of Paths in a common js file, and have a method in your master page to add paths you will definitely need on each page. Subpages can generate paths as needed, possibly from a helper method of some sort that generalizes the whole process.
edit: I've been thinking about this some more. Here's a possible implementation, completely untested and probably not exactly right:
public static string RegisterPathsForJavascript(IDictionary<string,string> paths)
{
var pathConstants = "";
foreach(var path in paths)
{
pathConstants += string.Format("Paths.{0} = '{1}';\n",
path.Key,
Server.MapPath(path.Value));
}
return pathConstants;
}
and in your page:
<script type="text/javascript">
<%= RegisterPathsForJavascript(new Dictionary<string, string> {
{ "Images", "~/images" },
{ "Scripts", "~/scripts" }
}) %>
alert(Paths.Images);
</script>
Client-side code (JavaScript) has no concept of server-side component boundaries (like an asp.net app) so there's no nice and easy 'native' way for JavaScript to do that (that I know of).
The best (probably awful) method I've used to get around that is to have the asp.net app provide that info to the script when the page is served; there's a couple of options:
Include a hidden-field/TextBox/whatever and set the value of it to any server generated value you want; obviously JavaScript will be able to read the value easily enough.
Have asp.net/your app dynamically write/generate part of the JavaScript, when it does it writes the value as a variable where your other JavaScript can reference it.
In order to get the application's relative URL, you can use
Request.ApplicationPath
which requires a request context.
To transform a complete path, use
System.Web.VirtualPathUtility.ToAbsolute(path)
which can be used without context.
If you are on an .aspx page, you can use the ResolveUrl method of the page.
For more information see Different approaches for resolving URLs in ASP.NET as pointed to by #pranay-rana in Getting full URL from URL with tilde(~) sign.