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.
Related
I know this stuff has been asked before...but I am a bit confused about this still. I have my index.html file and I have a script tag linking to my external JS file. If I only have that script tag the JS does nothing, but if I copy the JS and paste it into it's own script tag in the HTML header it works just fine. There's gotta be something I'm missing with Jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.0.js"></script>
<link rel="stylesheet" href="FinalProjectCss.css">
<title>Dustin Naylor - Final Project</title>
<script src="FinalProjectJS.js"></script>
<script>
$(document).ready(function(){
$(".section").click(function(){
if($(this).next().is(":hidden")) {
$(this).next().slideDown("fast");
} else{
$(this).next().hide();
}
});
});
</script>
</head>
<body>
<span class="section">Click Me</span>
<div class = "hiddenDiv">
Oh hey there.
</div>
</body>
</html>
So the code in the last script tag that is Jquery stuff is exactly copied into a separate JS file named FinalProjectJS.js. In the current state this code is in it works as desired, but when I remove that chunk of code from the html file it doesn't work....Sorry for my nubishness, I'm rather new and any help would be great! thanks!
Can you write the contents of your jquery file: FinalProjectJS.js? The syntax for calling the external file seems to be correct. So I'm thinking it might be something about the path or the jquery external file contents itself. Make sure you don't include <script> tags on that file. Here's a sample.
Another thing, last time I've worked with jquery, I can't directly see it take effect when both my files are stored locally. It had to be stored in a server first, then accessed by my PC. Only then did my jquery took effect. A dev I worked with added some text to my Google Chrome's properties (target) so that even if my file is not stored in a server, I can see jquery take effect even if both my HTML and jquery files are stored locally.
...sorry, I'm not allowed to comment yet to clarify your post.
You must add the jQuery script tag before FinalProjectJS.js for the jQuery snippet to work.
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">
i'm trying to make cloudinary direct upload working but something in the documentation is missing... here are the steps i'm doing:
Controller:
/**
* MyaccountController
*
* #description :: Server-side logic for managing myaccounts
* #help :: See http://sailsjs.org/#!/documentation/concepts/Controllers
*/
var cloudinary = require('cloudinary');
cloudinary.config({
cloud_name: 'MyCloudName',
api_key: 'MyAPIKey',
api_secret: 'MyAPISecret'
});
Now this is my layout:
<!--SCRIPTS-->
<script type="text/javascript" src="/js/dependencies/sails.io.js"></script>
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="/js/jquery.cloudinary.js"></script>
<script src="../node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script>
<script type="text/javascript">
cloudinary.cloudinary_js_config();
var cloudinary_cors = "http://" + window.location.host + "/cloudinary_cors.html";
console.log(cloudinary_cors);
cloudinary.uploader.image_upload_tag('photo', { callback: cloudinary_cors });
$(".photo").cloudinary_fileupload();
// Using the config function
var cl = cloudinary.Cloudinary.new();
cl.config( "MyCloudName", "MyAPIKey");
/*
$.cloudinary.config({ cloud_name: 'MyCloudName', api_key: 'MyAPIKey'});
</script>
My form:
<form action="" method="post" enctype="multipart/form-data" class="upload_form">
<div class="form-group">
<label>Foto de perfil</label>
<input type="file" name="photo" id="photo" class="photo">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Cargar</button>
</div>
</form>
I don't get why it isn't working, in the docs it says Cloudinary's jQuery plugin requires your cloud_name and additional configuration parameters to be available. Note: never expose your api_secret in public client side code.
To automatically set-up Cloudinary's configuration, include the following line in your view or layout:
cloudinary.cloudinary_js_config()
This is done...
Direct uploading from the browser is performed using XHR (Ajax XMLHttpRequestâ) CORS (Cross Origin Resource Sharing) requests. In order to support older browsers that do not support CORS, the jQuery plugin will gracefully degrade to an iframe based solution.
This solution requires placing cloudinary_cors.html in the static folder of your Node application. This file is available in the html folder of Cloudinary's Javascript library. The following code builds a URL of the local cloudinary_cors.html file:
Done...
Direct upload file tag
Embed a file input tag in your HTML pages using the image_upload_tag view helper method.
The following example adds a file input field to your form. Selecting or dragging a file to this input field will automatically initiate uploading from the browser to Cloudinary.
cloudinary.uploader.image_upload_tag('image_id', { callback: cloudinary_cors });
this is what i don't get... this is the uploader? how should i use it? and then i don't know what else to do, i'm using different docs to make it work but nothing helps... I hope anyone who did this can help me, thanks!
On controller initialize cloudinary as
var uploader = cloudinary.uploader.image_upload_tag('image_id', { callback: cloudinary_cors, html: { multiple: 1 } });
and pass it to view and render it over there,
<%-uploader%>
then use jquery to get data:
$('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {}
you can use this script to bind the data to some hidden fields inside your form and
cloudinary-fileupload will be generated when <%-uploader%> is rendered
In addition to CodeBean's answer, note that it seems that there are different ways of using Cloudinary that are mixed here (in the original code as was in question).
Controller
As far as it can be seen from here, the MyaccountController controller doesn't do a thing:
You're requiring "cloudinary" - presumably from npm install, which creates an instance of the jQueryless Cloudinary class.
The variable is local to the controller so has no effect on the rest of the code
View:
Only one of these lines is required (preferably the second one):
<script type="text/javascript" src="/js/jquery.cloudinary.js"></script>
<script src="../node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script>
This method returns a string with the <script> tag. The string should be then embedded in the HTML code. It is a server side code.
Here, it does nothing.
cloudinary.cloudinary_js_config();
If you're using the jQuery File Upload code, you should refer to $.cloudinary. cloudinary was never defined in your layout.
Now you're creating a jQueryless instance, which you don't use afterwards.
var cl = cloudinary.Cloudinary.new();
cl.config( "MyCloudName", "MyAPIKey");
Finally, there's an open-ended comment with the code you were supposed to use in the beginning of the whole script:
/*
$.cloudinary.config({ cloud_name: 'MyCloudName', api_key: 'MyAPIKey'});
Regardless of CodeBean's response, you still need to config $.cloudinary.
I have recently discovered the new trend of including all .js script at the end of the page.
From what i have read so far seems pretty ok and doable with an exception.
The way I am working is using a template like:
<html>
<head>
<!-- tags, css's -->
</head>
<body>
<!-- header -->
<div id="wrapper">
<?php
include('pages/'.$page.'.php');
?>
</div>
<!-- footer -->
<!-- include all .js -->
</body>
</html>
Now, if I want to use this example on my page http://www.bootply.com/71401 , I would have to add the folowing code under my jquery inclusion.
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
But that would mean I either use that in every page - even if I do not have use for it, either generate it with php in the $page.'php' file and echoing it in the template file, after the js inclusion.
I am sure though, better methods exist and I don't want to start off by using a maybe compromised one.
Thanks!
Please avoid using inline scripts as they are not good maintainable and prevent the browser from caching them. Swap your inline scripts in external files.
Fore example you could put all your JavaScript in one file an check the presence of a specific element before initialize the whole code. E.g.:
$(document).ready(function(){
if($('.thumbnail').length) {
// your thumbnail code
}
});
A better way to execute "page specific" JavaScript is to work with a modular library like requirejs. You can modularize your scripts depending on their functionality (like thumbnails.js, gallery.js etc.) and then load the necessary script(s) depending e.g. on the existence of an element:
if($('.thumbnail').length) {
require(['ThumbnailScript'], function(ThumbnailScript){
ThumbnailScript.init();
});
}
The best way you can go is create a separate file for this code.
Let's name it app.js. Now you can include it under the jQuery inclusion.
<script type="text/javascript" src="app.js"></script>
This will prevent code repeat.
One more thing, pull all the code in $(document).ready(). Here is an example. So your app.js file will look like this:
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
})
I'm having trouble implementing Pagify in Wordpress.
First I tried this tutorial to register the script in function.php. It worked, the pagify.js is included, and the jQuery too. FYI, I'm using wp-foundation themes, its has built-in jQuery.
and then I put the script to call pagify in the header.php before wp_head() and also i try after wp_head():
$('#page_holder').pagify({
pages: ['home', 'about', 'contact'],
default: 'home' // The name of a page or null for an empty div
});
I created HTML just like in pagify tutorial, and my div container id is also named page_holder. but it doesn't work.
Second I tried to register the script above to function.php, but still didn't work.
Third, I modified pagify.js, add noConflict() but still not work.
I am always facing issues with adding jquery scripts to my WP sites and still don't find a general way to resolve them, so I do like you, I try the different possibilities: nonConflict, register scripts and enqueue them, call them in simple script tags before wp_head or before wp_footer in header.php and footer.php respectively....
The last situation was to try to implement the Tag-it jquery plugin with my wordpress site and I resolved it by calling the script in my footer.php (I tell you beacause you didn't mention you tried this option in your question).
Example with Tag-it plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo get_bloginfo('template_directory'); ?>/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myTags").tagit(
{
fieldName: "tages[]"
}
);
});
</script>
<?php
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
wp_footer();
?>
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