prototypeJS-bootstrap datepicker conflict - javascript

It seems that I'm facing a conflict between prototypejs and jquery. Here is a sample of code to illustrate that (I know it's not very nice, i've created it for debugging purposes only) :
<html> <head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script type="text/javascript" src="/CR0000086/js/jquery.js"></script>
<!-- bug here if I add this line : <script type="text/javascript" src="/CR0000086/js/prototype.js"></script> -->
<link rel="stylesheet" href="/CR0000086/css/bootstrap-datepicker.min.css">
<script type="text/javascript" src="/CR0000086/js/bootstrap-datepicker.min.js"></script>
</head> <body>
<!-- test1 with datepicker -->
<input type="text" id="example1" class="hasDatePicker"> <script>
$("#example1").datepicker(); </script>
<!-- test2 with pickadate-->
<div class="form-group"> <div class="input-group">
<input type="text" class="date-input form-control"/>
<span class="input-group-btn">
<button class="date-button btn btn-default" type="button"> # </button>
</span> </div> <div id="date-picker"> </div> </div>
<link rel="stylesheet" href="/CR0000086/css/pickadate.css">
<script type="text/javascript" src="/CR0000086/js/pickadate.js"></script>
</body> </html>
The page works well, I see my two datepickers, however, if I uncomment the line to load prototype.js, I get the following errors :
Cannot read property 'datepicker' of null
Cannot read property 'pickadate' of null
If you want to reproduce that bug, here is are the links to the packages I've used :
http://amsul.ca/pickadate.js/
https://uxsolutions.github.io/bootstrap-datepicker/?#sandbox
I've tried a lot of solutions, including JQuery.noConflict(), I guess that the solution has to deal with this bug : http://www.softec.lu/site/DevelopersCorner/BootstrapPrototypeConflict
But I must admit that's a too high level in javascript for me, I need help to make one of these datepickers working with prototypeJS loaded.
Could you help me ? Or if you have another solution (I need a datepicker), any idea would be appreciated
Best regards,
Julien

Related

Multiple errors when starting with Bootstrap

I am a beginner with this so it may be basic.
I have included all the files, and try to add a button.
I see the button but when clicked I get this error:
Uncaught ReferenceError: $ is not defined
the code :
<head>
<meta name = "viewport" content="width=device-width, initial-sclase=1">
<title>Create</title>
<link rel="stylesheet" type="text/css" href="Stylesheets/main.css"/>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<button class="btn btn-success" onclick="$(this).hide();">Clickit</button>
<! --- scripsts
<! --- bootstrap js files
<script src="Bootstrap/js/jquery.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<! --- my java script file
<script src="javascripts/main.js"></script>
</body>
Assuming this is all my code, I also get some other errors on consule like :
util.js:56 Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:56
at util.js:10
at bootstrap.min.js:6
at bootstrap.min.js:6
//and this one
Failed to load resource: the server responded with a status of favicon.ico:1
EDIT :
My project has folders structure: Bootstrap->js-> inside jquery.min.js and bootstrap.min.js, all under 1 folder which is my project.
To get bootstrap, go to http://getbootstrap.com/docs/4.1/getting-started/download/. There it tells you what you need to use bootstrap.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
You can also go to http://getbootstrap.com/docs/4.1/getting-started/introduction/ to get the html tags to put in bootstrap.
I think that's probably the problem. Try with those.
Edit:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button class="btn btn-success" onclick="$(this).hide();">Clickit</button>
</body>
I'm assuming you wanted that?
Well I guess it is too basic so some of you didn't see, my comment was wrong, it should be closed :
<!-- jquery files -->
Now it works.

Javascript is not working after implementing bootstrap

Hy Guys
I have a problem with my Javascript. Since I implementet Bootstrap it won't work anymore. Even simple things like an alert with an onclick function won't work.
Here is my code:
Implementet Scripts
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script type="text/javascript" src="../JS/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
Simple HTML
<!DOCTYPE html>
<html>
<head>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
Javascript
function test(){
alert('hallo');
}
I am programming since a bit know so it could be possible that I'm overlooking somthing simple but I'm not seeing it.
Make sure to put the JS function before the actual call in HTML. Also check your JS console to see if there are any errors there.
your javascript should load though, and you can just use this directly <script src="../JS/main.js"></script>
and ensure it is properly addressed i.e the JS is really uppercase.
and you could also put the main.js file above the bootstrap js file
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Try this:
Using <script type="text/javascript" src="JS/main.js"></script> as the link to your HTML, assuming the JS directory is in the same directory as your index.html file.
Put your links to external stuff in the HTML head. (It was unclear from your post whether or not you did.) You don't need to put them at the end of your HTML if you use $(document).ready(function(){ //do stuff here }); which you should use anyway because jQuery is already included in your project since you're using Bootstrap. (You can declare your test function outside of the document ready call, and should.)
I am pretty sure the Bootstrap CSS link you were using was corrupted (or something), so I changed that to use MaxCDN.
My guess is your CSS isn't working either. Try changing something obvious with it to check. The '..' in a link means to move 'back' one directory, so chances are the browser is looking for this file somewhere that it doesn't exist.
Take a look at this for more information about how to link to files, and consider trying an HTML validator.
Please let me know if you have any questions or if this doesn't work for you. When I started web development, I would spend hours trying to figure this stuff out.
So your HTML would look like:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<script type="text/javascript" src="JS/main.js"></script>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
For bonus points: if you need to see the console or to know anything about what is going on in either Firefox or Chrome, hit ctrl shift i and click around. If you think something has gone wrong, just hit the refresh button.
So after spending another hour figuring out what is wrong with the code I found out that the code is correct form day one. The problem is that I am using Firefox Mobile Emulator to test the app and this won't show any alert window. When I deactivate the emulation and run the website as normal the alert box will show up as the button is clicked. So now I have installed Chrome and tested it there (also with the mobile emulator) and it works fine. So Firefox knows the problem (as forums post show) but they didn't fix it yet.
Anyway thank you all for the help.

