I'd like to add the autocomplete to a joomla componenet that I'm developing
I used JQuery
I follwed this exemple
http://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/
The exemple work well but there is some problem
1 - When you add JQuery with joomla you have some problems with mootlools
wen I added Jquery with this code
if(!JFactory::getApplication()->get('jquery'))
{
JFactory::getApplication()->set('jquery',true);
$document = JFactory::getDocument();
$document->addScript(JURI::root() . "administrator/components/com_tkcontrack/assets/js/jquery.js");
}
if(!JFactory::getApplication()->get('jquery.min'))
{
JFactory::getApplication()->set('jquery.min',true);
$document = JFactory::getDocument();
$document->addScript(JURI::root() . "administrator/components/com_tkcontrack/assets/js/jquery.min.js");
}
if(!JFactory::getApplication()->get('jquery-ui.min'))
{
JFactory::getApplication()->set('jquery-ui.min',true);
$document = JFactory::getDocument();
$document->addScript(JURI::root() . "administrator/components/com_tkcontrack/assets/js/jquery-ui.min.js");
}
I got some Javascript error with Mootools(thank's to firebug)
2 - Even I think some css does not work any more
Well can someone please help me to add autcomplete to joomla componene, and how to add JQuery to Joomla without having problem
Actually I tried to add JQuery with onther way, edit this file
\libraries\joomla\document\html\renderer
but I does not work I have problem with Jquery then
Not sure on what the error is exactly but it sounds like a conflict.
First of all, you're using the correct method to ensure your scripts only get imported once, however check Firebug see see if you only have 1 of each being imported just in case. You will then need to call noConflict like so:
$document = JFactory::getDocument();
$document->addScriptDeclaration( $noconflict );
What you could also do to import jQuery and jQuery UI only once and in noConflict mode is use the jQuery Easy Plugin:
One of the features that will apply to you is:
places jQuery libraries after MooTools calls for perfect compatibility
Hope this helps
replace above code with
JHtml::_('jquery.framework');
and in your js file start like this
jQuery(document).ready(function($) {
// your code goes here
}
to get ready-made code you can use JQUERY UI in ready function
Related
Need help.
I am creating a div inside body>div>div .
Reference: Creating div in a nested class using javascript
Here's a link to my jsfiddle https://jsfiddle.net/41w8gjec/6/
Here's a link to the site https://bastioul.com/index.php/category/portfolio/ so you can see how the div is nested
Here's the wordpress classes.
class="archive category category-portfolio category-3 custom-background custom-header-image layout-two-column-default no-max-width"
>
class="hfeed"
>
class="site-content"
Here's my actual javascript code
function bastioul() {
var dirty = document.querySelector('.category-portfolio>.hfeed>.site-content');
var grime = dirty.appendChild(document.createElement('div'));
grime.id = "portfolionav";
}
if (window.addEventListener) {
window.addEventListener('load', bastioul, false);
} else {
window.attachEvent('onload', bastioul);
}
No error messages in jsfiddle. I don't know enough about coding as far as php/javascript/jQuery is concerned to go through wordpress js files to see if something is negating my code. Not exactly sure of the root cause of my problem because it works in jsfiddle, and there is no console errors when i inspect page. I tried to research about the problem, but it is a pretty specific problem.
Not exactly sure what else to try.
Okay I solved the issue by editing the functions.php for the wordpress theme I was using.
This is my php code.
wp_register_script( 'portfolionav', get_template_directory_uri() . '/portfolionav.js', array(), true );
wp_enqueue_script('portfolionav');
wp_footer();
note
I had a issue with this code because it automatically selects a library.
I used browsers inspect console error to show me what library was being called, and it was /themes/primer.
I uploaded my javascript to this library.
And now my script is running correctly on my Wordpress site.
I was not aware I had to add script by calling it in my php file when using Wordpress.
I am developing a few portlets for Liferay 6.2 and chose to use jQuery along with a number of extensions.
I seem to be getting problems where the extensions I need are attaching themselves to a jQuery instance which is not the one that I am using in the portlet. So when I come to use an extension it is not available.
My code looks something like this. The liferay-portlet.xml contains
<header-portlet-javascript>/js/jquery-1.12.2.min.js</header-portlet-javascript>
<header-portlet-javascript>/js/jquery-ui.min.js</header-portlet-javascript>
<header-portlet-javascript>/js/datepicker-de.js</header-portlet-javascript>
<header-portlet-javascript>/js/calendar.js</header-portlet-javascript>
In the JSP
<script type="text/javascript">
var $CAL;
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
$CAL = jQuery; // create my own jQuery handle
...
$CAL.datepicker.setDefaults($CAL.datepicker.regional['de']);
// $CAL.datepicker is NULL !
});
</script>
I'm not sure, but I think the datepicker function gets attached to a different jQuery instance. The debugger lists about 7 instances of jQuery and 3 instances of jQueryUI that different portlets are loading.
After some research, we tried to load all JS libraries in the theme but some portlets are loaded before the theme. Our current attempt is to load them in a 'hook'. That is still on-going.
At the moment we are creating all the portlets ourselves. It is possible that in the future we might want to use a 3rd party portlet so I'm wondering what the best approach is.
EDIT
The answer below and How to resolve two jquery conflict?
show how to avoid the conflict when multiple jQuerys are loaded. Is this best practice in Liferay portlet development? I assume that the are times when requiring different jQuery versions is unavoidable but is it normal for each portlet to simple load its' own copy of jQuery?
$CAL = jQueryis the issue. Define $CAL as variable referencing jQuery.noConflict()
Create a different alias instead of jQuery to use in the rest of the
script.
var j = jQuery.noConflict();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$CAL = jQuery.noConflict();
$CAL(document).ready(function() {
$CAL.datepicker.setDefaults($CAL.datepicker.regional['de']);
console.log("jQuery version ", $CAL().jquery);
$CAL("body").datepicker("dialog", "10/14/2016");
});
</script>
I'm getting the dreaded Uncaught TypeError: undefined is not a function error in WordPress. I'm pretty sure that I've properly enqueued my jQuery script (it's showing up properly in the footer), and I've used the following no conflict wrapper at the start of my code: jQuery(document).ready(function($) {.
I've tried replacing all $ variables with jQuery. I've also defined var $j = jQuery; and replaced all $ variables with $j.
There are other theme-generated jQuery scripts on the page that are working (embedded, not enqueued), so there might be potential conflicts, but I'm not sure how to debug that.
Any help appreciated. I can provide link to the site if that helps.
EDIT
I had this script working perfectly earlier from within the jQuery UI Widgets plugin, but that plugin seemed to be causing serious issues (crashed my site). So I disabled the plugin, and I haven't been able to get the script working since.
That doesn't look quite right. Try this
(function($) {
$(document).ready(function() {
console.log("dom is ready");
});
})(jQuery);
You could try this:
var j = jQuery.noConflict();
j(document).ready(function () {
...
//replacing all Dollar Signs with the j
});
That's what worked for me
I have a site using a "widget" (from http://healcode.com) that includes the script.aculo.us JavaScript library. The problem is that the site I'm building is on WordPress, so there's the classic jQuery vs script.aculo.us conflict.
I know that I need to run jQuery in .noConflict() mode, but I must be getting the syntax wrong. When I assign the $ to jQuery .noConflict as follows, it still shuts down the script.aculo.us functions:
var $ = jQuery.noConflict();
$(document).ready(function () {
//#nav-main dropdown effects
$('#nav-main ul li').hoverIntent(function () {
$(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
$(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
I know that I am assigning the $ to jQuery in .noConflict() mode, and I assume that script.aculo.us (which loads via a widget in the main body, therefore AFTER jQuery) is trying to re-assign the $ back to script.aculo.us.
How can I assign the $ to jQuery in a way that the later-loaded script.aculo.us library won't conflict? I've already tried the following without any success (the following code causes script.aculo.us to work, but jQuery to fail):
jQuery(document).ready(function () {
//#nav-main dropdown effects
jQuery('#nav-main ul li').hoverIntent(function () {
jQuery(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
jQuery(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
EDIT
The debug console output for the above code is:
Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' (anonymous function) so the document.ready fails because it's assigned to jQuery, which is somehow not loading properly...
EDIT 2
Both of the 2 (at the time of this update) answers posted below do nothing to address the issue I'm struggling with. Perhaps they are technically correct, but they do not address my issue.
This worked for me so that I can have jQuery and script.aculo.us/Prototype working well together. Credit goes to codeimpossible for this lifesaver!
Instead of:
jQuery(document).ready(function () {
// Code to run on DOM ready
}); // End document.ready
Try this:
( function($) {
// Code to run on DOM ready
} )( jQuery ); // End document.ready
I found the solution VERY surprising!
First of all, using the $j = jQuery.noConflict(); mode did not work.
Second, calling jQuery.noConflict(); at the head did not work.
The method that did work was this one: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/
Oddly, the Coda Slider 2.0 plugin does not automatically do noConflict so it turned out that IN ADDITION to the problems listed above, I needed to wrap that plugin in .noConflict(); as well. Shout out the the author of the blog post, not sure why other noConflict(); calling methods didn't work, but I'm glad I found the post.
Assigning jQuery right back to $ doesn't do anything.
Either assign jQuery to a different variable:
var j$ = jQuery.noConflict();
Or don't assign it to anything:
jQuery.noConflict();
Try this:
<script src="url to jquery"></script>
<script type="javascript">jQuery.noConflict();</script>
<script src="url to scriptaculous"></script>
I can't use new version of jQuery. I have 1.6.
I have in head ui.core, ui.slider, but when I call $('#min-price').slider(); I am getting:
$("#min-price").slider is not a function
I call it when DOM is ready.
Could somebody help?
code added
$(document).ready(function() {
var wrapper = $('<span id="snuper-sorter-wrapper">Sort by: </span>'),
dealsDivCopy = $('.view .views-row').clone(true),
dealsCategories = $('#deals-categories'),
currentDeals = Drupal.settings.snuper_filter.deals;
$('#min-price').slider(); //here it fails
//rest of code
How can I examine that jquery ui object exists and get function list?
EDIT
My fault, I need to load it in different way.
In Drupal you add jQuery element this way:
jquery_ui_add(array('ui.slider'));
Check if you have loaded both libraries (jQuery and the jQueryUI) and also make sure the paths to the files are correct.