i have a master page. i try to add js files. vs editor is not draw green color. But no affect my pages with js. i can not use below js. How can i write src? (i can use pickurl) but i don't see effects of js on page
<script src="Engineering/EngDynamicsCreationExcel/EngJs/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../Engineering/EngDynamicsCreationExcel/EngJs/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../../Engineering/EngDynamicsCreationExcel/EngJs/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="~/Engineering/EngDynamicsCreationExcel/EngJs/jquery-1.3.2.min.js" type="text/javascript"></script>
i added my js files pic below. Also i have a MasterPage in MroTechnic
I would make use of ResolveURL:
<script type="text/javascript" src="<%= ResolveUrl("~/Engineering/EngDynamicsCreationExcel/EngJs/jquery-1.3.2.min.js") %>"></script>
Probably the problem is that your actual pages have different path than the master page which makes the path invalid. One solution would be to use ScriptManager and load the scripts with relative paths.
Related
In Site.Master page, I have references to a few CSS and JS files.
When a page in a subfolder uses this master page, I can see that the css file's path gets correctly translated, by adding necessary ../ in front of it, but not for JS files which results in 404 errors when viewed in Chrome's debug window.
I tired using ~ with runat=server to force translation; didn't work; tried using Page.ResolveURL that gives no error message but seems to break the script and not sure how I can this to work.
In Site.Master:
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
This gets correctly displayed as the following for a .aspx page that is in a sub-folder:
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
for JS files, none of the following works.
This one shows just as is for the same file in sub-folder:
<!-- Bootstrap Core JavaScript -->
<script src="assets/scripts/bootstrap.min.js"></script>
This one shows no 404 erro; a "/<sitename>/" gets prepended to path but script does not work (e.g. drop down menu does not drop)
<!-- Bootstrap Core JavaScript -->
<script src='<%= Page.ResolveUrl("~/assets/scripts/bootstrap.min.js") %>'></script>
And this one, I don't think I can do this!
<!-- Bootstrap Core JavaScript -->
<script runat="server" src="~/assets/scripts/bootstrap.min.js"></script>
I found the answer here. The post offers a few options but what was listed as Edit2 of the answer was what worked for me:
<!-- jQuery -->
<script type="text/javascript" src='<%= Page.ResolveClientUrl("~/assets/scripts/jquery.js") %>' ></script>
<!-- Bootstrap Core JavaScript -->
<script type="text/javascript" src='<%= Page.ResolveClientUrl("~/assets/scripts/bootstrap.min.js") %>' ></script>
If I add jquery ui reference as
<script src="/_Docs/_Altyapi/JqueryUi/jquery-ui.1.8.21.min.js" type="text/javascript"></script>
then tagit editor works fine(just under tag editor input), like:
But, if I use references like
<script src="/_Docs/_Altyapi/JqueryUi/ui/jquery.ui.core.min.js" type="text/javascript"></script>
<script src="/_Docs/_Altyapi/JqueryUi/ui/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="/_Docs/_Altyapi/JqueryUi/ui/jquery.ui.autocomplete.min.js" type="text/javascript"></script>
then, it doesn't work(as can be seen in photo2, custom autocomplete is at the top of page), like:
Include the position JS file as well to get autocomplete to work. Probably:
<script src="/_Docs/_Altyapi/JqueryUi/ui/jquery.ui.position.min.js" type="text/javascript"></script>
For future reference, you can always go to the widget's documentation page under overview and you'll see the dependencies for the widget.
This was working on Friday, and now isn't. I've got this at the beginning of a UserControl:
<link type="text/css" href="/App_Themes/css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#MainContent_ucSearchControl_dpPickupStart").datepicker();
$("#MainContent_ucSearchControl_dpPickupEnd").datepicker();
});
</script>
And further down, this:
<td><asp:TextBox id="dpPickupStart" runat="server" style="width: 65px"/></td>
<td><asp:TextBox id="dpPickupEnd" runat="server" style="width: 65px"/></td>
Which results in (in the rendered page) input controls with:
name="ctl00$ctl00$MainContent$ucSearchControl$dpPickupStart" id="MainContent_ucSearchControl_dpPickupStart"
name="ctl00$ctl00$MainContent$ucSearchControl$dpPickupEnd" id="MainContent_ucSearchControl_dpPickupEnd"
And yet, every time the page loads, I get an Object Expected javascript error which points to the $(document).ready location.
What am I missing?
EDIT: Firebug is reporting that:
$ is not defined
[Break On This Error] $(document).ready(function () {
Being a user control you cannot guarantee that the relative path to your JS files will always be correct depending on the location of the parent page in the file system hierarchy.
Therefore change you JS script tags as follows to use the Control.ResolveUrl method which converts a URL into one that is usable on the requesting client.
<script src='<%=ResolveUrl("~/Scripts/jquery-1.5.1.min.js")%>' type="text/javascript"></script>
<script src='<%=ResolveUrl("~/Scripts/jquery-ui-1.8.11.custom.min.js")%>' type="text/javascript"></script>
Or reference from a CDN for added performace bonus of caching.
jQuery hosted on google
jQuery UI hosted on google
That error is caused due to Jquery not available. I think Swaff's solution should work(+1). Check if you have the Jquery-1.5.1.min.js file is available in Scripts folder of your solution. Or it could also be that your Scripts folder is renamed.
HTH.
I am new to asp .net. I am trying to use the JQuery library scripts. So included them in my aspx page as follows
<script src="<%= Page.ResolveClientUrl("~/jquery-1.3.2.js")%>" type="text/javascript"></script>
<script src="<%= Page.ResolveClientUrl("~/jquery.validate.js")%>" type="text/javascript"></script>
<script src="<%= Page.ResolveClientUrl("~/jquery.form.js")%>" type="text/javascript"></script>
I just wrote the sample code to test the alert message.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert('hi');
});
</script>
I did not get any error when the page loaded but the alert message is not displayed. I hope I have got all the files necessary for using jquery. But I dont know why the alert message does not display. Any thoughts or comments?
You need to do the following then for each file:
<script src='<%= Page.ResolveClientUrl("~/scripts/jquery/a-jquery-file.js")%>'
type='text/javascript'></script>
~/ indicates the root of the folder, so you need the additional folder structure.
I am using the ASP.NET Client-Side ajax control toolkit in my asp.net MVC application. I see that there is a .js file named "AjaxControlToolkit.ModalPopup.ModalPopupBehavior.js" in the AjaxControlToolkit folder. However, I cannot find any examples on how to use it.
[Edit] -
As mentioned, I am using the Client-side, Script-only control toolkit. For those unfamiliar, here is the description from CodePlex:
AjaxControlToolkit-ScriptFilesOnly.zip
contains script files, CSS style
sheets and pictures used by the
toolkit. Use this download if you
don't want to use embedded resources
and prefer a file-based model.
I have not been able to find many resources on how to use some of the scripts included with this.
CodePlex link: http://www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.aspx
Yestarday I had the same need to use the popup extender and here are the js files which you should include first.
<script src="javascripts/MicrosoftAjax.js" type="text/javascript" ></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.Compat.Timer.Timer.js" type="text/javascript"></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.Common.Common.js" type="text/javascript"></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.ExtenderBase.BaseScripts.js" type="text/javascript"></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.Animation.Animations.js" type="text/javascript"></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.DropShadow.DropShadowBehavior.js" type="text/javascript"></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.DynamicPopulate.DynamicPopulateBehavior.js" type="text/javascript"></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.PopupExtender.PopupBehavior.js" type="text/javascript"></script>
The next step is to create the PopupBehavior from javascript like that:
$create(AjaxControlToolkit.PopupControlBehavior, {"PopupControlID":"div_to_popup","Position":3}, null, null, $get("textbox_input_id"));
If you need to use another control from the AjaxControlToolkit with scripts only without the burden of asp, here is one easy way to find the necessary include js files.
Go to its demo page here and look at the source of the page. At the bottom you will see how to create the control. To find the include files needed for this control select CombineScriptsHandler.ashx and search for "//START". Every line with "//START" shows a script which is included in the page.
Check out the AJAX Toolkit samples. There are live demos, walkthroughs and documentation.