I want to add a JQuery TimePicker to my Razor View and i have spent two days on it by adding Js files and script on front end and calling that TimePicker class in my TimePicker control but all in vain.Please tell me step by step that how can i add TimePicker to my Razor View.Following is the code that i have tried..
<link rel='stylesheet' type='text/css' href='css/timepicki.css' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/timepicki.js'></script>
<script type='text/javascript' src='js/jquery.js'>
$('#timepicker').timepicki();
</script>
calling TimePicker in my control
#Html.TextBoxFor(m => m.DueTime, new { #id = "timepicker" })
Try this:
$(function(){
$('#timepicker').timepicki();
}
or
$(document).ready(function(){
$('#timepicker').timepicki();
});
Hope it works....
A few issues with the code:
1) It is not timepicki. change it to timepicker()
2) There is no need to provide the id attribute in the html helper. The model property itself is the id.
http://jsfiddle.net/man_luck/w18qmmgt/
JS:
$(document).ready(function(){
$('#DueTime').timepicker();
});
HTML:
<input class="form-control" id="DueTime" name="DueTime" type="text">
use:
#Html.TextBoxFor(m => m.DueTime)
Related
I am attempting to make use of the chosen plugin, and for some reason, it refuses to apply to my dropdowns. Nothing on the dropdown changes from before I attempted to use it, to after.
Here is the HTML from the view I am using:
#model PnPMeetUp.Models.Employee
<!DOCTYPE html>
<html>
<head>
#{
ViewBag.Title = "Temp";
}
<link href="~/Content/Chosen/chosen.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/chosen.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("dropdownA").chosen({ width: "95%" });
});
</script>
</head>
<body>
<h2>Temp</h2>
using (Html.BeginForm())
{
#Html.HiddenFor(model => model.Id)
<label>Select Attendees</label>
#Html.DropDownListFor(model => model.Id, new SelectList(Model.allEmployees, "Id", "Fullname"), new { id = "dropdownA" })
}
</body>
</html>
Here is a picture of what my view looks like both before and after attempting the plugin:
The problem is quite simple, your jQuery selector is not returning any matching element:
$("dropdownA").chosen({ width: "95%" });
You should be using:
$("#dropdownA").chosen({ width: "95%" });
Notice that the hashtag/pound symbol means:
Select a single element with the given id attribute.
Also, note that the Employee class should not contain the list of the employees. That task is much more suited to the ViewBag
Yes, i know this is a duplicate, but all the answers i've read didn't help me, i have a side by side working example, from w3school, it works, and mine doesn't, what i am trying to do is show a tooltip warning the user to use numbers only, but instead, it just refreshes the page.
This is my full html page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" media="screen" href="Css/style.css"> /*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var previous;
$(document).ready(function(){
$('.btn').tooltip();
});
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
}
});
});
</script>
</head>
<body>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
</body>
</html>
I didn't put the data-toggle:"tooltip" neither a title:"sometitlehere" in the element's options, because i don't really need it.
There are few mistakes in your code,
//it should be title: and not title=
$('#search-form').tooltip({title:"You did good :)"});
The above line initializes the tooltip once your code excutes.
After that if the tooltip title is updated, the tooltip is needed to be destroyed and re-initialized with new title.
var previous;
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var newTooltip="";
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
newTooltip = "You did good :)";
}
else
{
newTooltip = 'Please enter numbers ONLY !';
}
$('#search-form').attr('title', newTooltip).tooltip('fixTitle').tooltip('setContent').tooltip('show');
setTimeout(function(){
$('#search-form').tooltip('hide').tooltip('destroy');
}, 1500);
});
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
/*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
You are using form so you need to return true or false on validate action so your code should be like
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
return true;
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
return false;
}
are you initialising the tooltip in the js? - tooltips won't show unless you have this in the code:
$(function(){
$("[data-toggle=tooltip]").tooltip();
})
ok - I just looked at your code - you have :
$('.btn').tooltip();
listed in theree, but your button has the class "btntxt" and you are also trying to get a tooltip on the search form - but that has the id of "search-form" - neither of which will be affected by your tooltip declaration. Best to use the one I gave in the is post so that all elements with tooltips can display them. Setting them to individual classes or ids is too restrictive if you forget that your class or id is not the same as the one listed in the js.
you have this order to your scripts:
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Does the tooltip.js require jquery? - if so you may need to invert that order
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
I am trying to test for the filling out of an HTML form and the subsequent change of an HTML elements Text. I need to create some form of event using jasmine-jquery...
HTML
<div class="response" id="text-response">Unknown</div>
<div class="form-holder">
<form>
<input id="input-text" type="text" name="user-input" placeholder="Test Your Text" value="">
<input id="submit-button" type="submit" value="Submit">
</form>
</div>
I am trying to test drive id='text-response' changing to 'Correct' based on some script logic.
describe('Interface logic', function(){
it('Will return correct if logic applies', function(){
expect('#emotion').toContainText('Correct');
});
});
Any help would be much appreciated
You might just need to trigger an event, for example:
$('#submit-button').click();
That should fire the click event. Then you can check for whatever condition this event changes on the page.
$('#submit-button').click();
Was the solution for me but the spec runner constant refresh is because you're hitting http://localhost:3000/specs/ rather than http://localhost:3000/SpecRunner.html
If you have your form html in a separate template in a file named for example
templates/form.tmpl.html
and your jquery in a separate file also named for example
js/validation.js
And containing validation code like
$(".form-holder").on("submit", function() {
event.preventDefault();
var userInput = $('#input-text').val();
if (userInput === 'the correct text') {
$('#text-response').text('Correct');
return;
}
$('#text-response').text('Incorrect');
});
Then your test spec can be something similar to this
describe('Interface logic', function() {
jasmine.getFixtures().fixturesPath = '';
beforeEach(function() {
loadFixtures('templates/form.tmpl.html');
appendSetFixtures('<script src="js/validation.js"></script>')
});
it('Will return correct if logic applies', function(){
$('#input-text').val('the correct text');
$('#submit-button').trigger("click");
expect($('#text-response').text()).toBe('Correct');
});
it('Will return incorrect if logic applies', function(){
$('#input-text').val('the incorrect text');
$('#submit-button').trigger("click");
expect($('#text-response').text()).toBe('Incorrect');
});
});
And the spec runner html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Spec Runner</title>
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.3/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.3/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.3/jasmine-html.js"></script>
<script src="lib/jasmine-2.2/boot.js"></script>
<script type="text/javascript" src="lib/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="lib/jasmine-jquery.js"></script>
<script type="text/javascript" src="specs/form.spec.js"></script>
</head>
<body>
</body>
</html>
i try to use selet2 jquery library (https://select2.github.io/) to get a Multiple select boxes but that is not working
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/css/select2.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-beta.3/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#js-example-basic-multiple").select2();
});
</script>
<g:select class="js-example-basic-multiple" id="js-example-basic-multiple" name="tags" from="${tags}" optionValue="name" optionKey="id" multiple="true"/>
i don't know if i have to download something ?
thx
I'm trying to add a help button in a Zend form using qTip 2. The button is a simple image, and I would like to open a pop-in when the image is clicked.
Here my code:
in Booostrap.php:
protected function _initView() {
...
$view->headLink()
->appendStylesheet('/css/jquery/smoothness/jquery-ui-1.10.1.custom.min.css')
->appendStylesheet('/css/jquery/jquery.qtip.min.css');
}
protected function _initJQuery() {
...
$view->jQuery()
->setLocalPath('/js/jquery/jquery-1.9.1.min.js')
->setUiLocalPath('/js/jquery/jquery-ui-1.10.1.custom.min.js')
->addJavascriptFile('/js/jquery.qtip.min.js')
->enable()
->uiEnable();
}
In my view:
<?php
$this->headscript()->appendScript('$(data-tooltip!="").qtip({content: {attr: \'data-tooltip\'}});');
?>
...
<img data-tooltip="thing" src="/images/repo/help-22x22.png"/>
And the rendered result in my browser:
<link href="/css/jquery/smoothness/jquery-ui-1.10.1.custom.min.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/jquery/jquery.qtip.min.css" media="screen" rel="stylesheet" type="text/css" >
...
<script type="text/javascript" src="/js/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
...
<script type="text/javascript">
//<!--
$(data-tooltip!="").qtip({content: {attr: 'data-tooltip'}}); //-->
</script>
...
<img data-tooltip="truc" src="/images/repo/help-22x22.png"/>
which is what I wanted to get. Problem is, the tooltip doesn't show up. Not even is an event fired when I click on the picture, according to the Javascript console. So my idea i wrong, but I can't understand why. Any idea?
I Think that the problem is here: $(data-tooltip!="") instead of $('[data-tooltip!=""]').
An other problem is your call is before the tag img so use InlineScript ìnstead of headscript
To Finish, I think should precise de name of the tag (img) in the selector.
Try to replace
$this->headscript()->appendScript('$(data-tooltip!="").qtip({content: {attr: \'data-tooltip\'}});');
By
$this->InlineScript()->appendScript('$(\'img[data-tooltip!=""]\').qtip({content: {attr: \'data-tooltip\'}});');
Not sure but your qtip initialization has to be in doc ready:
<?php
$this->headscript()->appendScript('$(function(){// here qtip code});');
?>