jQuery & jQuery UI code not running - javascript

I have jquery UI and jQuery linked on my page, and I have the following jQuery UI code currently on the page:
$(function() {
$( "#draggable" ).draggable({ containment: "parent"});
});
I want to have this jquery code run below the code above:
function new() {
$("p").append("<strong>Hello</strong>");
}
But for some reason it's not working when both are in the same place and as a newbie to jQuery, I'm not sure what's wrong (both of the codes were mostly copied and pasted from the site). I suspect it's something to do with the function statement.

new is a reserved keyword in javascript (it's used as syntax to create new objects) so you can't use it as a function name. Try using a different name for your function, for example:
function mynew() {
$("p").append("<strong>Hello</strong>");
}

Related

Equivalent of jQuery's contents().find() chained methods in pure JS

So I've been trying to do the following bit of code without jQuery:
$(".parent-class").contents().find(".child-class").css("color", "red");
I'm trying to edit the styles of an embedded Twitter feed and I could only do that by getting the module's child nodes using this snippet: $(".twitter-timeline").find(".timeline-Tweet-text").css("margin-bottom", "-10px"); for whatever reason. It is necessary that the pure JS code mimics this functionality.
My full js function is:
// Change the style of the tweets after the module loads.
window.addEventListener('load', function () {
$(".twitter-timeline").contents().find(".timeline-Tweet-text").css("margin-bottom", "-10px");
});
Thanks for taking the time to read.
You can try the following way:
document.querySelectorAll(".twitter-timeline .timeline-Tweet-text").forEach(function(el){
el.style.marginBottom = "-10px";
});

Show/Hide on click with Javascript not working

I'm trying to use a basic on click to expand so when the user clicks on the title it shows more details but for some reason it isn't working.
Here is the page in question:
http://eftposnz.wpengine.com/integrated-eftpos/pos-vendors/
I'm not sure if the issue is with the code itself or if I'm not using it correctly.
Here is the code I'm using:
$(document).ready(function () {
$(".content").hide();
$(".show_hide").on("click", function () {
var txt = $(".content").is(':visible') ? 'Read More' : 'Read Less';
$(".show_hide").text(txt);
$(this).next('.content').slideToggle(50);
show_hide.preventDefault();
});
});
Any help would be greatly appreciated and please let me know if you need any further information.
I'm not familiar with WordPress, but it seems like the jQuery version it's using (or that you chose to use) won't let you use $ from the get-go.
As you can see on the jQuery version included on your page, jQuery.noConflict() is called at the end, making $ unavailable.
Here's what you can do, as an easy/safe workaround:
(function($) {
// your code using $ here
})(jQuery);
The site is currently using wordpress, so there is not "$" defined in the window context, instead of this, is only avalible via "jQuery".
A solution can be:
(function($){
$(function(){
/* Here your code */
});
})(jQuery);
Your jQuery is known in the window's scope as jQuery instead of $, which is a result of jQuery.noConflict().
Now you could create $ yourself by writing this above your code:
var $ = jQuery; // yuck!
But that would pollute your global scope!!
It would be cleaner to wrap your code into an anonymous function like this:
(function ($) {
// your code
}(jQuery));

Troubleshoot jquery error with dropdown menu

There is some sort of jquery conflict that I can't get my head around. I have a script that's working by itself here:
http://www.pitestiretailpark.ro/working.html
When the same script is inserted into a Joomla page (along with html/css code), the dropdown menus don't work.
http://www.pitestiretailpark.ro/test/
I am not a programmer, I know my HTML but have little knowledge of jquery. The standalone script has been copied from another page, stripped bare (but working!) and when I try to insert into Joomla, it stops working.
there is another lib using the $ sign as a function.Use the jQuery.noConflict() method like this;
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
// your code
});
replace $ in your scripts with jQuery, also call it on document ready :
jQuery(document).ready(function() {
jQuery('.div_btn_menu').hover(
function() {
jQuery(this).children('.div_sous-menu').css('top',$(this).children('.btn_menu').height()+'px')
jQuery(this).css('z-index',10000000)
jQuery(this).children('.div_sous-menu').stop(true,true).fadeIn(200)
},
function() {
jQuery(this).css('z-index',1)
jQuery(this).children('.div_sous-menu').stop(true,true).fadeOut(200)
}
);
})

conflict between two jquery plugins with same function name

