My Code:
#using Telerik.Web.Mvc.UI;
#using Telerik.Web.UI;
#{
ViewBag.Title = "Home Page";
}
<script type="text/javascript" src="~/Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.11.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.min.css"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.css"></script>
<script type="text/javascript">
console.log($)
</script>
#(Html.Telerik().DatePicker()
.Name("DatePickerDOB")
.HtmlAttributes(new { style = "width: 140px; " })
)
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>. The page features <mark>videos, tutorials,
and samples</mark> to help you get the most from ASP.NET MVC. If you have
any questions about ASP.NET MVC visit <a href="http://forums.asp.net/1146.aspx/1?MVC"
title="ASP.NET MVC Forum">our forums</a>.
</p>
</div>
</section>
}
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and that gives you full control over markup
for enjoyable, agile development. ASP.NET MVC includes many features that enable
fast, TDD-friendly development for creating sophisticated applications that use
the latest web standards. <a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn
more</a></li>
<li class="two">
<h5>Add NuGet packages and jump start your coding</h5>
NuGet makes it easy to install and update free libraries and tools. <a href="http://go.microsoft.com/fwlink/?LinkId=245153">
Learn more</a></li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features
and price for your applications. <a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn
more</a></li>
</ol>
I don't know what I have to do further for displaying the DatePicker when I am clicking the datepicker text field. Please Help. Thanks.
There's nothing wrong with
#(Html.Telerik().DatePicker()
.Name("DatePickerDOB")
.HtmlAttributes(new { style = "width: 140px; " })
)
It works fine in my project (although the calendar opens when clicking the icon, not the textbox, but I don't think that's actually your question at this point).
Check to be certain that
#(Html.Telerik().ScriptRegistrar()
is being called. Noramlly this is in _Layout, but can be put directly in the file using a Telerik control.
On a side note (I don't think it's causing your problem, but certainly isn't helping anything), these lines are wrong:
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.min.css"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.9.0.custom.css"></script>
.css files aren't scripts. They should be referenced like this:
<link href="~/Scripts/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" type="text/css"/>
And you don't seem to actually be using any jQuery on this page, so you probably don't need to import all those scripts and css files anyway. Telerik uses its own jQuery scripts, that's what the script Registrar is for.
Related
I'm trying to automate html events using c#.
I have html dropdown and on change of its value it shows/hides specific divs.
Below is sample HTML code.
<!DOCTYPE html>
<html>
<body>
<select id="ddl">
<option value="1" selected="selected">TextBox</option>
<option value="2">Button</option>
</select>
<input style="display: none" type="text" class="textboxclass" />
<div class="btn" style="display: none">
<button type="button">Submit</button>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$('#ddl').change(function()
{var name = $('#ddl option:selected').text();
var id = $('#ddl option:selected').val();
if(id =="1"){$('.textboxclass').show();$('.btn').hide();}
else{$('.textboxclass').hide();$('.btn').show();}});
</script>
</body>
</html>
I'm using mshtml.dll to read the HtmlDocument and I have to fire "change" event programmatically.
Tried different ways like below ones:
HTMLOptionElement drpelem.select=true; HTMLSelectElement
elem.click();
But it's not working. Please guide me.
I think this question was already asked and answered in a different form, here: https://stackoverflow.com/a/1456714/19020 or here: https://stackoverflow.com/a/11175179/19020 -- since mshtml is used by Internet Explorer.
But really, to load a full browser experience you'll need to load an ActiveX control, or COM control or whatever they're called by Microsoft nowadays. As far as I know, mshtml.dll just renders the HTML.
I am a noob at jQuery, so please help me out.
I am using Visual Studio 2005 with ASP.net 2 (I know, we're planning an upgrade soon!)
I am simply trying to embedd the DateBox FlipBox control on my website, as the users will be using the website via their iPads.
How do I go about getting this to work? Will it work?
I have placed this in my master page.
<head runat="server">
<link href="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/jtsage-datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<title>Tec-NQ Boarding Register</title>
<asp:ContentPlaceHolder id="ContentPlaceHolderHead" runat="server">
</asp:ContentPlaceHolder>
</head>
And in my ASPx page I've simply put an <input> statement, as per the sample instructions here.
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
But all I get is a textbox! Where/how do I get the date control to show up?
I had a closer look at that link, and there are heaps of <div> statements outlining the actual control and a calendar icon.
<div class="input-group"><input type="text" data-options="{"mode":"calbox", "useInline":false, "useInlineAlign": "right"}" data-role="datebox" id="in1" class="form-control" readonly="readonly"><div class="input-group-addon" title="Open Date Picker"><span class=" glyphicon glyphicon-calendar"></span></div></div>
I've even tried to paste that code directly into my ASPX page, but I get a whole heap of junk.
How do you get this thing to work please? It's driving me nuts.
Thanks
The answer was staring at my face!
https access priveleges
Once I downloaded the js files directly and stored them locally, everything worked off the bat!
I´m trying to setup a date and time picker, but the icons (Calendar and Time) does not shows up. Here is my code:
<link href="#Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" media="screen" type="text">
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<div id="datetimepicker1" class="input-append date">
Date and Time Test
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'pt-BR'
});
});
</script>
I´ve tried to change icon-time and icon-calendar to glyphicon-time and glyicon-calendar and no success.
Here is what I get:
Don´t know what to do.. I need help, please. Thanks.
The website for the tarruda bootstrap-datetimepicker.js that you are using says the plugin is not currently maintained. It does not appear to have been upgraded for Bootstrap 3.
I'd suggest one of these date/time picker plugins that are compatible with Bootstrap 3:
http://eonasdan.github.io/bootstrap-datetimepicker/
http://www.malot.fr/bootstrap-datetimepicker/
And if you really want to get the one you are using to work, you can try making manual changes to the JS and CSS. Follow the blog post "Datepicker for Bootstrap with Twitter Bootstrap 3.0" found at kenyontechnology. The post was written for the date-only plugin on which the date/time plugin you are using was forked, so I think the changes should mostly apply.
EDIT: I think there is an issue open on this already: http://code.google.com/p/selenium/issues/detail?id=5717
So basically I'm using the Firefox Driver and the div with id="page-content" is causing my selenium test to fail with the error listed in the referenced question: "Element is not currently visible and so may not be interacted with" but another is? I was able to trace the problem down to the fact that that ID has a css style of overflow: hidden Is this a bug, or am I doing something wrong?
I'm using Selenium WebDriver version: 2.33.0.0, Firefox version: 22
The source for the test and website is here: https://github.com/tonyeung/selenium-overflow-issue
For quick reference: the HTML below is my test page. For those of you not familiar with angular, all its doing is displaying an html fragment as a modal whenever you click on add or edit, you can see a live demo here: http://plnkr.co/edit/LzHqxAz0f2GurbL9BGyu?p=preview
<!DOCTYPE html>
<html data-ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Selenium Test</title>
<!-- // DO NOT REMOVE OR CHANGE ORDER OF THE FOLLOWING // -->
<!-- bootstrap default css (DO NOT REMOVE) -->
<link rel="stylesheet" href="css/bootstrap.min.css?v=1">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css?v=1">
</head>
<body>
<div data-ng-controller="MyCtrl">
<span id="added" data-ng-show="added">Added</span>
<span id="edited" data-ng-show="edited">Edited</span>
<div id="page-content" style="overflow:hidden">
<!--<div id="page-content">-->
<div class="employees view">
<button name="addNewEmployee" id="addNewEmployee" class="btn btn-primary" data-ng-click="add()">Add</button>
<button name="editEmployee" id="editEmployee" class="btn btn-primary" data-ng-click="edit()">Edit</button>
<div data-ng-controller="editCtrl" data-ng-include="'app/views/edit.html'"></div>
<div data-ng-controller="addCtrl" data-ng-include="'app/views/add.html'"></div>
</div>
</div>
</div>
<!-- JS scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.2/angular-strap.min.js"></script>
<script src="app/app.js"></script>
</body>
</html>
According to the Selenium WebDriver source code, an element must not have overflow: hidden as a style. (ref) (UPDATE I just realized that the maintainers have updated the code in the ref I linked to, but that the original 2.33 code did include the overflow: hidden check. Its just been refactored for presumable 2.34.)
So, it looks like unless the maintainers decide against this, you are SOL. But the first step to getting the maintainers to notice the issue is to add an Issue to the official repository, which it looks like you have done.
One possible solution in the meantime if you can't get you developers to help you is to use Javascript to remove the overflow attribute:
driver.executeScript("arguments[0].setAttribute('style', 'overflow: none;')", page_content_element)
And try to run your tests from there.
I am trying to create tabs in my mvc application using jquery ui.
I tried the following code:
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs();
});
</script>
<div id="tabs">
<ul>
<li>Exploded pie slice</li>
<li>Normal pie chart</li>
</ul>
<div id="tabs-1">#(Html.Partial("PartialView1"))</div>
<div id="tabs-2">#(Html.Partial("PartialView2"))</div>
</div>
I saw something like the above code in jquery ui demo. Please advice me what I'm missing in my code because I only get two links instead of tabs and my two partial view pages are displayed in the index page.
Thanks,
Anandaraj
You haven't included the jQuery UI CSS file.
Either use the default skin, or pick one, or even build your own.
Bear in mind that you'll need all the images too, so follow my second link to download the whole theme (either an existing one or one you have built).