Fairly new to jQuery, trying to use Autocomplete. Went to http://jqueryui.com/download to build my own download, selected "Autocomplete" from the "Widgets" section. This caused "Core", "Widget", and "Position" to auto-check.
I downloaded my custom jQuery UI, and followed the instructions and included the following in my page.
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.7.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
But, Autocomplete would not function, and firebug revealed no errors. I decided to include:
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
And everything started working! But I am confused, I thought the jQuery builder would have included all necessary code and styling for Autocomplete to function correctly, so why have I needed to add these extra includes to get it working? Thanks
It appears you are using the autocomplete plugin, rather than the one from jQuery UI
See this question for the difference.
Related
I have this project where I imported bootstrap like this on my header:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
Everything was working fine until I decided to add a carousel.
The carousel shows up properly, but it doesn't rotate and the buttons on the side doesn't work.
I also noticed that my colapsed menu also don't work.
On my research I saw a lot of people suggesting to use reactstrap and some other third party libraries, but I'm wondering if it's possible keep using the link stylesheet.
From what I read the problem is with the jquery and bootstrap being imported in the wrong order, which might cause those elements to break.
Solved the issue using another website as reference:
https://www.bootstrapcdn.com/
Instead of using
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
I used
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
And it is finally working.
but it doesn't rotate and the buttons on the side doesn't work. I also noticed that my colapsed menu also don't work.
there is no functionality on your pages if dont import the js scripts.
add these scripts also and your buttons and collapse menu should start working
**for css link**
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
I'm building my first WordPress plugin and I've run into some trouble. I first created a custom page template with a contact form I created. It used Bootstrap JS, Bootstrap CSS, jQuery, and then jQuery UI for a datepicker. It also used an external stylesheet. Everything worked really well. I'm now turning this page template into a plugin so that I can use it across several websites easily, and to easier pull the theme's default design. I originally added Bootstrap JS, Bootstrap CSS, jQuery, and jQuery UI in the head of the .php file like this:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/chem-dry-contact/style.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
I now understand this isn't the best way to link to external stylesheets and scripts for WordPress, and especially not for a plugin. But it did work before.
I was able to get all my html to show up as a plugin with a shortcode and everything, but it doesn't look like all of the external files are working. Here's how I set it up with WordPress's enqueue function:
function add_plugin_scripts() {
wp_enqueue_script( 'jquery-3.2.1', '/wp-content/plugins/ChemDry-PriceQuote/jquery-3.2.1.js', array(), null, true);
wp_enqueue_script('bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array(), null, true);
}
add_action( 'wp_enqueue_scripts', 'add_plugin_scripts' );
function add_plugin_styles () {
wp_enqueue_style('style', '/wp-content/plugins/ChemDry-PriceQuote/style.css');
wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
}
add_action( 'wp_enqueue_scripts', 'add_plugin_styles' );
My external CSS is working, and I think my Bootstrap CSS is working, but I don't think jquery and Bootstrap JS are working. The functionality it provided when I had it set up as a page template is no longer working, and when I tested it out by commenting out the jQuery line in my page template version, I got the exact same result as I'm getting now. I did already try to deregister jquery first and then try to reregister it...but that didn't work either.
Now I've read that WordPress comes with jQuery...but if I don't add it, I don't get the functionality I need. I've looked all over Stack Overflow for an answer but I can't quite seem to get this to work.
Again, this is my first plugin I've developed so I'd appreciate any help. Thank you.
Wordpress come with jquery and you should use JQuery keyword instead of $ at beginning of your statements.
You can check Following links aswell :
jquery is not defined in wordpress
not defined using JQuery
also You can Take look at following link for make $ work again:
Using ‘$’ instead of ‘jQuery’ in WordPress
Try this, order matters, usually you want to load style first. Then you need jQuery loaded, then load bootstrap since bootstrap require jQuery.
// A $( document ).ready() block.
$(document).ready(function() {
console.log("jQuery ready!");
});
<head>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/chem-dry-contact/style.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
I'm working on an ASP.NET Web Forms CRUD project and need to show a confirm dialog box every time a user want to perform an action over the SQL database.
For that purpose I' decided to use Jquery and searching in the internet I found a very good example but they use CDN for Jquery-Jquery ui- Jquery ui themes like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
and works fine, but I decided to use a newest version of Jquery always using CDN so I changed the above code for this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
and still working fine...my problem comes when I add the Jquery-Jquery ui from NuGet and then add those packages to my web form and comment the other lines that use CDN
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/jquery-ui-1.11.4.js"></script>
<link href="Content/themes/base/dialog.css" rel="stylesheet" />
If I do that the confirm dialog box doesn't appear at all but why? I guess that just change the source of the Jquery package from CDN to the one that the NuGET package added to my project shouldn't have to created any problem.
Could you please help me and tell me why my confirm dialog box doesn't show up.
this is what I got in my project after added Jquery ui via NuGet
In my jsfiddle below:
http://jsfiddle.net/5fs7e6wt/5/
I manually import jQuery 1.7.2 from a Google CDN but as you can see the dropdown does not work.
However, when I change jsfiddle to use jQuery 1.7.2 onLoad within the left side bar, the drop down now appears to work.
I am fairly confused as to what changed in my dev environment or what jsfiddle is pulling in additionally that I am missing?
Any advice on how to debug this situation would be very appreciated.
Just looking at the new "sources" pulled in from the page source is fairly counfusing as it is mixed with the pre-existing jsfiddle javascript.
My imports look like:
<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/2.2.2/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/2.2.2/js/bootstrap.min.js" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
This is happening because you are including bootstrap before jQuery. If you check out the console you will see that you are getting the error:
Uncaught TypeError: undefined is not a function
Simply switch the script elements like in this fiddle.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/2.2.2/js/bootstrap.min.js" charset="utf-8"></script>
I want to know how to use my Jquery UI theme with JGrowl. The site says it can be done. The questions is answered here:
How do I themeroll jGrowl
and the asker seemed happy with the answer, however I did what the solution said: include the Jquery ui css file.
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<link type="text/css" href="css/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jgrowl/jquery.jgrowl.js"></script>
<link rel="stylesheet" href="jgrowl/jquery.jgrowl.css" type="text/css"/>
But it does not use my custom theme. I tried not linking to the jgrowl.css file, but then it did not work right at all.
Any ideas? Thanks!
You express concern that it might actually be working, but with unexpected coloring. To test this, switch to a different jQuery theme, and see if the jGrowl elements change.
If they don't, check the jGrowl version. According to http://forum.jquery.com/topic/jgrowl-question, version 1.2.0 doesn't use jQuery-ui themes automatically, but version 1.2.4 does.