I am trying to hide and show text boxes using jquery. But when I select the ajax library from c# solution explorer script folder, I am not getting expected output but when I use the CDN library it works. How to set this library to get expected output?
<%# Page Language="C#" AutoEventWireup="true" CodeFile="~/Default.aspx.cs"
Inherits="WebApplication1._Default" %>
<!DOCTYPE html>
<html>
<head>
<%--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>--%>//it works fine
<script src="Scripts/jquery-1.4.1-vsdoc.js"></script>//not works
<script src="Scripts/jquery-1.4.1.js"></script>//not works
<script src="Scripts/jquery-1.4.1.min.js"></script>//not works
<script>
$(function () {
$('input[name="type"]').on('click', function () {
var name, comp;
if ($(this).val() == 'Experienced') {
$('#txtname').show();
$('#txtcomp').show();
$('#Label1').show();
$('#Label2').show();
}
else {
$('#txtname').hide();
$('#txtcomp').hide();
$('#Label1').hide();
$('#Label2').hide();
}
});
});
</script>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
width: 132px;
}
</style>
</head>
Myself found answer for my question.If in future anybody face this type of error they can use this method.what I do to solve this issue I downloaded Microsoft jquery libraries. Here are the links
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7-vsdoc.js
now add 3 new jquery items into your solution explore and named as jquery-1.7.js,jquery-1.7.min.js and jquery-1.7-vsdoc.js.Now Open above links in a new tab and copy whole content and save according to the jquery folder name.after that add this libraries into your project
<head>
<script src="jquery-1.7-vsdoc.js"></script>
<script src="jquery-1.7.js"</script>
<script src="jquery-1.7.min.js"></script>
</head>
Thank you. All the best :)
Related
I try to lazy load an AngularJs module with ocLazyLoad. It all works fine until I add a css file, then the AngularJs application does not work. Here the code that works for any browsers and also CEF but not for Awesomium:
(you can easily test with the Awesomium Tabbed Browser Example)
index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.js"></script>
<script src="ocLazyLoad.js"></script>
</head>
<body>
<div id="example" ng-app="LazyLoadTest" ng-controller="TestController">
</div>
<script>
angular.module("LazyLoadTest", [ "oc.lazyLoad"])
.controller("TestController", function($scope, $ocLazyLoad, $compile){
$ocLazyLoad.load({
name: "testApp",
files: ["testApp.js", "testApp.css"],
serie: true
}).then(function () {
var el, elToAppend;
elToAppend = $compile('<say-hello to="world"></say-hello>')( $scope );
el = angular.element('#example');
el.append(elToAppend);
}, function (e) {
console.log(e);
})
});
</script>
</body>
</html>
testApp.js:
(function () {
'use strict';
angular.module("testApp", []).directive("sayHello", function () {
return {
scope: {
to: '#to'
},
restrict: "E",
template: '<p>Hello {{to}}</>'
};
});
})();
testApp.css:
body{color: red;}
Is this a problem of Awesomium or ocLazyLoad? Is there a work-around?
EDIT:
Very interesstingly if you test with the WPF example the CSS is not applied at all, in the WinForms example it is. But for both the AngularJs directive does not work.
The problem is most certenly with awesomium. It's using the chromium version 18, and a current version is 40. I am having the same problem with it too. I've tried CEF, but the problem with cef is that i get poor performance with it. Next i tried with GeckoFx, but any version from bitbucket that i tried just plain didn't compile...
I have a masterpage and a JS file, I added a link to the javascript file in the master page but on any page that uses the master page the JS isnt working.
I have tried the code on its own in a separate page and it works.
<head runat="server">
<title></title>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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.3/jquery-ui.js"></script>
<script src="../Scripts/Menu.js"></script>
<script type="text/javascript">
function openNewWin(url) {
var x = window.open(url, 'mynewwin', 'toolbar=no,directories=no,location=no,menubar=no,left=0,top=0,resizable=no,status=no');
x.focus();
}
</script>
</head>
Menu.JS:
$(function () {
//When opening the page all level 2 and level 3 items must be hidden.
$(function () {
hideitems();
})
function hideitems() {
$('h10').hide();
$('h11').hide();
$('h12').hide();
$('h13').hide();
}
//Financial Click
$('h7').click(function () {
hideitems();
$('h10').slideToggle();
$('h11').slideToggle();
$('h12').slideToggle();
});
//Container Click
$('h8').click(function () {
hideitems();;
$('h13').slideToggle();
});
})
I think it's file path issue.Can you follow the steps given here
ASP.Net Master Page and File path issues
Is a path issue as said before.
Are you sure the folder is Scripts and not scripts?
open the inspector and get the link is refering, also probably you will get an error in the console
I'm trying to do something like this:
<script src="<%= ResolveUrl( Urls.jquery) %>" type="text/javascript" ></script>
For importing jquery. The path is of the form
http://domain.com/js/jquery-1.3.2.min.js
In my developer tools console, the path is loaded perfectly, but when I try and run jquery it won't work. I'm kind of puzzled.
Thanks!
EDIT:
code i'm using to test it:
<script type="text/javascript" >
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
I also have another external .js file that says '$' is undefined in the developers console for chrome.
EDIT2:
It appears that this code actually works on Mozilla Firefox, but it does not work on Chrome or IE.
The code below seems to be working for me. Maybe try it out?
Here's what I have for the server side code:
public partial class index : System.Web.UI.Page
{
public static string jQuery = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js";
protected void Page_Load(object sender, EventArgs e)
{
}
}
And for the aspx page
<!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 runat="server">
<title></title>
<script src="<%= ResolveUrl( jQuery ) %>" type="text/javascript" ></script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
<script type="text/javascript">
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
</html>
Ok guys, after basically giving up, i encountered the error today. I did not realize that one of my pages had a secure connection and one did not.
For instance
http://domain.net/page
would load jquery just fine, however the secure version, using https
https://domain.net/page
would not load jquery.
I am unsure of why this happens, but this is the problem. I'm going to mark this as the answer, but if any one else can provide insight on why this happens it would be great.
EDIT:
in my Urls file I had to add https:// to the front of the element, instead of http://, so everything works great now. Hopefully some one will see this later and resolve their problem.
I am very new to JQuery. I want to implement Stack Overflow style notification on top of my page. So for that matter, I downloaded a JQuery plugin from NOTY
. I have read the tutorial but it doesn't explain how to implement this properly. All I want is to display the top notification on a button click. I have imported all the .js files as mentioned in the tutorial but can't figure out how to show the bar whenever i click a button.
Not just the NOTY plug in mentioned earlier, i don't know how to use .js files on button click for any plugin available on the net.
Can somebody please help?
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="../Scripts/jquery-1.9.0.js" type="text/javascript"></script>
<script src="../Scripts/jquery.noty.js" type="text/javascript"></script>
<script src="../Scripts/top.js" type="text/javascript"></script>
</asp:Content>
Now what to write in the button click event?
protected void Button1_Click(object sender, EventArgs e)
{
}
You need to refer this documentation for the noty usage
on the button click write this code
var noty = noty({text: 'noty - a jquery notification library!'});
I wrote some example here:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="jquery.noty.js"></script>
<script type="text/javascript" src="top.js"></script>
<script type="text/javascript" src="default.js"></script>
<script>
function myNoty()
{
var n = noty({
text: 'hello',
type: 'success',
dismissQueue: true,
layout: 'top',
theme: 'defaultTheme'
})
}
</script>
</head>
<body>
<input type="button" onclick="myNoty();" value="Click!"/>
</body>
</html>
change the options for your needs.
I want to highlight my elements and add a link with jquery.
My Code:
#model IEnumerable<Mvc3Demo.Products>
#{
ViewBag.Title = "List";
}
<h2>List</h2>
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js" />
<script type="text/javascript">
$(document).ready(function () {
$('#productList li').hover(
function () {
$(this).css({ 'background': 'green', 'cursor': 'pointer' });
},
function () {
$(this).css('background', '');
}
).click(function () {
window.location = 'Product/Edit/' + $(this).attr('productid');
});
});
</script>
<ul id="productList">
#foreach (Mvc3Demo.Products p in Model)
{
<li productid="#p.ProductsID">
#p.Name
<!--#Html.ActionLink("Bearbeiten", "Edit", "Product", p, null)-->
</li>
}
</ul>
Layout page:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body>
#RenderBody()
</body>
</html>
The JQuery will be found so that couldn't be the error ( i proofed it with firebug)
Error:
No Error occurs in Firebug and no highlighting and no link
Please help
I've put the HTML which would be output from your example above into a fiddle. As you can see, it appears to work correctly.
Is the URL in your reference to jQuery correct?
Don't you have something in your Layout page that broke the jQuery functionality?
Try to unbind your page from the Layout and test it indipendently.
Or post your Layout page to let us see what could be wrong with it...
Edited after seeing the Layout page:
There's the error. you already have the jquery reference in the layout page. This cause the error. Simply delete the reference from you page leaving the one in the layout) and everything is going to work.
I created a littel project to test it.
PS: I still don't understand why 2 references to the same javascritp file cause the error :/
try to type
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
instead of
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js" />