I am trying to open a jQueryMobile datebox in a dialog mode. I am trying to set the datebox to a default value but it just won't take it for some reason. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#PageData["Title"]</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />
<link rel="stylesheet" href="#Href("/Styles/theme/mysite.min.css")" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script>
</head>
<body>
<script type="text/javascript">
$('document').ready(function(){
//Setting start date value on pageload
$('#myqdate').value('2012-01-14');
$('#myqdate').datebox('refresh');
}
</script>
<form name="shiftform" id="shiftform" action="#Href("~/Account/QChanges.cshtml")" method="post">
<div data-role="fieldcontain">
<label for="myqdate">Date:</label>
<input name="myqdate" id="myqdate" type="date" value="" data-role="datebox" data-options='{"mode": "flipbox", "forceInheritTheme": true, "defaultDate":"2012-01-14"}'>
</div>
<input type="submit" value="Get Queue"/>
</form>
</body>
</html>
I would really appreciate help from experts.
Thanks
This should do it:
$('#myqdate').trigger('datebox', {'method':'set', 'value':'2012-01-14', 'date':new Date('2012-01-14')})
It seems that you should be using the "defaultValue" property instead of the "defaultDate" that is in the data-options of your posted code. No need for the script block.
try closing your function:
$('document').ready(function(){
//Setting start date value on pageload
$('#myqdate').value('2012-01-14');
$('#myqdate').datebox('refresh');
}
)};
Related
I am writing a project here I have created layout page and i have located root css files however I cant see "Css" design at my dashboard page I shared layout.cshtml with you Even I located app.StaticFiles just still don work in your opinion whats the problem
I need to finish this project as soon as possible, please help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/7693313d56.js"></script>
<link href="~/css/grid.css" rel="stylesheet" />
<link href="~/css/lightpick.css" rel="stylesheet" />
<link href="~/css/merchatdashboard.css" rel="stylesheet" />
<link href="~/css/mydatetime.css" rel="stylesheet" />
<link href="~/css/site.css" rel="stylesheet" />
<link href="~/css/style.css" rel="stylesheet" />
<link href="~/css/swipe.css" rel="stylesheet" />
</head>
<body>
<div class="leftmenuswipe">
<div class="leftsidemenuswipe">
#foreach (var item in ViewBag.Menus)
{
<div class="menuitemswipe document">
<div class="icon ">
<img src="#item.MENU_ICON">
</div>
<div class="link ">
#item.MENUNAME_1
</div>
#foreach (var sub in ViewBag.SubMenus)
{
if (item.ID == sub.MENU_PARENT_ID)
{
<ul class="document">
<li>
<a href="">
#sub.MENUNAME_1
</a>
</li>
</ul>
}
}
<div class="clear "></div>
</div>
}
</div>
</div>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<script src="https://kit.fontawesome.com/7693313d56.js"></script>
<script src="~/js/bar.js"></script>
<script src="~/js/bar_chart.js"></script>
<script src="~/js/chart.js"></script>
<script src="~/js/countdown.js"></script>
<script src="~/js/dashboard.js"></script>
<script src="~/js/dashboardjquery.js"></script>
<script src="~/js/demo.js"></script>
<script src="~/js/lightpick.js"></script>
<script src="~/js/Loginajax.js"></script>
<script src="~/js/piechart.js"></script>
<script src="~/js/pie_chart.js"></script>
<script src="~/js/ReportAjax.js"></script>
<script src="~/js/reportform.js"></script>
<script src="~/js/site.js"></script>
<script src="~/js/swipe.js"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
I dragged the css and javascript files I placed in the layout, it is true in the addresses, I tried every way, it is not solved again
you can look at this pictures which my Project
Can you check the Startup.cs file and see Configure method if it is using staticfiles
If not add
app.UseStaticFiles();
I have a solution made up of the above technologies. I am using knockout components made up of .html and .ts files. When trying a simple <script> tag on the .html file, nothing happens.
The component is payment-details.html and the code is as simple as follows:
<h1>Payment details</h1>
<script type="text/javascript">
alert("test");
</script>
The underlying payment-details.ts is:
import * as ko from 'knockout';
class PaymentDetailsViewModel {
constructor() {
}
}
export default { viewModel: PaymentDetailsViewModel, template: require('./payment-details.html')};
and the _Layout.cshtml file is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] Contactless Check In</title>
<base href="~/" />
<environment exclude="Development">
<link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
</environment>
</head>
<body>
#RenderBody()
<script src="~/dist/vendor.js" asp-append-version="true"></script>
#RenderSection("scripts", required: false)
</body>
</html>
I'm not sure what the issue is or where to start looking. There's something in the solution somewhere that is stopping script execution. Nor does it render in the html.
Thank you!
I want some radio buttons styled the way JQuery does it. I've now got demo code working that shows that in a minimal HTML page, but I need to do that now in an ASP.NET C# page. The following code works fine, where REDACTED points to a local-network server:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Radios</title>
<!-- CSS -->
<link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<!-- JQuery -->
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
</body>
</html>
But the following shows me ordinary, non-JQuery-styled radio buttons. The date picker does work (showing that JQuery is running) and messages show up as a pop-up and in the console, showing that the function is running, but the buttons aren't being styled.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="travel_temp.aspx.cs" Inherits="_idx" %>
<!DOCTYPE html>
<html>
<head id="hgs_head" runat="server">
<meta charset="utf-8">
<title>JQuery Test</title>
<!-- The following links have been commented out. The internal links point to copies of JQueryUI files that exist and are freshly downloaded from the makers' site. -->
<!-- CSS -->
<link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<!-- JQuery -->
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
<!-- Radio button styling -->
<script>
$(function () {
console.log("ready!");
alert("Hi!");
$("radio").buttonset();
});
</script>
</head>
<body id="hgs_body" runat="server">
<p>Date Picker using JQuery:</p>
<input type="text" name="date" id="date"><script>$("#date").datepicker();</script>
<!-- MAIN CONTENT -->
<div id="main">
<p>Radio Buttons using JQuery:</p>
<form class="messages" id="messages" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server"/>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Twilight</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Dash</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Rarity</label>
</div>
</form>
</div>
</body>
</html>
I figure the problem has to do with this page being ASP.NET with the buttons being created through an .aspx page (the .aspx.cs page is blanked out for demo purposes by the way). But the point of using "$(function" is that it only runs once the page is fully assembled, so the radio buttons should already be there.
What do I need to do, to make the styling work?
(Follow-up note: I didn't do it in this example, but the actual buttons are ASP.NET code. That wasn't the problem though; see answer. If you're having the same problem note that you apparently need to call the JQuery function to style them again if the page updates.)
During page load, you are assigning the buttonset property to element which is of type tag : radio. No such element exists in your DOM. You need to target the div where you want to apply the buttonset. In short, you are missing '#' in your selector.
$(function () {
console.log("ready!");
alert("Hi!");
$("#radio").buttonset();
});
I have a HTML page that have an iframe. This iframe has a button. Which is one of the possibile ways to press that button?
I tried with javascript, but I didn't solve it...
Thank you in advance!
hey you can try to find that button id and handle the click event..
it will look something like this.
$('#youriframeid').contents().find('#yourbuttonid').click(function(){});
EDIT
Your main html page containing iframe.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"> </script>
<script>
$('#a').contents().find('#iframbtn').click(function(){alert("It Worked!")});
$('#a').contents().find('#iframbtn').trigger('click');
</script>
</head>
<iframe id="a" source="a.html">
</iframe>
</html>
Your second html page containing iframe mark up
<html>
<input type="button" id="iframbtn" value="clickme"/>
</html>
Try to use this:
$("#mainiframe").contents().find("someID").trigger("click");
Sample1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function call(){
try{
document.frm.but.click();
}catch(e){
}
}
</script>
<BODY onload ="call()">
<iframe src="Sample2.html" name="frm" width=100 height=100 />
</BODY>
</HTML>
Sample2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function called(){
alert("---DONE--");
}
</script>
<BODY>
<input type="button" name="but" value="submit" id="but" width=60 height=60 onclick="called()" />
</BODY>
</HTML>
Hope this helps you.
I have a cshtml file in this file I have a hidden field and static value. I want to read it as a XML file to find the hidden field. As a matter of fact, I don't like open it as text file and search into it.
This is a part of my file and I want to read hidden file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" content="Soha Application" />
<title>#ViewBag.MeetingTitle</title>
<link href="#Url.Content("~/Content/themes/Default/main.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/Default/fa-IR.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
**<input id="SkinId" type="hidden" value="008BBF4768861284321640F895D68DA1" /> <!-- Please dont change this Code -->**
<div id="title">
<h1>#ViewBag.MeetingTitle</h1>
</div>
<nav>
</nav>
</header>
you can read it like a regular xml since its an xhtml
an e.g.
http://sticklebackplastic.com/post/2007/06/28/How-to-use-XmlResolver-Or-reading-an-xhtml-file-in-net.aspx
or use linq with html agility pack
http://web.archive.org/web/20080719181517/http://vijay.screamingpens.com/archive/2008/05/26/linq-amp-lambda-part-3-html-agility-pack-to-linq.aspx
I'm using the XPath extension from here: https://github.com/ChuckSavage/XmlLib/
This should work for you. It will return all elements that have an attribute type="hidden"
XElement root = XElement.Load(file); // or XElement.Parse(string);
var hidden = root.XPath("//*[#type='hidden']");