I have this function but it gives me function statement require name onStop function
<script type="text/javascript">
jQuery( function($) {
$('#Hnav, #Nnav').NestedSortable(
{
accept: 'sort',
noNestingClass: "no-children",
helperclass: 'helper',
autoScroll: true,
onChange: function(serialized) {
onStop : function(){
$('#output').html($(this).id);
},
nestingPxSpace : '0'
}
);
});
</script>
In this context, this refers to the DOM element on which the onStop event happens. A DOM element is not a jQuery object.
jQuery $(this) object doesn't have id property, while the DOM elements do. So, use either:
$('#output').html(this.id);
or:
$('#output').html($(this).attr("id"));
And don't forget to close the bracket in onChange handler function.
Collectively there are two problems in the code,
The inner function was not closed properly.
Used id property of element that is not supported by the jQuery selector.
The modified code is,
jQuery( function($) {
$('#Hnav, #Nnav').NestedSortable(
{
accept: 'sort',
noNestingClass: "no-children",
helperclass: 'helper',
autoScroll: true,
onChange: function(serialized) {
//A empty function
},
onStop : function(){
$('#output').html($(this).attr("id"));
},
nestingPxSpace : '0'
}
);
});
There was a bracket missing and you use wrong syntax getting id try this,
$('#output').html($(this).id);
should be
$('#output').html(this.id);
or
$('#output').html($(this).attr(id));
jQuery(function($) {
$('#Hnav, #Nnav').NestedSortable({
accept: 'sort',
noNestingClass: "no-children",
helperclass: 'helper',
autoScroll: true,
onChange: function(serialized) {
alert("changed");// Changed to fix
},
onStop: function() {
$('#output').html(this.id);
},
nestingPxSpace: '0'
});
});
Related
The questionis more of a debuggin/syntax error rather approach .
I have a function(modal confirmation) defined in an external js file which returns a value as such :
function confirmation(question) {
var defer = $.Deferred();
$('<div></div>').html(question).dialog({
autoOpen: true,
modal: true,
title: 'Confirmation',
buttons: {
"Delete All Items": function() {
defer.resolve("true"); //this text 'true' can be anything. But for this usage, it should be true or false.
$(this).dialog("close");
},
"Cancel": function() {
defer.resolve("false"); //this text 'false' can be anything. But for this usage, it should be true or false.
$(this).dialog("close");
}
},
close: function() {
//$(this).remove();
$(this).dialog('destroy').remove()
}
});
}
Now when I try to call the function inside the $(document).ready(function() {; I get an Uncaught Reference Error.
All the necessary files have been included in calling script. I would like to understand why is this and how i can solve the issue?
Except for the missing curly-brace at the end, and assuming your "necessary files" include jquery-ui, there doesn't seem to be anything wrong with your function. See this jsfiddle, which does not generate any error.
Perhaps the problem is elsewhere in your code? It may help if you can post a Minimal, Complete, and Verifiable example.
References:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.css" />
Script:
$(document).ready(function() {
confirmation("What's all this, then?");
});
function confirmation(question) {
var defer = $.Deferred();
$('<div></div>').html(question).dialog({
autoOpen: true,
modal: true,
title: 'Confirmation',
buttons: {
"Delete All Items": function() {
defer.resolve("true"); //this text 'true' can be anything. But for this usage, it should be true or false.
$(this).dialog("close");
},
"Cancel": function() {
defer.resolve("false"); //this text 'false' can be anything. But for this usage, it should be true or false.
$(this).dialog("close");
}
},
close: function() {
//$(this).remove();
$(this).dialog('destroy').remove()
}
});
}
I cant seem to figure out how to use it - the following has no output
dom.create(
'a',
{
className: 'collapse',
onClick: function(){
console.log("something");
}
},
topPane.containerNode );
also tried
function testMe(){console.log('something')}
dom.create(
'a',
{
className: 'collapse',
onClick: testMe
},
topPane.containerNode );
Also this:
function testMe(){console.log('something')}
dom.create(
'a',
{
className: 'collapse',
onClick: testMe()
},
topPane.containerNode );
the last one causes testMe to be activated when the page is loaded (and not activated after click)
Try this:
var link = new domConstruct.create("a", {
href: "http://www.google.com",
innerHTML: "Google",
'class': "myClassHere",
onclick: "window.open(this.href); return false;",
onkeypress: "window.open(this.href); return false;"
});
or
var link = new domConstruct.create("a", {
href: "http://www.google.com",
innerHTML: "Google",
'class': "myClassHere",
onclick: function() { console.log("onclick"); },
onkeypress: function() { console.log("onkeypress"); }
});
I think that onClick is used when dealing with dojo/dijit/dojox widgets. But when setting events for html elements using the dojo/dom-construct, it is all lowercase (ie "onclick").
use dom-attr(domelement,"click",function(){})
it works
dom element is the one on which the click functionality is to be set.
in your example create a using dom construct and then use the above
I created a custom component with an XTemplate like this:
initComponent: function () {
this.initLayout();
this.callParent();
},
initLayout: function() {
var me = this;
var mainTpl = this.getTemplate();
Ext.apply(me, { html: mainTpl.apply() });
},
in my template i got some placeholders where i want to render some textfields...
so i tried to accomplish this in an eventhandler like that:
listeners: {
render: function () {
var usrPlaceHolder = Ext.query('li.LoginUsername');
if (usrPlaceHolder) {
Ext.create('Ext.form.field.Text', {
renderTo: usrPlaceHolder
});
}
}
}
my Ext.query function does find the correct DOM Element, though the Ext.create with the renderTo config does throw the following Error:
Uncaught TypeError: Cannot call method 'createRange' of undefined
if you need any further information like a callstack or something.. dont hesitate to ask..
Ext.query returns an array, which is probably not what renderTo is expecting.
Use Ext.dom.Query.selectNode instead, or Ext.query('li.LoginUsername')[0], or anything that will give you a single element.
Pure jQuery version:
$('select#register-type').live('change', function () {
console.log($(this).val());
});
Backbone view delegate event version:
App.Views.register = new (Backbone.View.extend({
tagName: 'section',
id: 'content',
template: _.template($('script.register').html()),
render: function () {
this.$el.html(this.template);
return this;
},
events: {
'change select#register-type': 'type'
},
type: function (event) {
// i want to console.log the current option selected...
}
}));
How can I achieve that? It seems i cant use $(this) like the jquery version, and this is referred to the register view object...
Use event.target
type: function (event) {
$(event.target).find('option:selected').val();
**OR**
$(event.target).val();
}
I'm trying to keep working onStart and onComplete methods using FancyBox (jquery plugin)
I can't seem to get any of it to work for me. Do any of you know what I'm doing wrong?
This is what I'm trying now:
$(document).ready(function(){
//top-menu highlight link
$(".photos").removeClass().addClass("active");
$("a.fancybox").fancybox({
'overlayShow' : true,
'0opacity' : true,
'overlayOpacity': 0.6,
'onStart' : function(){ $("body").css('overflow','hidden');},
'onComplete': function(){ $("body").css('overflow','auto');}
});
});
I was also trying to get onStart working...
I got fancybox v2.1.5, but when I do a search on 'onStart' in the javascript file it's not found. When I searched for '.trigger' I found: 'beforeLoad'
Maybe this could help someone out, in my case this is what I needed :)
I also saw there was an 'onReady' triggered somewhere which can be used instead of the 'onComplete' I guess!
P.S. I used it like this
$("a.popup").fancybox({
beforeLoad: function() {
return window.confirm('Continue?');
}
});
FancyBox < version 2
FROM EXAMPLE (fancybox.net):
$("#various7").fancybox({
onStart: function() {
return window.confirm('Continue?');
},
onCancel: function() {
alert('Canceled!');
},
onComplete: function() {
alert('Completed!');
},
onCleanup: function() {
return window.confirm('Close?');
},
onClosed: function() {
alert('Closed!');
}
});
EDIT: 06-2015
FancyBox >= version 2
FROM EXAMPLE (fancyapps.com):
$("#various7").fancybox({
onUpdate: function() {
alert('update!');
},
onCancel: function() {
alert('cancel!');
},
onPlayStart: function() {
alert('play start!');
},
onPlayEnd: function() {
alert('play end!');
},
beforeClose: function() {
alert('before close!');
},
afterClose: function() {
alert('after close!');
},
beforeShow: function() {
alert('before show!');
},
afterShow: function() {
alert('after show!');
},
beforeLoad: function() {
alert('before load!');
},
afterLoad: function() {
alert('after load!');
}
});
Notice that the callback methods are different in fancybox2. It uses beforeLoad, afterShow, etc. Please consult fancybox2's documentation here.
Try this:
$(document).ready(function(){
$("a.fancybox").fancybox({
'overlayShow' : true,
'opacity' : true,
'overlayOpacity': 0.6,
'onStart' : function(){
$("body").css('overflow','hidden');
},
'onCleanup': function(){
$("body").css('overflow','auto');
}
});
});
fancybox onStart onComplete status not working working with jquery 1.9.1 try jquery 1.6.4.