I'm working in a ASP.NET MVC 3 application, and I'm trying to use jQuery's Sortable. I already have a jQuery DatePicker working. In my View I have the following code:
<link href=#Url.Content("~/Content/jquery_css/jquery.ui.all.css") rel="stylesheet" type="text/css" />
<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>
<script src=#Url.Content("~/Scripts/jquery.ui.widget.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.mouse.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.sortable.js") type="text/javascript"></script>
Here is the initializer code:
<script type="text/javascript">
$(document).ready(function () {
$("#DateBegin").datepicker({ dateFormat: "dd/mm/yy" }).val();
$("#DateEnd").datepicker({ dateFormat: "dd/mm/yy" }).val();
$("#MenuPages").sortable("enable");
});
</script>
The DatePicker work seamlessly. Here is the code:
<fieldset>
<legend>Search history</legend>
<p>
Begin: <br />
<input type="text" id="DateBegin" name="DateBegin" value="" />
<br />
End: <br />
<input type="text" id="DataEnd" name="DataEnd" value=""/>
<br />
</p>
<button>Search</button>
</fieldset>
But the Sortable does not work. The code:
<ul name="MenuPages" id="MenuPages">
<li id="page_1">Home</li>
<li id="page_2">Blog</li>
<li id="page_3">About</li>
<li id="page_4">Contact</li>
</ul>
I downloaded the DatePicker about a month ago, and downloaded the Sortable now. I put the jquery.ui.mouse.js, jquery.ui.widget.js and jquery.ui.sortable.js in the session. I also replaced jquery.ui.core.js.
I don't know if it was necessary, I also copied jquery-ui-1.8.19.custom.js to the session (there's also jquery-ui-1.8.11.js and jquery-ui-1.8.11.min.js there).
Don't know where the source of the error could be.
Instead of
$("#MenuPages").sortable("enable");
try
$("#MenuPages").sortable();
to initialize the sortable.
Related
It basically works (slider shows up) when I run this file directly. But when i run index.html and call it by angular ui route, the slider doesnt show up anymore. it also works when using href tag to link to this file. Please help, i have been fixing this all day.
Ps. if i have to show more codes ( eg., controller or service ), you can tell me.
Thanks
<link rel="stylesheet" href="css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.ui.slider.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.slider.js"></script>
<script type="text/javascript">
$(function() {
$('#slider1').slider({
value:12,
min: 10,
max: 20,
step: 1,
slide: function( event, ui ) {
$('#font_size').val(ui.value + ' px');
$('.box').css('font-size', ui.value);
}
});
});
</script>
<div class="examples">
<h2>Text animation with jQuery and UI slider</h2>
<div class="column">
<p>
<label for="font_size">Font size:</label>
<input type="text" id="font_size" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider1"></div>
</div>
<div class="box">A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>
<div style="clear:both"></div>
</div>
I wanted to use the date time picker like following
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false
});
});
</script>
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
But the problem is that the I got error in JS undefiend is not a function
Im using bootstrap3 in MVC5 application what can be the issue here ?
I try to add the following librarys which doesnt help...
<script src="//code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
<script type="text/javascript" src="https://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="https://eonasdan.github.io/bootstrap-datetimepicker/scripts/moment.js"></script>
<script type="text/javascript" src="https://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap-datetimepicker.js"></script>
Please call jQUery top off the all script
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Have you tried putting your Datepicker instantiate script below HTML code?
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false
});
});
</script>
Add jquery
<script src="~/Scripts/jquery.ui.datepicker-de.js"></script>
In my case, there was problem with jquery-s involved, i need jquery for my layout, and i was importing that part after
#RenderBody()
I fixed this by creating in BundleConfig script only for jquery and imported that script before RenderBody() part, of course in my Layout part.
bundles.Add(new ScriptBundle("~/bundles/jquerym").Include(
"~/Scripts/libs/jquery-{version}.js"));
After this, i didnt have problem that jquery is not ready, and i didnt have to import that part on page where i show datetimepicker. This is different datetimepicker from yours but it's basically same:
<script type="text/javascript" src="/Scripts/moment.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css" />
<script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
this is the link http://carboncreditcapital.com/calculator/
I don't understand why the page returns the json when the page loads.
It suppose to autocomplete when user types in the input field to return related airport names
I don't know which files i should edit to make jquery work properly in wordpress
<?php
?>
<meta charset="utf-8">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<div>
From
<div class="textinput">
<input type="text" id="dept" name="departure" placeholder="City name or aiport code" style="width: 120px">
</div>
</div>
<div>
To
<div>
<input type="text" id="dest" placeholder="City name or airport code" style="width: 120px">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="myScript.js"></script>
JQUERY:
jQuery(document).ready(function(){
jQuery('#dept').autocomplete({
source:'source.php',
minLength:1,
});
jQuery('#dest').autocomplete({
source:'source.php',
minLength:1,
});
});
In wordpress you need to use a different version of jquery function
to kickstart the DOC load option
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#dept').autocomplete({
source:'source.php',
minLength:1
});
});
</script>
I'm using asp.net web forms. I have DynamicDataField with some jquery.mobile widjets:
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" />
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
<script>
function go() {
////some code
};
</script>
</head>
<div>
<div data-role="rangeslider" class="searchBlock">
<label for="range-1a">Комнат:</label>
<input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" class="seearchSlider" />
<label for="range-1b">Rangeslider:</label>
<input name="range-1b" id="range-1b" min="0" max="50" value="100" type="range" class="seearchSlider" />
</div>
///etc, several same divs
this DynamicDataField(Search.ascx) I place on my Main.Master padge:
<%# Register Src="~/DynamicData/FieldTemplates/Search.ascx" TagPrefix="search" TagName="search" %>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<link href="/Content/MainStyle.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</head>
<body>
<div id="left">
<div style="background: #fff">
<search:search id="menu2" runat="server"/>
</div>
</div>
</body>
The problem is: after adding
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
all my project starts behave strange. All fonts etc are like as in jquery.mobile widjet, some javascript methods don't work. So. How can I isolate jquery.mobile-1.3.2.min.js? I want it to be used ONLY in Search.ascx.
Any suggestions? sry, i'm new in jquery:)
By default, jQuery Mobile enhances everything on the page. You can use data-enhance="false on the page body, and just use data-enhance="true" on the control that you want to enhance.
See the docs for more info.
In this case, you need to tell JQM not to to auto-initialize pages. You should do that once mobileinit fires to apply global changes, after loading jQuery and before loading jQuery mobile JS libraries.
Nevertheless, bu doing so, you will need to manually enhance JQM elements (widgets).
<head>
<!-- jQuery.js here -->
<script>
$(document).on("mobileinit", function () {
$.mobile.autoInitializePage = false;
});
</script>
<!-- jQuery Mobile.js here -->
</head>
I cant get jquery's date picker to work on my page. I have a forum post on codecall if anyone wants more details. Here's a link http://forum.codecall.net/topic/70462-copy-and-paste-date-picker-javascipt/. Here's my code that is associated with this page. When I click the text fields the datepicker doesn't show up. Why? Can anyone see the problem?
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});
<div id="dateField">
<p>
Start Date: <input type="TEXT"
name="start_date" id="startDate"
value="" />
</p>
<p>
End Date: <input type="TEXT"
name="end_date" id="endDate"
value="" />
</p>
<small>Dates Should be in the format DD/MM/YYYY</small>
</p>
</div>
Switch your Id and name tags around. An ID attribute has to be inside of the $('ID').datepicker() , not name.
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});
</script>
<div id="dateField">
<p>
Start Date: <input type="TEXT"
id="start_date" name="startDate"
value="" />
</p>
<p>
End Date: <input type="TEXT"
id="end_date" name="endDate"
value="" />
</p>
<small>Dates Should be in the format DD/MM/YYYY</small>
</p>
</div>
Wrap your jQuery UI datepicker code in a <script> tag, and mark it as javascript with the type attribute. Use a single document ready block for your two datepicker calls. Ensure you're using the correct IDs of your elements.
<script type="text/javascript">
$(document).ready(function() {
$("#startDate").datepicker();
$("#endDate").datepicker();
});
</script>