I just can't figure out why this is not working. Been stuck on this for a while now. All help is appreciated, thanks in advance.
Here is my aspx page:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript" src="Scripts/ui-bootstrap-tpls-0.11.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="//cdn.ckeditor.com/4.4.5.1/standard/ckeditor.js"></script>
<script type="text/javascript" src="Scripts/ng-ckeditor.min.js"></script>
<script type="text/javascript" src="Scripts/Summaries.js"></script>
<link rel="stylesheet" href="Styles/ng-ckeditor.css">
<link rel="stylesheet" href="Styles/Summaries.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="ui-widget-content" id="try" style="width: 100px; height: 100px; background-color: #f00;"></div>
javascript:
$(document).ready(
function () {
$("#try").resizable({
maxHeight: 1200
});
}
)
jQuery UI depends on jQuery. Judging off your code, you're only including jQuery UI.
Add
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
to your scripts.
Check your console as it stands, you should see jQuery is not defined.
Related
<script type="text/javascript">
$(document).ready(function() {
$('#LkForgot').on('click', function (e) {
alert("The paragraph was clicked.");
});
});
</script>
The above code doesn't work. When I click on #LkForgot within ContentPlaceHolder, it doesn't alert
This is the my masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<head id="Head1" runat="server">
<title>viber bulk sender</title>
<script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script/jquery-ui.min.js"></script>
<script type="text/javascript" src="script/autosize.min.js"></script>
<script type="text/javascript" src="script/script.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="CSS/custombox.min.css">
<script src="script/custombox.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="font-family: Tahoma; font-size: 12px;">
<form id="form1" runat="server">
<div class="main register relative" style="min-height: 100%; margin: 0; text-align: center;">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
This is the script within the Content control:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="stylesheet" href="CSS/custombox.min.css">
<script src="script/custombox.min.js"></script>
<script type="text/javascript" src="script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script/jquery-ui.min.js"></script>
<script type="text/javascript" src="script/autosize.min.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">
$(document).ready(function() {
$('#LkForgot').on('click', function (e) {
Custombox.open({
target: '#ddd',
effect: 'fadein'
});
e.preventDefault();
});
});
</script>
<asp:LinkButton ID="LkForgot" runat="server">Forgot Password</asp:LinkButton>
<div id="ddd">
adsfasdfasd
</div>
</asp:Content>
any help would be appreciated.
Thanks
Register your control event like:
$('[id$=LkForgot]').on('click', function (e) {
Custombox.open({
target: '#ddd',
effect: 'fadein'
});
e.preventDefault();
});
Or
use ClientIDMode as static in linkbutton.
Try modify the source path like this
<script type="text/javascript" src='<%= ResolveUrl("~/script/jquery-1.11.1.min.js")%>' ></script>
When you put something inside ContentPlaceHolder, its id will be changed when rendered to client's browser.
So you have to use .class for this because you are using div.
If there are any server controls, you can use following code to get clientside id.
$("#<%=ServerControl1.ClientID%>").click(function(){
//CODE
});
Add jquery file like this
<script type="text/javascript" src='<%= ResolveUrl("~/script/jquery-1.11.1.min.js")%>' ></script>
then
<script>
$(document).ready(function () {
$("#<%=LkForgot.ClientID%>").click(function(){
//CODE
});
});
</script>
try this
$("#<%=LkForgot.ClientID%>").click(function(){
//CODE
});
OR
$(document).ready(function () {
$("#<%=LkForgot.ClientID%>").click(function(){
//CODE
});
});
You call the function with the class name. because the ids are changes when page created. OR you can inspect the page html and get the right id of the element. or
I have tried to add the fullCalendar jquery to a view in my MVC 4 project. When I try to laod the page there are no errors but the calendar does not appear on the page. I am not sure why it isn't appearing and I have looked at the documentation and it looks like I got everything covered.
Here is my HTML:
#{
ViewBag.Title = "Calendar";
}
<h2>Calendar</h2>
<html>
<head>
<title>Calendar</title>
<link href="#Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/fullcalendar.print.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("/Scripts/moment.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery-ui.custom.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/fullcalendar.min.js")"></script>
<script type="text/javascript">
$("#calendar").fullCalendar({
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
HERE IS MY CSS:
#calendar {
width: 900px;
margin: 40px auto;
}
Add refs to the libs you want to use;
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script type='text/javascript'>
I am trying to use Speak.js to let my webpage read strings, it doesnt seem to be working eventhough i am using the same codes in the tutorial. and there is no compiling errors, this is the code:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/speakGenerator.js" type="text/javascript"></script>
<script src="Scripts/speakClient.js" type="text/javascript"></script>
<script type="text/javascript">
function Play() {
speak("oooooooooooooooooooooooo");
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<input type="button" value="play" onclick="Play()" />
</asp:Content>
this code in a html file works perfectly, but when i use it in asp.net as shown above, it doesnt work.
<html>
<head>
<title>jQuery plugin for Text to Speech - demo</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="speakGenerator.js"></script>
<script src="speakClient.js"></script>
</head>
<body>
<div id="container">
<button id="button" onclick="speak('I know I know I know')">Talk</button>
<div id="audio"></div>
</div>
</body>
</html>
Seem to be having some issues with the JQRangeSlider. Trying to implement this tool into an MVC project. After the slider is called the alert is never reached. Is there a bug? I have this working in another project in Dreamweaver, though it renders fine in the live preview mode it does not work bringing it to any browser. Here's my code...
ViewBag.Title = "Test";
Layout = "";
}
<html>
<head>
<title>"Slider"</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery- ui.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/slider/CSS/classic.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")" type="text/javascript"></script>
<script src="../../Content/slider/Scripts/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderMouseTouch.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderDraggable.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderBar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQDateRangeSliderHandle.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderLabel.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQEditRangeSliderLabel.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSlider.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQEditRangeSlider.js")" type="text/javascript"></script>
</head>
<body>
<div class="page-header">
<h2>Test</h2>
</div>
<div id="slider" style="width:200px;"></div>
<input type="text" class="datepicker" />
<script type="text/javascript">
$(function () {
$("#slider").editRangeSlider();
alert("whocareswhateverbye");
});
</script>
</body>
</html>
I think your code is failing at
$("#slider").editRangeSlider();
due to a compatibility issue with jQuery 1.7, so it's never reaching the alert.
It's working fine with jQuery 1.8 as demonstrated here:
http://jsfiddle.net/QwAqy/1/
In the code below, the color box is working and the image showing. When I tried to integrate Jcrop with it, it doesn't.
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
</script>
<script src="../colorbox/colorbox/jquery.colorbox.js" type="text/javascript">
</script>
<script src="../jcrop/js/jquery.Jcrop.js" type="text/javascript">
</script>
<link href="../jcrop/css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<link href="../colorbox/example1/colorbox.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function () {
$(".example1").colorbox();
$(document).bind('cbox_complete', function(){
$('#colorbox .example1').Jcrop();
});
});
</script>
</head>
<body>
<p>
<a href="../jcrop/demos/demo_files/flowers.jpg" class="example1">
crop
</a>
</p>
</body>
Remove the script files to the master / parent page, and this should now work..