I use this plugin: jQuery Countdown in ASP.NET page.
my code is:
.cs file:
DateTime time1 = DateTime.Now.AddMinutes(2).ToString()
Label1.Text = time1.ToString();
.aspx file:
<script src="JQueryCountDown/jquery-1.10.1.min.js" type="text/javascript"></script>
<link href="JQueryCountDown/countdown.demo.css" rel="stylesheet" type="text/css" />
<script src="JQueryCountDown/jquery.countdown.js" type="text/javascript"></script>
<script type="text/javascript">
window.jQuery(function ($) {
$(".ctdwn").countDown({});
});
</script>
...
<asp:Label runat="server" ID="Label1" CssClass="ctdwn"></asp:Label>
It works properly.
Now I want during that 2 minutes, reset the countdown and start from 2 minutes again(with javascript). But I do not know how to do it. For example this code does not work and disables the countdown:
resetTime = function (dt) {
$('#Label1').text(dt);
$(".ctdwn").countDown({});
};
Thanks.
I believe that what you want is in the docs, here is an example you might find useful:
window.jQuery(function ($) {
function startCountDown() {
$('.ctdwn').countDown({}).on('time.elapsed', startCountDown);
}
startCountDown();
});
Related
I'm trying to import this Widget designed for JQuery in my React projet :
<script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js">
</script>
This widget needs JQuery to work, so i also load JQuery using Google CDN:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
The documentation is written for JQuery, and shows this example to use the widget :
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>Mondial Relay Parcelshop Picker with Map</title>
<!-- JQuery required (>1.6.4) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Leaflet dependency is not required since it is loaded by the plugin -->
<script src="//unpkg.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/leaflet/dist/leaflet.css" />
<!-- JS plugin for the Parcelshop Picker Widget MR using JQuery -->
<script src="//widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>
</head>
<body>
<!-- HTML Element in which the Parcelshop Picker Widget is loaded -->
<div id="Zone_Widget"></div>
<!-- HTML element to display the parcelshop selected, for demo only. Should use hidden instead. -->
<input type="text" id="Target_Widget" />
</body>
</html>
JAVASCRIPT :
```
$(document).ready(function () {
$("#Zone_Widget").MR_ParcelShopPicker({
Target: "#Retour_Widget",
Brand: "BDTEST ",
Country: "FR",
EnableGmap: true
});
});
```
I really don't know how to do it. I've tried for 3 days but i'm still blocked.
Thank you a lot for your help and i'm very sorry for my bad english.
Thanks again.
(UPDATE)
My code is :
import React, { useEffect } from 'react';
const MondialRelay = () => {
useEffect(() => {
const jQuery = document.createElement('script');
jQuery.src = "//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
jQuery.async = "true";
document.body.appendChild(jQuery);
return () => {
document.body.removeChild(jQuery);
}
})
useEffect(() => {
const scriptMr = document.createElement('script');
scriptMr.src = "https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js";
scriptMr.async = "true";
document.body.appendChild(scriptMr);
return () => {
document.body.removeChild(scriptMr);
}
});
!function(){
// Parameterized the widget
$(document).ready(function () {
$("#Zone_Widget").MR_ParcelShopPicker({
Target: "#ParcelShopCode",
Brand: "BDTEST ",
Country: "FR"
});
});
}();
return(
<div>
<div id="Zone_Widget"></div>
</div>
)
};
export default MondialRelay;
And the error i encounter is "$ is not defined" but this is because i try to use JQuery syntax in React and $ is never defined in my code.
I dont know how to create this div with #Zone_Widget id.
There's a typo in your script tag, you missed https:
change the URL to https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js and it should work.
As a suggestion, since you're using nodejs/npm already, you can install jquery using npm as well.
npm install jquery
I am using visual studio serenity template for my aspnet MVC application. For example what I want to do is to generate random values at every 1 second in controller and pass it to cshtml page <div>.
Please help me how can I refresh my page at every 1 second.
[RoutePrefix("Dashboard"), Route("{action=index}")]
public class DashboardController : Controller
{
[Authorize, HttpGet, Route("~/")]
public ActionResult Index()
{
return View();
}
model Serene2.Common.DashboardPageModel
#{
ViewData["Title"] = "Dashboard";
ViewData["PageId"] = "Dashboard";
}
#section Head {
<link rel="stylesheet" href="~/Content/iCheck/flat/blue.css">
<link rel="stylesheet" href="~/Scripts/morris/morris.css">
<link rel="stylesheet" href="~/Scripts/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="~/Scripts/datepicker/datepicker3.css">
<link rel="stylesheet" href="~/Scripts/daterangepicker/daterangepicker-bs3.css">
<link rel="stylesheet" href="~/Scripts/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<script src="~/Scripts/raphael/raphael-min.js"></script>
<script src="~/Scripts/morris/morris.min.js"></script>
<script src="~/Scripts/sparkline/jquery.sparkline.min.js"></script>
<script src="~/Scripts/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="~/Scripts/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="~/Scripts/knob/jquery.knob.js"></script>
<script src="~/Scripts/daterangepicker/moment.min.js"></script>
<script src="~/Scripts/daterangepicker/daterangepicker.js"></script>
<script src="~/Scripts/datepicker/bootstrap-datepicker.js"></script>
<script src="~/Scripts/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="~/Scripts/adminlte/pages/dashboard.js"></script>
<script src="~/Scripts/adminlte/demo.js"></script>
}
#section ContentHeader {
<h1>#LocalText.Get("Navigation.Dashboard")<small>#Html.Raw(Texts.Site.Dashboard.ContentDescription)</small></h1>
}
<div class="inner">
<p>My Random Value From Controller</p>
</div>
hey with ajax you can easily achieve that,
The main issue is such approach will lead to infinite recursive loop so handle with care.Anyway your code should be like below
1.In cshtml
<p id="pValue"></p>
2. In script
var someRootPath = "#Url.Content("~")";
(function randomGenerator() {
$.ajax({
url: someRootPath + 'Dashboard/GetRandomValue',
success: function (data) {
$('#pValue').html(data.someValue);
},
complete: function () {
setTimeout(randomGenerator, 1000);
}
});
})();
and finally
3.Controller
[HttpGet]
public JsonResult GetRandomValue()
{
return Json(new { someValue = Guid.NewGuid().ToString() }, JsonRequestBehavior.AllowGet);
}
Hope this will help according to your current scenario.
If you want to refresh your page every second, you could put some javascript on the page like:
<script type="text/javascript">
setTimeout(function(){ document.location.reload(); }, 1000);
</script>
If you only want to update part of the page, you can make an ajax call (http://api.jquery.com/jquery.ajax/ or https://developer.mozilla.org/nl/docs/Web/API/XMLHttpRequest) which would point to your controller action - returning only the necessary data. Then, with javascript again, you can modify the parts of the page you find relevant.
I have used this same script on other websites and I just can't get it to work with my current project at http://www.torchwoodworks.com/. After delving into the firefox script debugger, it seems to be a problem with cookies.js not loading, as i'm getting a "$.cookie is not a function" error. I know i've had troubles in the past if jquery itself is loaded after this script, but that is not the case. As far as I can tell, it should be working.
Here is my code added to the BigCommerce header:
<!--Scripting for age verification, added LM 02/03/15 -->
<script type="text/javascript" src="http://store-kdukte.mybigcommerce.com/template/js/jquery.min.js"></script>
<script type="text/javascript" src="http://store-kdukte.mybigcommerce.com/template/js/lightbox_me.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="http://store-kdukte.mybigcommerce.com/template/js/cookies.js"></script>
<link rel="StyleSheet" href="http://store-kdukte.mybigcommerce.com/template/js/verify.css" type="text/css" media="all">
<script type="text/javascript">
$(window).load(function () {
// Halt! Age identification
// Includes checking for and setting a cookie with cookies.js
if(!$.cookie('legal-age')){
var date = new Date();
var minutes = 30;
date.setTime(date.getTime() + (minutes * 60 * 1000));
$('#verify').lightbox_me({
centered: true,
closeClick: false,
closeESC: false,
overlayCSS: {background: 'black', opacity: 1},
closeSelector: '.v-yes',
onClose: function(){
$.cookie('legal-age','yes', {domain: 'torchwoodworks.com', path: '/', expires: date});
}
});
e.preventDefault();
}
});
</script>
<!--end Scripting for age verification -->
Any insight would be appreciated. Thanks!
To use $.cookie you need to include jquery cookie plugin
i am working with two js library to get browser timezone id and browser local time
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js"></script>
<script src="Scripts/moment-timezone.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
alert(moment.tz(tz.name()).format());
});
</script>
this below code return perfect timezone id
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
but this code is not working alert(moment.tz(tz.name()).format()); not giving user local time.
am i missing something in code? do i need to add any momentjs related other file ?
please guide me. i want to get user local time using moment.js. thanks
UPDATE Working Version
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jstz.min.js"></script>
<script src="Scripts/moment.min.js" type="text/javascript"></script>
<script src="Scripts/moment-timezone-with-data-2010-2020.min.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="WebForm1.aspx" id="form1">
<div>
<script type="text/javascript">
$(document).ready(function () {
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
var format = 'YYYY/MM/DD HH:mm:ss ZZ';
alert(moment.tz('Europe/London').format(format));
alert(moment.tz(tz.name()).format(format));
});
</script>
</div>
</form>
</body>
</html>
My solution of this case (this is part of the page code):
function toLocalTime(time) {
if (time <= 0)
return '';
var m = moment.tz(time, 'America/Chicago'); //CDT
var tz = jstz.determine(); // Determines the time zone of the browser client
m.tz(tz.name()); // Convert CDT to local time
return m.format('HH:mm:ss');
}
<script src="js/jstz.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/moment-timezone-with-data-2010-2020.js"></script>
...........
<script th:inline="javascript">document.write(toLocalTime(<<TIME IN MILLISECONDS HERE>>));</script>
I have a bunch of web pages where I have an identical construct:
<html>
<head>
<script src="sorttable.js"></script>
<noscript>
<meta http-equiv="refresh" content="60">
</noscript>
<script type="text/javascript">
<!--
var sURL = unescape(window.location.pathname);
function doLoad()
{
setTimeout( "parent.frames['header_frame'].document.submitform.submit()", 60*1000 );
}
function refresh()
{
window.location.href = sURL;
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.replace( sURL );
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.reload( true );
}
//-->
</script>
</head>
<body>
.
.
.
<script type="text/javascript">
window.onload = function() { sorttable.innerSortFunction.apply(document.getElementById("OpenFace-2"), []); doLoad(); }
</script>
</body>
</html>
This works perfectly in every page except for one, where when the onload function runs it cannot find the sorttable code (which is loaded from sorttable.js up at the top). All these pages are part of the same application and are all in the same dir along with the js file. I do no get any errors in the apache log or the js console until that page loads, when I get:
sorttable.innerSortFunction is undefined
I can't see what makes this one page different. Can anyone see what is wrong here, or give me some pointers on how I can debug this further?
The code I pasted in is from the source of the page where it does not work, but it is identical as the pages where it does work.
Looks like on that page the table with id OpenPhace-2 by which you try to sort have no needed class: sortable
The function innerSortFunction of sorttable object will be present only if there is any table with sortable class exists.