Ok so I have a jquery tag plugin which works perfectly, but then I thought ho!, it would be cool to add a "placeholder"to my text box. I did so... and nothing appeared apart from the jquery plugin... My place holder should be "hello type here"... I guess it doesn't work, because of the plugin, which is between "script" tags... I would be very thankful if someone could help me:)
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it.js" type="text/javascript" charset="utf-8"></script>
<link href="jquery.tagit.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="myForm" action="searchlevel.html" method="post">
<p id="text">Sport:</p>
<input type="text" name="query" id="box" placeholder="hello type here! ">
<input type="submit" value="Submit" id="but">
</form>
</body>
<script>
//this is jquery tag plugin...
$(document).ready(function () {
$("#box").tagit();
});
// I guess I have to add something here to display the "placeholder", please help.
</script>
</html>
Aloha to you mate!
why are you using tagit javascript and css for placeholder. delete that scripts and use it simple it will work , but remember its only create problem when you will it in IE <9
look at here may help you
JSFiddleTest here
Related
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</head>
<script>
function confirm() {
BootstrapDialog.confirm('Are you sure you want to do this?');}
</script>
<input type="button" value="confirm" onclick="confirm()" />
Hi. I'm trying to make a bootstrap confirm alert which is activated by a button input. I'm a total beginner, so it's probably something fundamental/obvious that I'm missing... Any help very much appreciated. Mike.
a few things:
your script tag is incorrect, need to be fixed
you most likely need the bootstrap.css
you need to add bootstrap-dialog.js
function confirm() {
BootstrapDialog.confirm('Are you sure you want to do this?');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<input type="button" value="confirm" onclick="confirm()" />
Ive downloaded Notify.js'files and put them in root of webpage. im trying to test it but i didn't get anything when click on button
<html>
<head>
<title>Untitled</title>
<script src="notify.js"></script>
</head>
<body>
<input name="notif" type="button" value="Shoow notif" onclick="$(".elem-demo").notify("Hello Box");">
</body>
</html>
Whats the problem?
This is your answer and working:
<html>
<head>
<title>Untitled</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="notify.js"></script>
</head>
<body>
<input name="notif" type="button" value="Shoow notif" onclick="$('.elem-demo').notify('Hello Box');"/>
<div class="elem-demo">a Box</div>
</body>
</html>
1-You forgot to include jquery to your file.
2-You should create an element that has a elem-demo class
3-Your javascript had a problem! You can't use double-quotation and it's child has double-quotation too.
here is your code example, and then my code:
onclick="$(".elem-demo").notify("Hello Box");" //Your code
onclick="$('.elem-demo').notify('Hello Box');" //My code
I am using parsley.js for form validation. I read through the documentation on the website and followed their examples, but it does not seem to work as expected.
Here's the test file I created:
<doctype>
<html>
<head>
<title>Parsley</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src ="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="parsley.js"></script>
<link rel="stylesheet" href="parsley.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-8">
<h2>Parsley.js Form Validation</h2>
<form id="testForm" data-parsley-validate>
<label>Name</label><br />
<input type="text" name="name" data-required="true">
<br /><br />
<input type="submit" value="Submit" class="btn btn-success">
</form>
</div>
</div>
</div>
</body>
</html>
Any suggestions on what's going wrong?
You'll need to use data-parsley-required or directly required in your DOM.
Here are all the built-in validators: http://parsleyjs.org/doc/index.html#validators
Best
javascript file import should be in following order.
JQuery.js
Parsley.js
Common.js
<script type="text/javascript" th:src="#{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="#{/js/parsley.min.js}"></script>
<script type="text/javascript" th:src="#{/js/common.js}"></script>
If it's not like this, some component can't be known and it'll not working.I know it is a bit late, but I hope it can help someone.
I am trying to build my personal website using express and want to put a datepicker on one of the page.
I tried to change the ejs file of this page, however, nothing works.
I am wondering if it is because that the layout.ejs file exists, and wondering how can I just load jquery-ui in only of the ejs.file? Because I cannot find any related npm to install . Many thanks for answering！XD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(function() {
$( "#datepick" ).datepicker();
});
</script>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
There is another similar question, but I think the answer does not works for me.
node.js - DatePicker jquery UI not workinng
When I just use Express and change the index.ejs like the following, it works , but when there are many pages, it seems that it cannot be loaded...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$('#datepick').datepicker();
});
</script>
</head>
<body>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
node.js - DatePicker jquery UI not workinng
For whom run into the same problem, this is the reference.
I finally found the answer by checking the code.I was unable to load JQuery for in the layout.ejs, I retyped the following in order to load the bootstrap, but actually by using https://npmjs.org/package/twitter-bootstrap-node twitter-bootstrap-node, there is no-need to load the javascripts again. This may be a common problems for beginners in Node.JS like me.Hope this answer can be helpful to people who run into the same problem and the code is in the answer of the related problem.
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/vendor/twitter/less/bootstrap.less"></script>
Hi look at this jsfiddle link http://jsfiddle.net/w7PHj/
you need to use like this....
$('#datepick').datepicker();
I have a fiddle which displays date picker. same code i have written below but nothing happens, what wrong i am doing? When i click on that green colour then no date picker is generated, but in fiddle it is coming fine, where i am doing wrong?
http://jsfiddle.net/cBwEK/10/
<html>
<head>
<script type="text/javascript" src="mootools-yui-compressed.js"></script>//mootools script
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="datepicker.css" />
</head>
<body>
<input name='date_allow_empty' type='text' value='' class='date picker' />
<div id="invokeDP"></div>
<script type="text/javascript">
var dp = new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true,
toggleElements: ['invokeDP']
});
</script>
</body>
</html>
EDIT: I have taken all scripts inside head section, previously these scripts were in body section
I think you miss a mootools core library.
<script src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script>
Here is my working solution http://jsbin.com/unosar/4/edit#source (click at Render button to preview)
Your CSS isn't being detected because you have your link in the body. If I remove the CSS from your fiddle, it doesn't display at all:
http://jsfiddle.net/cBwEK/11/
Try moving this to the head tag along with your script elements. I've also changed your comment block to the correct HTML syntax:
<head>
<script type="text/javascript" src="mootools-yui-compressed.js"></script><!-- mootools script -->
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="datepicker.css" />
</head>
<body>
.......
Also, your class for the input is date picker. Looking at your mootools script, this should be datepicker.