I am working in a large site that has 2 conflicting jquery plugins included for doing autocmplete.
1) jquery.autocomplete.js (not part of jquery ui) that does :
$.fn.extend({
autocomplete: function ...
2) jquery.ui.autocomplete.js (from the latest jquery ui library), that also uses the autocomplete keyword.
$.widget( "ui.autocomplete", { ...
Is there a way to specify that i am using only the second, jquery.ui widget
when calling
$( "#tags" ).autocomplete ...
without changing the 2 files?
As the second autocomplete is using the $.Widget method of registering itself with jQuery it'll be easiest to change the behaviour of the in-house one.
You won't be able to load both of them without making some sort of change to the jQuery object between the two script loads because they'll just conflict with (or overwrite) each other.
I would try this:
<script src="jquery.autocomplete.js"> </script>
<script>
// rename the local copy of $.fn.autocomplete
$.fn.ourautocomplete = $.fn.autocomplete;
delete $.fn.autocomplete;
</script>
<script src="jquery-ui.autocomplete.js"> </script>
Which will then make:
$().autocomplete()
use the jQuery UI version, and
$().ourautocomplete()
use your local version.
I tried to do it with the tabs function of jQuery UI, it should work the same for you.
A function is technically a js object, so you could simply rename it :
$.fn.tabs2 = $.fn.tabs;
delete $.fn.tabs;
$("#tabz").tabs2({});
Hope that helps!
Edit
Like Alnitak suggested, you also need to delete the previous function's name.
Also, I think .fn is required.

mootools and jQuery conflict

I've got a simple form in a page that is loading Mootools and JQuery. JQuery is in no conflict mode, which seems like it ought to cause no problems.
There's a form element called "name"--
<input class="required" id="sendname" name="sendname" value="">
And I'm trying to attach a click event to it using Mootools to update something else when the name box is clicked:
$('sendname').addEvent('click', function(e){
// do stuff.
});
The problem is that the click event never gets added.
This error appears on load:
Uncaught TypeError: Cannot call method 'addEvent' of null
When I try to interact with the element in a js console, I get the following error:
> $('sendname').setProperty('value', 'test');
TypeError: Object sendname has no method 'setProperty'</strike>
EDIT: the previous was fixed by loading a newer Mootools. However, the click event still isn't functioning properly, though it throws no errors or warning.
This code works fine in almost any situation I've used it in. I assume there's some issue with jQuery conflicting, but the fact that the $ notation works seems to confirm that noConflict mode is operational. Any ideas?
You are targetting the element wrongly... I think this has nothing to do with a possible conflict.
In this case you need to add the hash for an id or a period for a class, like this:
$('#sendname').addEvent('click', function(e){
// do stuff.
});
Notice the # in #sendname
MooTools has Dollar Safe mode that automatically releases the $ to other libs as long as MooTools is loaded last.
If Dollar Safe mode is active, you need to use:
document.id('SomeElementID').someMethod()
What is happening in the example you are giving, is that you're using jQuery to select the element, and a MooTools method on the result. The thing is, jQuery returns the jQuery object which has no such 'addEvent' method on it. MooTools works on the actual elements so you need to select them with a MooTools query method first: $ == document.id or $$ == document.search
You can cache document.id to a var for convenience if you want:
var $M = document.id;
$M('sendname').addEvent(...)
As described in the comments to the OP, the issue was the load-order of the jQuery/Mootools scripts. The jQuery noConflict was being loaded too late, and causing problems. Please see jsfiddle -- http://jsfiddle.net/uSwzL/1/
Without any problem even loading jquery.js after other $ based library loaded:
<script>$=function(){alert('hell');}</script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$.noConflict();
$();
alert(jQuery.trim(' hello '));
</script>
Even in php framework html template:
<script>
function on_doc_ready()
{jQuery(function($)
{$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
}
);
}
function load_jquery_ui()
{var s2=document.createElement('scr'+'ipt');
s2.setAttribute('onload', 'on_doc_ready();');
s2.src='/app/idm/statics/jQuery/js/jquery-ui-1.10.0.custom.min.js';
document.getElementsByTagName('head')[0].appendChild(s2);
}
function load_jquery_after_mootools()
{var s1=document.createElement('scr'+'ipt');
s1.src='/app/idm/statics/jQuery/js/jquery-1.9.0.js';
s1.setAttribute('onload', '$.noConflict();load_jquery_ui();');
document.getElementsByTagName('head')[0].appendChild(s1);
}
load_jquery_after_mootools();
<script>

Categories