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
Related
I have an editor from ToastUI (source code
:
<html>
<head>
<title>TOAST UI</title>
<script src="https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor-full.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
</script>
</head>
<body>
<div id="editorSection">
</div>
<button id = "but">Hello</button>
<script>
var editor = new tui.Editor({
el: document.querySelector('#editorSection'),
previewStyle: 'vertical',
height: '300px',
initialEditType: 'markdown'
});
document.querySelector("#but").addEventListener("click", function() {
//I want such html to make the markdown text, but this doesn't work.
console.log(document.querySelector('#editorSection').textContent)
})
</script>
</body>
</html>
and it works, but I want to save the markdown text to a database on a click of a button. How to do this?
editor = new tui.Editor({
el: document.querySelector('#editorSection'),
previewStyle: 'vertical',
height: '300px',
initialEditType: 'markdown'
});
editor.getHtml();
editor.getMarkdown();
Both options are possible.
Hope can help you.
document.querySelector("#but").addEventListener("click", function() {
//I want such html to make the markdown text, but this doesn't work.
console.log(document.querySelector('#editorSection').textContent)
})
I am using daterangepicker like this :
$('#myInput').daterangepicker({
'param1': value1,
'param2': value2,
'param3': value3,
...
}, function(...) {
...
})
This works fine if my input is created with the DOM. But if my input is created dynamically after the DOM, this does not work, normally I should do something like this :
$('body').on('daterangepicker..........event', '#myInput', function() {
})
But I don't know how to do it, thanks for help
You need to make a container and inject it into.
$(function() {
let html = document.getElementById('container');
setTimeout(() => {
// Dynamically adding datepicker
html.innerHTML = '<input type="text" id="datepicker"/>'; //
let dp = document.getElementById('datepicker');
dp.classList.add('DatePicker');
$('.DatePicker').datepicker();
}, 500)
});
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Simply becuz Your DOM has not been created.
So you can archive this by register element wrapper the #my-input
So that is the reason why you use "body" and works fine.
You can give it a try the following sample
<div id="my-div"> <input id="my-input" /> </div>
$("#my-div").on('daterangepicker..........event', '#myInput', function() {
})
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 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)
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>