I need to include a warning before the user enters my website and wanted to use a modal window when the document is ready.
Here is the javascript:
$(document).ready(function(){
jQuery.noConflict();
$("#openModal").modal('show');
});
the HTML:
Open Modal
<div id="openModal" class="modalDialog">
<div>
<p>blah blah</p>
I agree
</div>
</div>
The modal window opens OK when I click the link so I'm happy with the CSS. I get the following error messages when I try to open it through document ready:
Uncaught TypeError: $ is not a function
and when I remove the jQuery.noConflict(); line I get the following error message:
Uncaught TypeError: $(...).modal is not a function
I've tried a couple of versions of JQuery and best I can tell that is the latest which I downloaded and installed. The rest of the heavily laden JQuery and Javascript works OK.
As I said in my previous question, I'm a hobbyist and my free advertisement free website is to be used as a sailing navigation aid.
Many thanks in advance,
Simon
jQuery.noConflict();
noConflict rolls back the $ variable to what ever it's previous value was. What this means is if another library was using the $ variable as it's identifier, no conflict restores this association. As a side effect though, $ is no longer jQuery. If you didn't intend for this to be the case, remove that line. Otherwise, you will either need to start referring to jQuery in your code after that point, or put use the jQuery ready to pass in jQuery as $ as it will for you
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){ //<-- ready() will pass in jQuery as the first argument, so you can accept it as '$' and then just code like normal
$("#openModal").modal('show');
});
</script>
Or
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#openModal").modal('show');
});
</script>
Or
<script type="text/javascript">
var jQ = jQuery.noConflict();
jQ(document).ready(function(){
jQ("#openModal").modal('show');
});
</script>
Related
I'm try to show 'addthis sharing' buttons when make ajax call. at the first call by ajax, buttons does not show, but when I reload whole page everything is OK, buttons is right place.
I searched a lots of fixes but no one works for me.
one of them is addthis.toolbox(); or window.addthis but when I use word addthis insde JavaScript tag, browser debugger writes error 'addthis is undefined'.
please give me smart advice what's happen and how can I fix it ?
Code (it's a partial view which load from ajax Call):
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx" async="async"></script>
<div class="addthis_sharing_toolbox"></div>
<script>
addthis.toolbox(); // addthis - is undefined
</script>
I have fixed this problem.
In my project I have 3 View level
_layout
View
_partialview
I had addthis Js reference and button's Div inside the _partialView.
But when I move Js reference to View and change Url(add - &async=1) it works fine and now 'addthis' - is defined (till here is undefined).
Hare is full example:
View:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-'yourPubId'&async=1"></script>
//Some Code
_partialView:
//Some Code
<div class="addthis_sharing_toolbox"></div>
<script>
$(function() {
addthis.init();
addthis.layers.refresh();
});
</script>
Good luck, everyone can use this perfect plugin 'addthis' when you load page by Ajax.
The async version of the addthis_widget.js script you're using was intended to be used for the newer dashboard tools, as the call to addthis.toolbox() is undefined because AddThis hasn't fully loaded yet. If you remove async="async" from the script, it should work.
Alternatively, you could add the async attribute this way:
<script src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxx&async=1" type="text/javascript">
Then before you call addthis.toolbox(), make sure you call addthis.init().
https://www.addthis.com/blog/2013/05/07/a-brief-history-of-using-addthis-dynamically/
-Matt
AddThis Support
I am new to Joomla 3.
I am trying to add a JQuery script to a joomla page that runs with the $ sign.
In the documentation, I found that I need to add JHtml::_('jquery.framework', false); to do that, but it isn't working.
I tried:
<?php
JHtml::_('jquery.framework', false);
?>
<div class="text">JQuery is not working</div>
<script type=text/javascript">
$(document).ready(function(){
$('.text').text("JQUERY ROCKS!");
});
</script>
And the usual:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="text">JQuery is not working</div>
<script type=text/javascript">
$(document).ready(function(){
$('.text').text("JQUERY ROCKS!");
});
</script>
But none works. Why?
The problem is your loading jQuery without no conflict mode. Joomla uses another JavaScript library Mootools which also used the $ symbol, which is why it isn't working. I would change your call to:
JHtml::_('jquery.framework');
And you could either use jQuery instead of $ for all your jQuery methods or wrap your existing code around an Immediately Invoked Function like so:
(function ($) {
// put your jQuery code here that used $
})(jQuery);
My javascript is loaded before on a blogger template here: http://fashioncherry.blogspot.no/ I've also tried to make sure it is only loaded once by adding the code:
function loadAdlinkAd(){
if( !adlinkAdLoaded ){
adlinkAdLoaded=true;
Before the post footer () I've added the code:
<a class='adlink-stylemag-btn' href='http://stylemag.no'> <img alt='stylemag' height='150' src='http://adlinkmedia.no/wp-content/uploads/2013/09/STYLEmag_knapp_150x150.png' width='150'/> </a>
<script type='text/javascript'>loadAdlinkAd();</script>
I tried the same thing on http://www.camillaabry.com/ and it worked great there. So I cannot understand why I get the uncaught referenceerror $ is not defined. I'm also a newbie when it comes to this, so I'm not sure how to fix it...:-(
$ is the variable jQuery is normally stored under. Include the jQuery library before you initialize the code that throws the error and it will probably work fine.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I'm trying the simplest example of getting datepicker to work, and I just can't seem to get it. There is almost nothing in my fiddle.
The top of my web page has this:
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript" />
<script src="~/Scripts/jquery-ui-1.8.11.js" type="text/javascript" />
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
Note: I tried putting the first two script lines in _Layout.cshtml, but I got an error (don't recall the error at the moment). That's why I just put it all on the one page.
And down a bit, in that same page, is this:
<td><input type="text" id="datepicker"></td>
When I click on the input control, nothings happens. However, when I click on the control in the fiddle, it works. What am I missing?
Also, you'll notice I'm using jquery 1.6.2 and jquery-ui 1.8.11. That's different than the fiddle example because fiddle didn't provide those versions as options. I'd be surprised if the version was the difference.
Script tag must have both opening and closing items. You cannot shorthand close them.
Instead of this
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript" />
do this
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript"></script>
I'm hoping this won't be the final answer, but I finally got the datepicker to display. After much trial and error, and research, I seem to have a jquery conflict, but I don't know why. Someone suggested something called non-conflict mode. So I changed my datepicker code to this:
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$("#endTime").datepicker();
});
})(jQuery);
</script>
And it worked. I'm not sure why, but it's finally at least working. If anyone can provide more insight, or a better answer, I'd gladly pick it.
The above example is explained in this answer: Basically, what I did was define a function that takes a parameter (the $) and then execute that function with jQuery as the parameter.
What I still don't understand though, is why this code won't work:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#endTime").datepicker();
});
</script>
If there was a conflict because of the $, and I replaced $ with jQuery, shouldn't it work?
The datepicker is pretty much straight forward why dont you use something like firebug in mozilla to see if it is throwing some error also date picker internally uses the Jquery theme roller so please download and add the jquery "css/custom-Theme/jquery-custom.css" css.
I can't get the noConflict() method to work properly. I've been searching online for hours and can't seem to get a solid answer. Here's what I have in my header...
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
<script type="text/javascript" src="js/jquery.js"></script><!-- jQuery script -->
<script type="text/javascript" src="js/page_scroll.js"></script><!-- JavaScript -->
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script><!-- jQuery easing plug-in -->
<script type="text/javascript">
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Use Mootools with $(...), etc.
$('someid').hide();
</script>
There's no other jQuery or JavaScript within my HTML (just what I have externally), so "placing anything that uses the $ variable in the noConlict method" is not an option.
Essentially what I'm trying to do is have slimbox and easing page scroll (for my navigation) to work together. The problem is of course one works when the other is removed and vice versa. Also, when I use the noConflict() method I get slimbox to work and not pagescroll, but when I remove the noConflict() method I get pagescroll to work and not slimbox. So apperently noConflict is doing something, I just don't know what that is or how to go about it.
If anyone can help me out, I'd appreciate it. Thanks.
when using other js libs that leverage the $ alias,
I have found reliable results by using
$.noConflict();
jQuery(document).ready(function($) {
// your jQuery code here i.e.
// jQuery('some-selector-expression').somefunction();
});
// prototype or mootools code that uses the $ alias works fine here
So are you saying it does not work when you declare $j? You can define your own alternate names (e.g. jq, $J, awesomeQuery - anything you want). Try calling it something w/o the $
Wrap it in an anonymous function:
(function($){
$(document).ready(function() {
// function here...
});
})(jQuery);
Seeing the exact code might help.