trying to get the jquery Datepicker to function - javascript

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.

Related

How to resolve type name conflict from two separate Javascript libraries?

Let me start by saying that I'm primarily a C# programmer who only extremely rarely ventures into JavaScript.
I can write myself some JS code as long as its mostly plain. I can handle jQuery and the odd self-sufficient 3rd-party library, but couldn't code myself out of a wet paper bag when React, Angular, Bootstrap and others enter the scene. I'm also not used to using npm or any other similar package manager.
It was never really my job nor interest, so I never went there. Whenever I code some JS, I reference the required JS files in my <script> tags and then use them as directly as possible.
I'm currently creating a very simple proof of concept web app which will have its client parts rebuilt by competent people sooner or later. But in the mean time I have to provide the bare-bones functionality that will serve as a rough guideline for the next team to take over, whenever that might be.
I've picked two libraries that each seem easy to use and get the job done, when used separately. But when I try to use them together on the same page, I run into a problem: they both use the same name for their main type, and I can't seem to disambiguate between them.
These are the libraries:
JSON Editor
JSON Schema Form Builder
They both declare a type named JSONEditor, which I can use as long as I don't reference both of the libraries at once.
So far I've tried to solve this by using modules and import-ing the type using different names, but it didn't work... I got a bunch of errors in the console about "import not found" and "e is not defined", which makes me think I'm tackling this wrong.
How would I solve this using plain JS if possible?
UPDATE: As suggested, I'm providing a minimal example that demonstrates my use:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link href="/lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="editor" style="width: 300px; height: 200px;"></div>
<div id="form"></div>
</div>
<!--library 1: https://github.com/josdejong/jsoneditor -->
<script src="/lib/jsoneditor/jsoneditor.min.js"></script>
<!--library 2: https://github.com/jdorn/json-editor -->
<script src="/lib/jsonform/jsonform.min.js"></script>
<script>
// Library 1: The JSON code editor.
var editor = new JSONEditor(document.getElementById("editor"), { mode: "code" });
// Library 2: The form builder.
var form = new JSONEditor(document.getElementById("form"), {
ajax: true,
schema: {
$ref: "/api/describe/service/test"
}
});
</script>
</body>
</html>
If I comment out the use of one library (whichever), the other works as expected and the content is displayed at the respective target <div>. But if I try both at once, as shown above, nothing is displayed, and the following error is output to console:
Uncaught TypeError: t is undefined
This happens at the var editor = new JSONEditor line, which makes me think that the type from the second library overwrites the first and causes the problem.
This is understandable to me and isn't the issue per-se. The issue is that I don't know how to import the two JSONEditor types so that they can be referenced separately.
The maintainer of the code editor (JSON Editor, not JSON Schema Form Builder) has addressed and closed an issue about exactly this in the past: https://github.com/josdejong/jsoneditor/issues/270
His recommended solution is something like the following:
<script src="assets/jsoneditor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorA = JSONEditor;
</script>
<script src="assets/json-editor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorB = JSONEditor;
</script>
If you must use script tags this is probably the way to go.

How can I pass an html img element to a javascript included file?

This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.
What I did so far:
PHP and HTML:
<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
<script src='js/jquery-1.11.3.js'></script>
<script src='js/jquery-ui-1.11.4.js'></script>
<img id='tick' src='tick.png'>
<script type='text/javascript' src='js/success_failure_signs.js'>
success_failure(tick);
</script>";
}?>
Javascript file has this code:
function success_failure(tick){
var x = tick;
x.fadeIn();
x.fadeOut(1000);
}
The browser's console doesn't give any error.
It seems that the function success_failure doesn't get the image.
What is wrong on this code and how can I fix it?
Thank you in advance!
You haven't defined tick when you make your function call. Try this...
<script type="text/javascript" src="js/success_failure_signs.js">
</script>
<script type="text/javascript">
var tick = $("#tick");
success_failure(tick);
</script>
EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.
maybe passing the image to the script is the wrong way of thinking here.
Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.

JQuery Tooltip Troubleshooting

First off, I'm new to JQuery, so sorry if this is something simple and I'm just missing it.
I'm attempting to use the jquery plugin called "tooltipsy" (http://tooltipsy.com/).
The end goal is for this look here: http://screencast.com/t/4AghhAI7dL
This is what currently happens: screencast[dot]com/t/mBAIm67lM6W1 (sorry, couldn't post more than two links)
Inside my code I've copied it nearly identically from the examples, but I can't seem to get it to work. This is running inside a twig template file for a WordPress website, but I don't believe that, that should affect it (of course I could be, and probably am wrong)?
<a class="hastip" title="Phone Here">(ES?)</a>
<script type="text/javascript" src=" {{ wp.get_stylesheet_directory_uri() }}/assets/js/tooltipsy.min.js">
$('.hastip').tooltipsy();
</script>
It links to the CSS file in the header information, and the link works just fine.
My issue is the "tooltip" itself does not appear and I can't figure out why?
Would appreciate any and all help, thanks!
<a class="hastip" title="Phone Here">(ES?)</a>
<script type="text/javascript" src=" {{ wp.get_stylesheet_directory_uri() }}/assets/js/tooltipsy.min.js"></script>
<script>
$(document).ready(function() {
$('.hastip').tooltipsy();
});
</script>
You can't have code inside a script src.

jQuery Tagit! Not working

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

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.

Categories

Resources