jQuery Tagit! Not working - javascript

I am using the jQuery tagit! library to create a user "Skills" input form. I figured this would be an extremely quick and simple setup like most jQuery libraries, however I am having a tremendous amount of trouble with this one. I tried following the source code on the example below, but I cannot get it to work even with the direct source code.
I am using the script found here: https://github.com/aehlke/tag-it/blob/master/README.markdown
Here is the javascript that is initializing the tag-it library in the header:
$(function() {
$('#skills').tagit({
singleField: true,
});
});
And here is the <ul> element that is supposed to turn into an input field when the tag-it.js library is called:
<ul id="skills"></ul>
I am including all these files to get this to work:
<link rel="stylesheet" href="styles/tag-it.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/tag-it.js"></script>
All the files are being called correctly and I am not receiving any errors. There is NO input form where the <ul> tags are unless I create one manually
Does anyone have a clue as to why this isn't working? Do I need to manually add an input field and assign a specific ID or class to it?
EDIT: This has been solved. The code posted is all 100% correct, I had an error in the jquery selector before tag-it initialization.

This was a problem for me, my template had a script linking to a local jquery. So when i copy the jqueryui and jquery link from tagit, it overlaps. Geting rid of the local jquery did it for me.

I guess the problem is with that comma
you have put
singleField: true,
but it has to be
singleField: true
If you have two options like
tagSource: availableTags,
singleField: true
then only the first option will have the comma
the second or the last option (in case there are more than 2 options) will not have a comma

Related

jquery script on html file

I'm using Bottle to make a simple web form and want to set the Selectize.js jquery plugin to a field so the user can set several values to that same field.
Inside my form tag I have the following code:
<label>
<span>Links :</span>
<input type="text" id="input-tags" name="links">
</label>
<script>
$('#input-tags').selectize({
persist: false,
createOnBlur: true,
create: true
});
</script>
And the following .js and .css inside the head tag:
<link href="/selectize.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/selectize.js"></script>
To deal with static files I have the following route in my .py script:
#get('/<filename:re:.*\.js>')
def javascripts(filename):
return static_file(filename, root='static/js')
#get('/<filename:re:.*\.css>')
def stylesheets(filename):
return static_file(filename, root='static/css')
My route to deal with static files seems to be working properly 'cause I've tested it with other jquery plugin that does not use explicit code within the html file.
On this one, the problem seems to be on the explicit script code bellow the label tag. I found some articles about dealing with JSON but couldn't make it work (I also don't know if that is the right way to go).
Well, my best option was to put that explicit javascript into a new javascript file and add its path to the html like:
<script type="text/javascript" src="/<script_path_here>"></script>
That way my functions that handles the static files on the .py would do their job.

trying to get the jquery Datepicker to function

I can't seem to get this working altho it is all on the website. I am not any good at js so that doesn't help either to be honest.
so I have basically done exactly the same as what they have on their website but just doesn't seem to function.
Signup open:<br><input type="text" name="reg_start" class="datepicker" value=""/><br>
Signup closed:<br><input type="text" name="reg_end" class="datepicker" value=""/><br>
This is there code what is the same as mine
<script language="javascript" src="protoplasm.js"></script>
<script language="javascript">
// transform() calls can be chained together
Protoplasm.use('datepicker')
.transform('input.datepicker')
.transform('input.datepicker_es', { 'locale': 'es_AR' });
</script>
Here are the includes I am doing
<link rel="stylesheet" href="jquery/datepicker/datepicker.css">
<script src="jquery/protoplasm.js"></script>
<script src="jquery/datepicker/datepicker_src.js"></script>
<script src="jquery/datepicker/datepicker.js"></script>
Here is the website I got the datepicker from
http://jongsma.org/software/protoplasm/control/datepicker
I understand that in their code they do not have the extra src includes but I put these in when I have been trying to get it working. I left them in the code as I think I will need to include them but not 100% as once again js isn't my strongest point because I am new to coding and need to get a lot more learning in js.
If anyone could help me out on how to get this working that would be great and I would appreciate any sort of help that you may be able to provide.
Thanks for reading
I managed to solve this problem I was having. What I done was I ended up putting the datepickers into .php file and then included it into my form. I added the js and css includes into this file as well and everything seems to work.
below I have included the link to the timepick I used and also my form, php include and the php what is needed to sort the date before sending to the database. If anyone finds this answer useful then please hit the +1 button.
Below is the link to jquery where I got the date and time picker from. The version I downloaded was 2.1.8 and you should be able to see the download button in right corner and it is a orange button.
http://plugins.jquery.com/datetimepicker/
Below is the .php file. I called it regend.php all of the jquery and css is included in the link above.
<link rel="stylesheet" type="text/css" href="jquery/master/jquery.datetimepicker.css"/>
<input type="text" value="date/time" id="regend" name="reg_end"/>
<script src="jquery/master/jquery.js"></script>
<script src="jquery/master/jquery.datetimepicker.js"></script>
<script>
$('#regend').datetimepicker();
$('#regend').datetimepicker({value:'date/time',step:10});
</script>
Below is the include that I added to my form. I added this within <form>.......</form>. I added it to the location I wished it to be displayed.
Signup close:<?php include("indexmodules/regend.php");?><br><br>
Below is the php code that I used before i sent it to the database to be saved.
$reg_end = preg_replace('#[^0-9]#i', '', $_POST ['reg_end']);
$unix_time = strtotime($reg_end);
$date2 = date("Y-m-d H:i:s",$unix_time);
All of the above code should help out any new beginner who is trying to get a date picker working on their website. If I enhance this code I will also post the updated version or version below this.
Thank you to the guys who commented on my original post and I hope this helps people out in the future.

