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>
Related
I am trying to create a C# Web Application and moved my html code to the .aspx file. I have imported highcharts in and added Angular JS scripts. Everything seems to be working except the highchart. It seems to work fine on the .html file when I test it but is it not working on the .aspx file.
Block error:
Uncaught TypeError: angular.module(...).component is not a function
at highcharts-ng.js:28
at highcharts-ng.js:227
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title></title>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="js/popper.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="js/highcharts-ng.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/app.js"></script>
</head>
Above is the order of scripts I have added in. Everything looks to be working except my highchart.
<div class="tab-pane active" id="chart" >
<div class="row">
<highchart id="chart1" config="chartConfig" class="span9"></highchart>
</div>
</div>
I am getting a warning: 'Validation (HTML5): Element 'highchart' is not supported'
Angular JS (app.js) snippet:
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope, $http ) {}
I seem to have migrated everything over to the new application but for some reason my chart is not showing the way it is on the .html file
One thing to note Angular JS is working because i have the following code on my web form and this is working and showing me the chart config. Its just not displaying the chart:
<div class="row-fluid" >
<pre data-ng-show="!prettyJSON">
{{ chartConfig }}
</pre>
</div>
debugged highcharts-ng-js and its erroring:
angular.module('highcharts-ng', [])
.component('highchart', { ///ERROR HERE
bindings: {
config: '=',
changeDetection: '<',
disableChangeDetection: '<'
},
controller: H
saying highchart is not a function
Example code for debugging: https://github.com/brpyne/AngularHighcharts I have html file similar to this github and I am trying to move it over to A C# Web Form Application! I have moved my html code into an aspx file. The same happens issue happens on my side - it doesnt recognise the highchart tag!
The code itself is working correctly, everything is caused by incorrect imports. I have noticed that you are trying to import files that don't exist in the Scripts folder (for example Angular). But that is not the only problem, there is something wrong with the Highcharts v.2.2.5 its a really old release (the current version is 8.2.0) so I would suggest to try the newer version.
I was able to successfully run your project after updating the imports and the Highcharts version.
<head>
<title>Angular Highcharts</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="Scripts/highcharts/highcharts.src.js"></script>
<script src="Scripts/angular-highcharts.js"></script>
</head>
Live demo:
https://jsfiddle.net/BlackLabel/ew0p568u/
am currently looking to implement the mobile menu system mmenu (http://mmenu.frebsite.nl/) into our Asp.Net site.
Works great on an HTML page and also in the Master page, so long as it's outside the form tag. When I put it within the form tag it no longer works.
Here is the HTML for the menu:
<nav id="menu">
<ul>
<li>The page</li>
<li>The mainmenu</li>
<li>Submenus</li>
<li>Labels</li>
<li>Counters</li
<li>Selected item</li>
<li>Open the menu</li>
<li>Close the menu</li>
</ul>
</nav>
This runs it fine:
<script type="text/javascript">
$(function () {
$('nav#menu').mmenu({
zposition: "next",
position: "top"
});
});
</script>
But then if I put it within the form tag (form id="MainForm" runat="server") I get a jquery error. Needs to be within as some menu items will come from the database.
Cheers
Simon
Mmenu does two things when it is initialized. First, it wraps the innerHTML of the <body> with a <div class="mmenu-page"> container, and then it cuts out the <nav> for the menus and moves those between the <body> and new page container in the DOM.
For whatever reason, it treats the ASP.Net wrapping <form> tag like the <body> tag, but only if it appears as the first child of the <body>. When this is the case, it inserts it's wrapping <div> immediately following the closing <form> tag.
If you wrap your ASP.Net <form> tag with an empty <div>, mmenu will be able to target it's <div class="mmenu-page"> correctly and everything magically works.
You'll want your code aspx page to look like this:
<body>
<div>
<form id="form1" runat="server">
...
<nav> ...mobile menu... </nav>
</form>
</div>
<body>
The empty div wrapping body didn't work for me. I found a post on GitHub that worked great:
$('#search-copy').mmenu({
// options
}, {
// config
offCanvas: {
menuWrapperSelector: "#aspnetForm",
pageNodetype: "form",
pageSelector: "body > form"
}
});
Here's the original post:
https://github.com/FrDH/jQuery.mmenu/issues/426
You may need to play around with your selectors. I ended up using an ID for pageSelector and a generic selector for menuWrapperSelector.
With mmenu, I found that there were a lot of hidden configuration and options settings. Some were in the mmenu docs, some were in the OffCanvas docs. Seems like the configuration/options settings will do just about anything you want without having to write a lot of custom CSS.
I am trying to write an MVC.NET web-site and I want to use the datepicker component from jQuery. To use jQuery I am using the following code on my Layout page:
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/jquery.ui.all.css")" type="text/css" />
<link href="#Url.Content("~/Content/jquery.ui.datepicker.css")" type="text/css" />
</head>
On the page where I want to use datepicker I use the following code:
<script type="text/javascript">
$(document).ready(function () {
$("#FromDate").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
...
<div class="editor-field-search">
<label for="fromDate">From date:</label>
<input type="text" id="FromDate" name="FromDate" value=""/>
</div>
But datepicker is displayed in a weird way:
I've Googled and tried to fixed, but have not find a way to fix my problem. What am I doing wrong?
It's a pure CSS reference problem. You don't have the CSS referenced correctly. Run my sample Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC and use the F12 tools and compare with your code to figure out why your CSS is not being used. – Rick.Anderson-at-Microsoft.com
comment out my CSS reference and you get the same malformed calendar. The F12 tools are great for figuring this out.
if you are copy paste your source code here I think you are missing a ">"
<label for="fromDate">From date:</label**>**
<input type="text" id="FromDate" name="FromDate" value=""/>
Does it work if you close the label tag?
<label for="fromDate">From date:</label>
^
I'm assuming you have downloaded a theme from jQuery's ThemeRoller...could try a couple things:
Use the jQuery and jQuery UI Javascript versions included in the download to
make sure it is compatible (in js directory of download). Looks
like jQuery 1.7.1 is the latest version included in jQuery UI
download and you have jQuery 1.7.2 on your page.
Try the jQuery UI css file in the css\custom-theme directory - it includes all the css needed for all the jQuery components. Also
check to make sure the images were copied next to the jQuery css
file in your application like it is in the custom-theme directory.
jQuery Getting Started Guide
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.
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>