loading content from another php page into index php page

I have a #container1 div on index.php.
I am trying to load #container1 with the contents of a #container2 div from page1.php.
I cannot figure out why this isn't working.
My file hierarchy is like this:
Project
-Js
--myJs
-index.php
-page1.php
index.php:
<!doctype html>
<html dir="rtl">
<head>
<base href="..\project\">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Assistant" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/myJs.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
page1.php
<!doctype html>
<head>
<base href="..\project\">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Assistant" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/myJs.js"></script>
</head>
<body>
<div id="container2">
<div id="hello" style="height:100px; width:100px; background-color:blue;">
<p>hello<p>
</div>
</div>
</body>
</html>
myJs.js:
$(document).ready(function(){
$("#container").load("../page1.php #container2> *");
});
index otherwise shows up just fine. when I manually put the div #hello into #container1 it displays perfectly.
page1 also shows up well.
debugging didn't tell me much. the code successfully stepped into the function, but the hello is just not showing up.
the console is empty.
You are using jQuery Slim which does not contain any AJAX functionality.
To rectify your problem you need to include the full jQuery library and change the jQuery code slightly.
Replace your jQuery script tag with the following:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
Then, in myJs.js, change the code to this:
$(document).ready(function(){
$("#container").load("../page1.php #container2");
});
Notice that I have changed the string from ../page1.php #container2> * to what it is above. CSS selectors cannot be used in that way in the load function, instead you can just target one element.
The other thing you might need to do is remove the <base> tag. That's playing havoc with relative URLs.
The console will then tell you the problem Uncaught TypeError: $(...).load is not a function.

cannot read property swing of undefined

I am using the CDN version of materializecss
<html>
<head>
<!-- css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
</head>
<body>
<!-- page body -->
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>
and getting the following error in console
Uncaught TypeError: Cannot read property 'swing' of undefined
at materialize.min.js:6
(anonymous) # materialize.min.js:6
It looks like Materialize uses extend, so you'll need the full version of jQuery - the slim version will not work.
When you use material Design Bootstrap,
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" />
</head>
AND Put Script File at end of "body" section:
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js"></script>
</body>
Don't forget to use uncompressed version of JQuery as mentioned above.
Just change the Jquery.slim to a normal Jquery. It works with me
Use 'jquery-3.5.1.min.js' instead of 'jquery-3.5.1.slim.min.js'.
It worked for me.
Using the updated version of the CDN worked for me. In the MDBootstrap website
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.js"
></script>

javascript - how to get date locale to work?

I'm trying to get a localized implementation of a date picker to work, for a while now. I first attempted doing at the application I am working on, to no avail. So I decided to create a small html page and use it on my local httpd to try and get it running and get transfer the working code to my app.
I copied all the CSS and JS files, adjusted the path and tried the implementation. The file is the following:
As you can see, it's very simple. All I want to do here is learn how to use the bootstrap-datetimepicker, so I can manipulate data for my main application.
Problem is: if I use jquery-ui's notation $('#datepicker0').datepicker(); it works. But if I try to use $('#datepicker0').datetimepicker(); from https://github.com/Eonasdan/bootstrap-datetimepicker it doesn't.
I'm pretty sure it's a very basic mistake, but I'm looking at this piece of code for a while now and can't fathom what it is...
Can someone lend me a help here?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/beyond.min.css" />
<link rel="stylesheet" href="css/demo.min.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/moment/moment.js"></script>
<script type="text/javascript" src="js/moment/moment-with-locales.js"></script>
<script type="text/javascript" src="js/moment/pt-br.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#datepicker0').datepicker();
});
</script>
<div class="container">
<div class="row">
<div class="input-group date col-sm-3">
<input id="datepicker0" type="text" name="executionDate" class="form-control"></input>
</div>
</div>
</div>
</body>
</html>
I got it working. Solution was as simple as use the right file. How so? I was trying to download the libraries files by right clicking on it and saving it to my computer. What I got instead of the file was the html for the page. I discovered my stupidity quite by accident this morning and got the correct files, by download the zip for the library and, like in a magic trick, it started working... Thanks for your insights and hel

Categories