Can any one suggest autocomplete is not working after textbox disable and then enable
I have one textbox which i type any character and then it populate table below of text box
like this
and after i select any value from that it will populate in textbox and after textbox will disabled and focus goes on second textbox on second textbox i have implemented jquery keyup event when i click upkey on second textbox it will redirect to first textbox with enabled which is autocomplete textbox and when i enter one character on textbox autocomplete function is not work, and when i enter second character it is working and populate table.
what the issue on autocomplete?
First of all, you need to provide your basic codes which you are using for enabling and disable the autocomplete. You can check below how to enable and disable.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
$("#disable").click ( function() {
$( "#tags" ).autocomplete({
disabled: true
});
});
$("#enable").click ( function() {
$( "#tags" ).autocomplete({
disabled: false
});
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div> <br>
<button id="disable">disable</button>
<button id="enable" >enable</button>
</body>
</html>
Related
I have a Razor view Html.DisplayFor where I am displaying some text. Now I want to truncate the text using jquery. I am using the jquery code from this Jquery Truncate.
In my csHtml, I have something like follows, the BlogContent is some string that I am Binding. Of course I think I can do SubString etc in C# on the BlogContent to truncate. But I want to do it using jquery. I have tried the below code but no luck. Please help.
#{
Layout = null;
}
<div class="blog-post-body">
<p class="p-bottom-20">#Html.DisplayFor(modelItem => item.BlogContent)</p>
</div>
#section scripts
{
<script src="~/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="~/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('ul.pagination > li.disabled > a').addClass('page-link');
truncateText(".p-bottom-20", 100);
});
function truncateText(selector, maxLength) {
$(selector).text((i, txt) => txt.length > maxLength ? txt.substr(0, maxLength) + "..." : txt);
};
</script>
}
I don't see any errors on the Browser Console related to this.
If you are using Layout = null; then #section Scripts doesn't work because the section is defined in _Layout.cshtml. You have to add a full html document in your view.
#{
Layout = null;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
</head>
<body>
<div class="blog-post-body">
<p class="p-bottom-20">#Html.DisplayFor(modelItem => item.BlogContent)</p>
</div>
<script src="~/js/jquery.min.js"></script>
<script src="~/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('ul.pagination > li.disabled > a').addClass('page-link');
truncateText(".p-bottom-20", 100);
});
function truncateText(selector, maxLength) {
$(selector).text((i, txt) => txt.length > maxLength ? txt.substr(0, maxLength) + "..." : txt);
}
</script>
</body>
</html>
I want to use the timepicker in my asp.net project , I try to do the same thing in this link : https://timepicker.co
I download 2 files JS and CSS ,
but some like this , where can i put it ?
$(document).ready(function(){
$('input.timepicker').timepicker({});});
and I would like to use some like this :
$('.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 60,
minTime: '10',
maxTime: '6:00pm',
defaultTime: '11',
startTime: '10:00',
dynamic: false,
dropdown: true,
scrollbar: true });
but i dont have any idea of where can i put it.
this is my HTML code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="Users/Myfile/Downloads/timepicker-1.3.5.zip/timepicker-1.3.5/jquery.timepicker.css">
<script src="Users/Myfile/Downloads/timepicker-1.3.5.zip/timepicker-1.3.5/jquery.timepicker.js"></script>
<script>
$(document).ready(function () {
$('input.timepicker').timepicker({});
});
</script>
<input type="text" class="timepicker" value=""/>
</head>
<body>
add jquery link in your code it will be work's
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(document).ready(function(){
$('input.timepicker').timepicker({});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<input type="text" class="timepicker" value=""/>
I have one page called Page1 which have a button.
<button onclick="redirecttodivofotherpage(); "></button>
The other Page2 have 3 Div
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
I want to redirect to div3 on button click of Page1 button.
How to do it with controller or jquery.
You could try something like this:
<button class="js-btn"></button>
$(function(){
$(".js-btn").on("click",function(){
window.location = "..../#div3";
});
})
The string "..../#div3" represent the relative url of your page and at the end has a #div3. This way, using window.location, you would be redirected to the page you want and using #div3 to the section you want.
This can be done with cookies. Setting a cookie with id you want to scroll, and then, when the new page is loaded, read the cookie and scroll to defined id. I used the very popular plugin jquery-cookie.
Check this sample solution Note: Click on Events to nav to the other page.
**http://plnkr.co/edit/hBJj69nP6kvrEuoCVw3k?p=preview**
try this working demo, that will work
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button class="click">Click Me</button>
<div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;">
hello anuradh
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".click").on('click',function(){
window.location = "#mydiv";
});
});
</script>
</body>
</html>
or else you can scroll it nicely like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button class="click">Click Me</button>
<div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;">
hello anuradh
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".click").on('click',function(){
//window.location = "#mydiv";
$('html, body').animate({
scrollTop: $("#mydiv").offset().top
}, 2000);
});
});
</script>
</body>
</html>
Use a window.location.hash to scroll to the element with the id
<button class="js-btn"></button>
$(function(){
$(".js-btn").on("click",function(){
window.location.hash = "#div3";
});
});
Try this, it works for me:
<a class="className">link</a>
$(".className").on("click", function () {
window.location = "yourPage.html#divId";
});
What is wrong for the Jquery Dialog not opening when i click in the button?
Below you can see a simple code of the problem.
Code:
#model IEnumerable<TPTMVC.Models.User>
#using TPTMVC.Models;
#{ViewBag.Title = "Index";}
<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>
$(document).ready
(
function ()
{
$("#opener").click(function () {
$("#dialog100").dialog("open");<--Not opening
});
$("#dialog100").dialog({ autoOpen: false });
}
);
</script>
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<button id="opener">open the dialog</button>
<div id="dialog100" title="Dialog Title">I'm a dialog</div>
Result:
I'm using entity-framework with C#.
Update
$(document).ready(function () {
$('#opener').click(function () {
alert("Click");//It's show
$('#dialog100').dialog('open');
return false;
});
$('#dialog100').dialog({ autoOpen: false });//After
});
In this case the alert work
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });//Before
$('#opener').click(function () {
alert("Click");//it's not show
$('#dialog100').dialog('open');
return false;
});
});
In this not.
The solution:
#section Scripts {
<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 type="text/javascript">
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });
$('#opener').click(function () {
alert("Bum");
$('#dialog100').dialog('open');
return false;
});
});
</script>
}
It was missing #section Scripts
Thanks for any help!
try $('#dialog100').dialog('open');
or...
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });
$('#opener').click(function () {
$('#dialog100').dialog('open');
return false;
});
});
EDIT: based on comments
Use Chrome, hit F12, and check resources to make sure you're loading them...
Your screen should look like this, only the button displayed...
The click event should then show the dialog...
Is this view wrapped in the _layout? if so, you are missing a section. Usually, the _layout file will have a scripts section, and you will need to have your JS code in this scripts section in your view...
Layout.cshtml
#RenderSection("scripts", required: false)
view.cshtml
#section Scripts { ..jquery scripts..}
It appears that your set up of the dialogue happens within the click event, so it doesn't get set up properly. It needs to happen outside of the click event.
Here's a working example...
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Animation</title>
<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>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
after three days of trying I'm near giving it up..
I try to use the Google Maps API to create a map with a longer line formed by several points. Unfortunately not even uploading a XML file worked out for me (Though I successfully authorized myself with my Google account).
Can someone please give me help and post a C#/VB code (snippet) on how to create a map and draw a line on it? Thanks for you help!
Norbert
If you use javascript API for Google map, here is a sample:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>