I am a novice at implementing jQuery add ons. I'd like to use editable on my site:
http://www.arashkarimzadeh.com/jquery/7-editable-jquery-plugin.html
I am using 2 jQuery add ons on my site already... but the packages had all files I need. So I have a scripts folder, with jquery-1.4.1... And then a folder for each 'plugin', such as 'plupload', and in there I have a whole lot of .js files and a few folders. This was a folder downloaded from the authors site.
With 'editable', they only provide a single .js file. What do I do with it (Where should I copy it on my site structure), and how do I 'include' it in my project, so that I can make use of the code they provide?
My html code looks like this:
<div id="editable"> Click Me </div>
and I have my function at the bottom of as ascx file:
.....
<script type="text/javascript">
$(function () {
$('#gallery a').lightBox({
imageBtnClose: '/lightbox/images/lightbox-btn-close.gif'
});
});
$(document).ready(function () {
$('div.editable').editable();
});
</script>
</asp:Content>
And I have this at the top of the file:
<script type="text/javascript" src="scripts/jquery.editable-1.3.3.js"></script>
Have you tried putting the .js file in your scripts folder? Then add this tag to your <head> tag:
<script type="text/javascript" src="scripts/jquery.editable-1.3.3.js"></script>
Where the src points to your file.
Once that is done you should just use this (or any other settings you want) within another <script> tag:
$(document).ready(function(){
$('div.editable').editable();
});
Where div.editable is the div you want to be editable.
With most one file plugins, you'll only have to do it like this:
<head>
<script src="jQuery.js"></script>
<script src="jQuery.Editable.js"></script>
</head>
Related
I created a ASP.NET core template and wrote a jquery script. When I look at the page I see that jquery is loaded into the page, but the script doesn’t run. I looked at the ASP.NET docs page and my layout.cshtml looks the same, so are there extra steps I must take to get jquery working?
Home page
#{
ViewData["Title"] = "Home Page";
}
<!-- Page Content-->
<div class="container">
<div class="row">
<form method="post" enctype="multipart/form-data">
<input type="file" id="files" name="files" multiple />
<input type="button" id="upload" value="Upload Selected Files" />
</form>
</div>
</div>
<script>
$(document).ready(function () {
alert("Test");
});
</script>
Solution
#section scripts
{
<script>
$(document).ready(function() {
alert("Test");
});
</script>
}
I suspect your jquery is loaded after the rest of the page content.
This means that you cannot reference jquery objects as the library has not been initialised yet.
Move the page script after jquery has loaded.
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
alert("Test");
});
</script>
For efficiency I recommend you do this in one of two ways:
OPTION 1
Use a master script file that loads after jquery.
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/master.js"></script>
OPTION 2
Use a placeholder template that will always load after jquery but can be initialised on individual pages.
Master _Layout Page
<script src="~/lib/jquery/dist/jquery.js""></script>
#RenderSection("Scripts", required: false)
Content Page
#section Scripts {
<script>
$(function () {
alert("Test");
});
</script>
}
FOR CLARIFICATION
If you are referencing jQuery in your _Layout page.. double check to ensure that that reference is at the TOP of your _Layout page because if it is at the bottom, then every other page you have that use the _Layout and has jQuery, it will give you errors such as:
$ is undefined
because you are trying to use jQuery before it is ever defined!
Also, if your are referencing jQuery in your _Layout page then you do not need to reference it again in your pages that use your _Layout style
Make sure that you are loading the reference to jQuery before you start using <scripts>.
Your cshtml should work if you put the reference above your script as so:
<script src="~/Scripts/jquery-1.10.2.js"></script> // or whatever version you are using
// you do not need to use this reference if you are already referencing jQuery in your Layout page
<script>
$(document).ready(function () {
alert("Test");
});
</script>
If you create a new .Net Core 2.2 - Web Application with Razor Pages and try to add a jQuery script in index.cshtml you will get the error Uncaught ReferenceError: $ is not defined. As already mentioned this is because jQuery is loaded after the rest of the page content.
Fix this by navigating to Pages\Shared\_Layout.cshtml and add the scripts section to the html head tag instead. Then it will work:
Example:
Move from below </footer>:
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
</script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
Into <head>, should look like this:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - JiraApp.Clients.Web</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
</environment>
<link rel="stylesheet" href="~/css/site.css" />
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
</script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</head>
Thanks to everyone who contributed to these answers. I am new to JavaScript/jQuery and have been trying to get jQuery scripts to work for over two weeks now. I have gotten a few examples to work but, until now, I had no idea why something worked or did not work.
All of the examples I have looked at online show the references to .js files at the bottom of the page. None of the examples explain how the _Layout.cshtml file works in relation to the Razor views in an application. It is so confusing to add the links and script references to the _Layout.cshtml file only to have it not work as expected. Next, I moved the links and references to a header section on the razor page and it still did not work. Now that I have everything organized correctly, it is working and I understand why!!!
The key was putting the script inside the #section Scripts {} block. I had seen the call to RenderSectionAsync but did not realize what it was doing. This is how the bottom of my _Layout.cshtml file looks now:
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.inputmask.min.js"></script>
<script src="~/lib/jquery/dist/inputmask.binding.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
I hope many new developers see this post. When it comes to an ASP Net Core application with Razor views, the information provided in this thread is priceless! Again, many thanks to everyone who contributed to the answer.
must write below first line in while where you want to execute script.
if you write first line in other wile, it is not working.
below example to test JQUERY work or not.
<script>
$(document).ready(function () {
alert("Test");
});
</script>
This is similar to the fullcalendar question posed here on Stackoverflow. I shared the following solution on that question --
This is a good reference for what has been asked here. I downloaded jQuery directly and unarchived it into the wwwroot/lib folder/directory to get going with my project - however as I needed more JS libraries, it seemed that the Nuget option of installing JS libraries into my project really was an impossible path/option.
Consider;
not sure why you would use nuget packages for javascript libraries. your example has not been updated in the last four years, and probably doesn't support .net core projects (may not even work a current version of jQuery).
you should be using a javascript repository and package mangers like bower or npm, that manages the dependencies between libraries.
That is from the linked MS Forum. Anyhow, the question can be flagged as a duplicate of the other Fullcalendar question (which was posed two years prior to this one).
I have seen multiple articles/questions about formatting a gridview rows using jquery.
However consider this my first attempt to write a jquery and use it in an asp.net page.
I manage to do the following, but it doesn't do anything to the gridview. What have I done wrong?
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
</head>
Within body section, after GridView1 is created:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#<%=GridView1.ClientID%> td:nth-child(odd)").css("background-color", "#FFCCCC");
$("#<%=GridView1.ClientID%> td:nth-child(even)").css("background-color", "#99CCFF");
});
</script>
I also have this jquery saved as jqueryColumnColours.js in the scripts folder. So the second question, how can I use .js file without really writing the above function within aspx page?
EDIT:
$(document).ready(function () {
$("#GridView1 td:nth-child(odd)").css("background-color", "#FFCCCC");
$("#GridView1 td:nth-child(even)").css("background-color", "#99CCFF");
});
Include the latest jquery like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
and add the script tag just before closing body section,
</form>
<script type="text/javascript">
$("#grid td:nth-child(odd)").css("background-color", "Tan");
</script>
</body>
I hope it helps!!!
EDIT by bonCodigo:
The only change that works for my page was having http:// instead of //
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
I am attempting to implement this simple example. However, the Javascript isn't working (all the content is showing at all times, no tab 'switching' is occurring). All the JS files are hosted locally.
In my head content placeholder:
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script type="text/javascript">
// not working
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
In my main body content placeholder:
<div id="tabs">
<ul>
<li>One</li>
<li>Dos</li>
<li>Drei</li>
</ul>
<div id="tabs-1">
<p>Blah blah blah.</p>
</div>
<div id="tabs-2">
<p>Blah some more.</p>
</div>
<div id="tabs-3">
<p>Blah again.</p>
</div>
</div>
So far from searching SO and wherever else Google has taken me, this is what I've found and tried (with results for each listed):
Wrap the jQuery code in $(document).ready(function () { // code here }); rather than a simple function ($(function() { $( "#tabs" ).tabs(); });). It doesn't work either way.
Instead of $("#tabs").tabs();, use $("#<%= tabs.ClientID %>").tabs(); so that .NET can get the ID of the html element. In addition to not working, this also produces the error: tabs does not exist in the current context.
Place the JavaScript in the same content placeholder as the #tabs div tags. Still doesn't work.
Add runat="server" to the #tabs div tag. Still doesn't work.
Delete the designer file, then right click on the aspx file and select "Convert to Web Application". This doesn't work because this is already a web application and there is no designer file.
I can't figure out what else to do to make it work.
UPDATE: I was asked to view my browser console logs and found the following:
One of the JS files is giving a HTTP/1.1 401 Unauthorized error. I noticed it was blocked and I unblocked it from the file system, but it still isn't working.
I think problem could be in path to the jquery scripts.
Try to check loading of resources in browser console, or you can try to include jquery from jquery server...
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Page created using ASP .NET MVC 2 takes 1.7 sec to load.
It contains 13 js files as shown below. Firebug shows that every js file load returns 304 response but since there are 13 files it may increace page load time a lot.
Chrome audit red alert recomments to combine js files.
How to combine them to single file using ASP.NET MVC 2 automatically or other way to decrease load time ?
There should be separate js files in project to allow to replace them but those should delivered
as single js file probably.
jqgrid, jquery, jquery-ui, tinymce and some jquery plugin js files are used as shown below.
Visual Web Developer Express 2010 is used. Application is running under Mono 2.10/Apache and under Windows/IIS
site.master contains:
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1" />
<link rel="stylesheet" href="../../themes/redmond/jquery-ui-1.8.12.custom.css" type="text/css" />
<link href="../../Scripts/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<link href="../../Content/Css/Site.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<script type="text/javascript">
"use strict";
var BASE_URL = '<%= ResolveUrl("~/") %>';
</script>
<script src="<%= Url.Content("~/Scripts/jquery/jquery-1.7.1.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-ui-git.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/i18n/jquery.ui.datepicker-et.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.contextmenu-fixed2.js")%>" type="text/javascript"></script>
<% if (CurUser.GetLanguage() == "EST")
{ %>
<script src="<%= Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-et.js")%>" type="text/javascript"></script>
<% }
else
{ %>
<script src="<%= Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-en.js")%>" type="text/javascript"></script>
<% } %>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jqgrid/jquery.jqGrid.src-multiselect1-deleteandsortpatches.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jqgrid/jQuery.jqGrid.dynamicLink.js")%>"></script>
<script src="<%= Url.Content("~/Scripts/json2.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.form.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/TinyMCE/tiny_mce_src.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/TinyMCE/jquery.tinymce.js")%>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/myscripts.js")%>" type="text/javascript"></script>
<script type="text/javascript">
var
$grid;
$(function() {
"use strict";
<% if (TempData["Message"]!=null) {
setTimeout( function() {
showMessage ( '<%= TempData["Message"] as string %>');
...
Update
I tried Oleg suggestion in answer but got error jQuery is not defined as shown in image below. How to fix this ?
IE console does not show any error.
I want suggest you to make one experiment using the Closure Compiler.
First of all you can try to concatenate all the JavaScript and all inline JavaScript code which you use on the page. You should hold the order of files of cause. It seems to me you will have two version of the results: one with CurUser.GetLanguage() === "EST" and another with CurUser.GetLanguage() !== "EST".
After you will have one JavaScript file you can use the Closure Compiler with a compilation_level of ADVANCED_OPTIMIZATIONS (see here) which can remove all unused JavaScript code. As the result you will get subset of jQuery, jQuery UI and other libraries which you really use on the page. The resulting JavaScript code will be other as on another pages, but it could be very small and could be better optimized as any separate files.
I recommend use head.js.
It really helps you to decrease page load time with using separate .js files. You just include one file with something like that:
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
// all done
});
http://combres.codeplex.com/ allows you to keep separate javascript files and to combine and minify at runtime.
Works a real treat.
Looks like they've rolled something similar into asp.net 4.5:
http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
To overcome these type of situation you have many techniques. Some of are :
Page Specific JS : Try to add javascript files according to the requirement. Do not add any unnecessary JS which are not used in page.
GZIP Compression : Apply GZIP compression on pages and static js and css files.
Caching : At the server level (IIS) you caching can be applied on these static files like JS or CSS
http://sixrevisions.com/web-development/decrease-webpage-load-times/
Combine multiple JavaScript files into one JS file
Good Luck !!
Bundling Files Together
Most of the current major browsers limit the number of simultaneous connections per each hostname to six. That means that while six requests are being processed, additional requests for assets on a host will be queued by the browser
Bundling can significantly improve your first page hit download time.
Bundling reduces the number of individual HTTP requests to server by combining multiple CSS files and Javascript files into single CSS file and javascript file.
This site here has a good tutorial on how to add bundling to your application in five easy steps: http://websitespeedoptimizations.com/Bundling.aspx
I have made this example and it works fine on a plain aspx webpage. I use Visual Studio 2010.
Head-part:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#CheckBoxShowHide').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
When I have a masterpage and the same code on the child webpage JQuery dosent work. The loading of the JQuery javascript file fails. The child page and the masterpage are in the same folder. If I put the code on the masterpage it works fine but I want JQuery on the child page too. Please help me.
I can see another problem as well, you are trying to grab the checkbox ID based on its server ID not ClientID. Once a asp control has been rendered onto the client its ID gets changed. Try the following code:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
The following line is the only thing I changed:
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
Hope it helps.
Are you sure your page is loading jQuery, use a absolute URL in your master page to reference the jQuery library.
If jQuery is on your masterpage, it will work on your child page.
Master <head>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
Child <head>
<head>
<script type="text/javascript">
$(document).ready(function () {
//Do Child jQuery Stuff here....
});
</script>
<head>
If you are having issues the only other thing to check is to make sure that your path to the jquery file is right. (ie Maybe it should be ../js/jquery.js)
Use this to make sure that isn't the issue if the other thing I suggested doesn't work:
For your Master Page <head>:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
Or (if you want to host it)
<head>
<script type="text/javascript" src='<%=ResolveURL("~/js/jquery.js")%>'></script>
</head>
Where ~/ is your root.
You should be able to just place the link to the JQuery library in the HEAD section of the master page. When the page is ran it will generate the HTML content for the master page with the link in the HEAD section, the content page should be able to then make user of the JQuery library. I know we had an issue with how the link was being done. Maybe try linking in the HEAD of the master page like this instead:
<script type="text/javascript" src='<% = ResolveURL("~/js/jquery.js") %>' ></script>
The '<% %>' is a way to do inline server side code as the page loads, so the page will inject the correct src given the location of the URL.