Use JGrowl with Theme roller - javascript

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.

Related

JavaScript is not working when using Bootstrap 5.3

I am building a website on Visual Studio Code and I'm using Bootstrap 5.3, but the functions are not working - buttons not expanding, carousel not rolling, etc. I'm a beginner, so I've been struggling to understand why :(
Do someone know what's the issue or had the same problem?
Many thanks!
I used the CDN from here: https://getbootstrap.com/docs/5.3/getting-started/download/
This is what I have in head - these are followed by my own css file only.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
*I didn't start my own JavaScript yet, only have the html and css files.
You will need to include both of the required resources. Put them both in your <head> element.
The Bootstrap5 css (style) bundle
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
The Bootstrap5 JavaScript Bundle
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Source: https://getbootstrap.com/docs/5.3/getting-started/download/
If you edit your post to contain the html itself then we can have a look and see what the issue is. This will most likely lead to better answers for you.

JQuery added via NuGet Manager doesn't work

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

Confusion about Bootstrap 2 and jQuery 1.7.2

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>

Custom jQuery UI download with only datepicker doesn't include all css

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

Correct files for jQuery UI Autocomplete

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.

Categories

Resources