display javascript inside html?

hi all im new to javascript and can't for the life of me get this to display in html
<html>
<head>
<body>
<script type="text/javascript" src="scripts/category.js"></script>
<select><script>
var makeModel = new DynamicOptionList("MAKE","MODEL","TYPE");
makeModel.addDependentFields("MAKE2","MODEL2","TYPE2");
makeModel.forValue("Ford").addOptions("Fiesta","Focus","Taurus"); // Add options if VALUE of option is selected
makeModel.forText("Honda").addOptions("Civic","Accord","Prelude"); // Add these options if TEXT of option is selected
makeModel.forValue("Ford").setDefaultOptions("Fiesta");
makeModel.forText("Honda").setDefaultOptions("Accord");
makeModel.forValue("Ford").forValue("Taurus").addOptions("2-door","4-door");
makeModel.forField("MODEL").setValues("Focus","Taurus");
makeModel.forField("TYPE").setValues("2-door");
makeModel.forField("MODEL2").setValues("Civic","Prelude");
makeModel.forValue("Toyota").addOptionsTextValue("Camry","10-CAMRY","Corolla","20-COROLLA","Celica","30-CELICA"); // Add options with values different from text
</script></select>
</body></head></html>
code from http://www.mattkruse.com/javascript/dynamicoptionlist/ example 3
at the first, you should know that, JavaScript is completely separate from Java!
so, by the way, if you want to write some JavaScript code inside html, you should use script tag inside your <body></body> tag like the example below:
<script type="text/javascript"> // your javascript code here! </script>
as an option, you can add external JavaScript file, and attach it to your script tag like example below:
<script type="text/javascript" src="example.js"></script>
for more information, check out this place.
The example you refer to makes use of an additional library called DynamicOptionList.js that you can find here.
According to the documentation you also need to initialize the library by calling initDynamicOptionLists() in the BODY onLoad attribute (or from somewhere else).

Date Picker has no method?

i have tried all i could think of to fix this problem. I have a inline datepicker on my site with an alternative input field. Here is my code:
$(function() {
$( "#datepicker" ).datepicker({
altField: "#dt",
});
});
and i get this error in chrome developer tools...oh, and it does not show up at all.
Uncaught TypeError: Object [object Object] has no method 'datepicker'
this is the alternate field:
<center><img class="board" id="header3" src="http://codtelevision.com/wpimages/CODherePART3.png"></img></center>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://www.codtelevision.com/date.css" type="text/css" media="screen">
<div id="datepicker"></div><br>
<input id="dt" style="outline:none;" readonly type="text"></input><br>
This problem might be due to jQuery being included more than once in your file.
I was experiencing this exact issue until I came across this thread. I found that one of my ASP include statements was bringing in a second version the main jQuery library later in my code. Removing the redundant include caused it to work perfectly.
Have you actually linked in the main jquery library as well? Also you are not setting the script type of the script file (this may not have much affect).
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js">
</script>
I have created a jsfiddle for your code, and it appears to work just fine. I think there is something else wrong. From what you have pasted I am still wondering if you have included the jquery library.
Live DEMO
Well, you don't have the jQuery libary included, only the jQuery UI lib.
Besides that, you need a jQuery CSS file to make a Datepicker, because .datepicker() adds the necessary classes to the objects it makes.
You can create your own UI CSS file on the fly here: http://jqueryui.com/themeroller/
You may be having a jQuery conflict. Give it a try in noConflict mode like so:
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$("#datepicker").datepicker();
});
})(jQuery);
</script>
The order in which we include js files matter.
http://www.irisclasson.com/2012/02/21/the-order-of-thingsobject-has-no-method-datepicker/
The above link solved my problem.

Can't execute javascript inside ajax loaded div

I'm using ajax to load some content inside a div, and this includes the jQueryVericalTabs plugin. However the styles won't work an I just see the unformatted text.
With FF's web developer tool I see that the rendered source is not linking to the styles on my CSS file despite being correctly called on the index page. I tried writing the CSS directly on index.php, on the content file, putting it inside the body tags, with and without the javascript (per plugin's demo), and also the suggestion on this post but none worked, don't know what else to try. Here's what my header looks like:
<link rel="stylesheet" href="css/jquery-jvert-tabs-1.1.4.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$("#accordion").accordion({
active: false,
autoHeight: false,
collapsible: true
});
});
$("#vtabs5").jVertTabs({
equalHeights: true
});
// add click events for open tab buttons
$("input[id^=openTab]").each(function(index){
$(this).click(function(){
openTab("#vtabs6",index);
return false;
});
});
function openTab(tabId,index){
$(tabId).jVertTabs('selected',index);
}
});
I tried a different plugin, verticalTabs, and the tab-titles show with the correct formatting, but no tab-content is displayed. I'd still prefer to use the first plugin though, the HTML is a lot cleaner.
I appreciate any input.
Its just a suggestion, i have never tried it, but according to the jquery documentations, you can achieve and handle ajax loaded contents using .live() event. Check the documentation here. Hope it helps and if you get an answer, please post it back
Thanks for your reply. I solved it with the suggestion from this post, in case someone finds it useful :)

Categories

Resources