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
Related
I started a new laravel project yesterday. Followed the guide from a guy in YouTube. Everything works until I installed laravel auth and realised none of the bootstrap dropdown works, even when i create new one from their website.
Firstly, I thought I messed something up in composer, because I wanted to get rid of the bootstrap and later I changed my mind and put it back. Then I created new Laravel project and started from scratch again. Even then my dropdowns are not working. I checked for similar problems in google, but none of them helped.
By default, bootstrap.bundle.js is not included inside your Laravel app. To add this:
Open 'resources/js/bootstrap.js' file and add the following code at the last line of this file.
require('bootstrap/dist/js/bootstrap.bundle');
Hit save and run npm run dev and it will work finally!
I had the same problem, it is happening because bootstrap has not been loaded properly and I simply solved it by pasting this link in <head> tag
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
and paste this in the lower region of <body> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
It seems that your bootstrap has not been loaded at all. Make sure that you include the bootstrap library in your view. If you are using WebPack, check if you are mixing the external libraries into one, and include that one in your main blade file.
Sometimes you should change order of script links for that to work
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 puzzled by what might be a really simple thing to do or understand.
So I downloaded jQuery UI package with the themeroller with these settings. I only chose datepicker and a custom theme. But when I try to use it the calendar doesn't look right:
I'v added these to my test page:
<link rel="stylesheet" type="text/css" href='Scripts/jqueryui/css/redmond/jquery-ui-1.10.4.custom.min.css' />
<script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/jquery-1.11.0.min.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/jqueryui/js/jquery-ui-1.10.4.custom.min.js") %>'></script>
After investigating more, I realized that the custom css file that was created for me doesn't include the class .ui-datepicker.
So the question is, is this by design? Do I need to add still another base jquery ui css-file? I did not see any mention of this if that is the case. And why is that not included in my package if I need to do that? Or is this a bug? What should I do to get a package that only includes the css/js I need for only datepicker?
Thanks!
Try using this Google Code source
EDIT:
got it. Simply u need to select the Widget tick like this page
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.
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.