I have an editor template which cannot reference anything from the scripts folder. If I place the same reference in my layout page it works perfectly:
<script src="#Url.Content("~/Scripts/tinymce/jquery.tinymce.min.js")"></script>
This works in my layout page but does not load in my Editor Template page.
Edit: Google Developer tools show 404 (Not Found). The file is in the correct location as it can be referenced from my layout Page.
In the body element of your layout page you need to have this code somewhere like this below:
<body> ... #Html.RenderScripts() </body>
and reference your script in your editor template like below:
#Html.Script(
<script src="#Url.Content("~/Scripts/tinymce/jquery.tinymce.min.js")"></script>
)
here is the alternative:
<body> ... #RenderSection("scripts", required: false) </body>
and on your template :
#section scripts {
<script src="#Url.Content("~/Scripts/tinymce/jquery.tinymce.min.js")"></script>
}
Related
I want to add some scripts at the head of a website, written in aspx. However, aspx pages do not have head part, but it is generated afterwards. how I can write something at the head of a website written in aspx?
You will have a layout page that has a head part. In that render an optional section for your scripts.
In your layout file:
<head>
...
#RenderSection("scripts", required: false)
</head>
And in your view in which you want to add scripts to the head part of the page do this:
#section scripts
{
#Scripts.Render("~/YourScript.js")
}
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 want to access a javascript function which resides in a script file from another page with iframe.
my sample code :
Page from which javascript need to be accessed.
<iframe id="FRAMESET" src="default.htm" width="0%" height="0%">
<p>
Your browser does not support iframes.
</p>
</iframe>
default.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="Scripts/main.js" type="text/javascript" />
</head>
<body>
</body>
</html>
main.js
function helloWorld() {
alert("hello World");
}
i want to access this function on main page. i tried document.getElementById('FRAMESET').contentWindow.helloWorld(); but gave me error "that document.getElementById('FRAMESET').contentWindow.helloWorld();" is not a function.
It's possible. You can do this in the page that contains the frame:
document.getElementById('FRAMESET').contentWindow.helloWorld();
It's impossible. All browsers (IE, FF, Chrome) now prevent js accessing to iframe content. Why don't you just load main.js into the main page?
I need to know how to load user control after the page is completely loaded
Incremental Page Display OR Lazy Load concept
typically like Pageflakes ?
This is called Ajax: http://www.w3schools.com/Ajax/ajax_intro.asp
To address your comment below, here is a (VERY SIMPLE) example of such a thing, using the jQuery library. http://jquery.com/
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#content").load("/myajaxpage.htm");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
This would download the myajaxpage.htm page after loading, and put the contents into the div with the id "content".
The Background
I run an ASP.NET site using Graffiti CMS for a local charitable/service organization.
The leaders of the organization want to start integrating a third-party back-end management system that exposes content as full HTML pages.
One of the pages, the officer list, uses inline script to load pictures or placeholders (depending on whether or not there is a picture for the given officer).
I've created a server-side proxy that enables loading the content from these pages using jQuery's .load() AJAX function.
I can display this content fine using an iframe, but that feels really kludgy, and if the size of the content changes, I may need to alter the size of the iframe to ensure it all displays (blech!).
The Problem
If I create a <div> in a Graffiti post, and use $("#divid").load(url) to load the content, the HTML content loads fine, but the inline script is stripped out, so neither the officer images nor the placeholders are displayed.
The Question
Understanding that the reason for the problem is that jQuery is almost certainly trying to protect against potentially bad stuff by removing the inline script before I load it into my DOM, is there a way using jQuery to grab this HTML and load it into my DOM that will preserve the script, but not open major security holes? I do trust the system from which I'm loading the content, if that makes a difference.
Suggestions? I'm looking to keep this as simple as possible...anything too complex, and I'm just as well off to stick with the iframe.
Thanks in advance!
#devhammer
There is an issue when you use document.write. If you have the ability to modify the source pages you can modify them to use the innerHtml technique instead.
To do so you would change something like this:
<div id="testDiv">
<script type="text/javascript">
document.write("<img src='image1.jpg' alt='' />");
</script>
</div>
To this:
<div id="testDiv">
<div>
<script type="text/javascript">
document.getElementByid('testDiv').innerHTML = "<img src='image1.jpg' alt='' />";
</script>
Doesn't work for me...
<!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>
<title></title>
</head>
<body>
<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var dynamic = 'begin <script type="text/javascript">alert("hello");<\/script> end';
$('#test').html(dynamic);
});
</script>
<div id="test"></div>
</body>
</html>
The alert box is showing.. but if you replace it with a document.write, nothing in the document.write appears... you have "begin end"
Hope this helps!
Try setting the HTML manually, like this:
$.get(url, function(htmlText) { $('#divid').html(htmlText); });
I'm pretty sure this will execute the scripts.