Display selectmenu inside jQuery confirm - javascript

i have a jQUery-confirm and im trying to display some content which have a select and my select.selectMenu() doesn't seem to work because it's being displayed inside the jQUery-confirm. It's just showing the default select.I can easily call .selectMenu() on a select outside the scope and it will change from select to a selectmenu. Example:
HTML:
<div id="aDiv">
<select id="aSelect"> <option value="1"> 1 </option></select>
</div>
<button type="button" id="aButton">Click </button>
CSS:
#aDiv {
display: none;
}
JS:
$(document).ready(function() {
$('#aSelect').selectmenu();
var divVar = $('#aDiv');
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: '',
onOpen : function() {
divVar.show();
this.setContent(divVar);
},
onClose : function() {
divVar.hide();
}
});
});
});
How do i make jquery-confirm show jquery ui widgets like selectmenu?

try this, you need to add html markup inside jconfirm and initialize the selectMenu plugin, its better to write the markup inside content instead of defining it outside.
$(document).ready(function() {
// $('#aSelect').selectMenu();
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: function(){
return $('#aDiv').html(); // put in the #aSelect html,
},
onContentReady : function() {
this.$content.find('#aSelect').selectMenu(); // initialize the plugin when the model opens.
},
onClose : function() {
}
});
});
});

Please try the following:
You have missed the # for id
$(document).ready(function() {
$('#aSelect').selectMenu();
var divVar = $('#aDiv');
$('#aButton').on("click", function() {
$.confirm( {
title: 'Hello',
content: '',
onOpen : function() {
divVar.show();
this.setContent(divVar);
},
onClose : function() {
divVar.hide();
}
});
});
});

Related

Why this code got error "Hi is not a function"

When user clicks on .step, the jquery will execute the hello function which works fine. The hello function will call hi function => I got error here: Hi is not a function
jQuery(document).ready(function( $ ) {
const form = {
init: function() {
$('.step').on('click', this.hello)
},
hello: function() {
console.log('Index: ', $(this).index()); // I can get the right index
this.hi(); // ERROR: Hi is not a function!
},
hi: function() {
console.log('HI')
},
}
form.init()
})
When I put the code like this, it works fine
jQuery(document).ready(function( $ ) {
const form = {
init: function() {
$('.step').on('click', this.hi) // Look here
},
hi: function() {
console.log('HI')
},
}
form.init()
})
Can you guys explain why?
Hi is not a function
Can any one explain why?
In this code
init: function() {
$('.step').on('click', this.hello)
},
hello: function() {
console.log('Index: ', $(this).index()); // I can get the right index
this.hi(); // ERROR: Hi is not a function!
},
you setup form.hello as an event handler for the click event. Within event handlers, this is the element that was clicked, as in:
$("button").click(function() { console.log(this.id); }
the button will (given this code) not have a .hi method.
How can we avoid the binding using Es6 or arrow function?
If you don't need to know which button was clicked, you can use an arrow function when defining the event handler:
init: function() {
$('.step').on('click', () => this.hello())
},
Example: https://jsfiddle.net/mcuh5awt/2/
Ideally, you'll want to access both the button and the form class, this is possible in two ways, the first is to change how you define your class, but keeping with how you've done it, we can add a new property self to store a reference to its ...well... self...
jQuery(document).ready(function( $ ) {
const form = {
self : {},
init: function() {
self = this;
$('.step').on('click', self.hello)
},
hello: function() {
console.log('Index: ', $(this).index());
self.hi();
},
hi: function() {
console.log('HI')
},
}
form.init()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class='step' type='button'>
Step 1
</button>
<button class='step' type='button'>
Step 2
</button>
</div>
As this becomes a public property of your class, you may prefer a different name in this case eg form to match the class name.

CollapseSidebar is not a function

I am writing a script for a project, it has a function to collapse or open the sidebar on click on hamdurger icon but when I click it gives me error
TypeError: this.CollapseSidebar is not a function
The following is my code:
(function($) {
'use strict';
var Prtm = {
Constants: {
LEFTMARGIN:'315px',
COLLAPSELEFTMARGIN: '63px',
},
PrtmEle:{
BODY: $('body'),
SIDEBAR: $('.prtm-sidebar'),
SIDENAV: $('.sidebar-nav'),
MAIN: $('.prtm-main'),
HEADER: $('.prtm-header'),
CONTENTWRAP: $('.prtm-content-wrapper'),
CONTENT: $('.prtm-content'),
PRTMBLOCK: $('.prtm-block'),
FOOTER: $('.prtm-footer'),
HAMBURGER: $('.prtm-bars'),
},
Init:function(){
this.BindEvents();
},
BindEvents:function(){
this.PrtmEle.BODY.on('click',this.PrtmEle.HAMBURGER,function(){
this.CollapseSidebar();
});
},
CollapseSidebar: function(){
this.PrtmEle.HAMBURGER.toggleClass("prtm-sidebar-closed is-active");
this.PrtmEle.BODY.toggleClass("prtm-sidebar-closed is-active");
this.PrtmEle.SIDEBAR.toggleClass('collapse');
},
};
Prtm.Init();
})(jQuery);
When I change this.CollapseSidebar to Prtm.CollapseSidebar it works properly. What I am doing wrong here and how it can be resolved?
Why it do not work? Because a function() binds its own this.
One thing you can do is to use Arrow function which do not bind its own this - like this:
BindEvents:function(){
this.PrtmEle.BODY.on('click',this.PrtmEle.HAMBURGER,() => {
this.CollapseSidebar();
});
}
Inside you click function this will refer to the window - so either you can create a temporary variable like the below or use the arrow function:
BindEvents:function() {
let $this = this;
this.PrtmEle.BODY.on('click',this.PrtmEle.HAMBURGER,function() {
$this.CollapseSidebar();
});
}

Problems with binding popover to dynamic content

Currently my websites consists of multiple pages, which are loaded dynamically. On certain pages there are some buttons which I would like to have popovers. I read some documentation and stackoverflow answers on popovers and dynamic content. However, I can't seem to get it working. Below you'll find my code:
Javascript
$(document).ready(function(){
var popOverSettings = {
trigger: "click",
placement: 'bottom',
container: 'body',
html: true,
//content:" <div style='color:red'>This is your div content</div>"
content: function () {
return $('#popover-content').html();
}
};
$('div').on('DOMNodeInserted', function () {
$(".pop-function").popover(popOverSettings).click(function(e) {
e.preventDefault();
});
//$(event.target).find('button[rel=popover]').popover(popOverSettings);
});
try {
$("button[rel=popover]").popover(popOverSettings).click(function(e) {
e.preventDefault();
});
} catch (err) {}
});
The HTML button
<button class="pop-function" rel="popover">Button</button>

Object [object Object] has no method 'discussionwidget'

I am a beginner to JQuery & Html. I am creating a widget called discussion wizard. while running, I am getting below error : Object [object Object] has no method 'discussionwidget'
Not sure, what could be reason of the same :
Please help :
widget code :
(function ($, undefined) {
$.widget('ui.discussionwidget', {
options: {
userName : 'Arti Agarwal',
title:"",
width:"",
containerClass:".ui-content-gutter"
},
_create: function () {
//Create the structure of Discussion Widget
var widgetStructure = '<div class="ui-discussion hGridPx_120 wGridPx_10"><div class="ui-discussion-header hGridPx_18 wGridPx_10"></div><div class="ui-discussion-container hGridPx_100 wGridPx_75"><div class="ui-discussion-messages hGridPx_75 wGridPx_74"> <ul id="ui-discussion"></ul></div> <div class="ui-discussion-input hGridPx_10 wGridPx_10"><label class="input hGridPx_10 wGridPx_60"><span>Add or reply to a comment...</span><textarea id="message" class="hGridPx_10 wGridPx_60"></textarea></label><div class="ui-discussion-send hGridPx_10 wGridPx_10"><span class="ui-image-addchat">Add</span> <span class="ui-image-replychat">Reply</span></div></div></div></div>';
widgetStructure.appendTo($($(this.options.containerClass));
},
widget: function () {
return this.element;
},
});
var CloseDiscussionWidget = function() {
}
})(jQuery);
I am calling it from a page :
<script>
(function ($) {
//Load discussion history fist time
$(document).ready(function () {
GetCurrentUserDetails('arti.agarwa');
Discussionwidget = $('.ui-content-gutter').discussionwidget({ containerClass: ".ui-content-gutter" });
} (jQuery));
</script>
There were few syntax errors in the code, Try
(function ($, undefined) {
$.widget('ui.discussionwidget', {
options: {
userName: 'Arti Agarwal',
title: "",
width: "",
containerClass: ".ui-content-gutter"
},
_create: function () {
// Create the structure of Discussion Widget
var widgetStructure = $('<div class="ui-discussion hGridPx_120 wGridPx_10"><div class="ui-discussion-header hGridPx_18 wGridPx_10"></div><div class="ui-discussion-container hGridPx_100 wGridPx_75"><div class="ui-discussion-messages hGridPx_75 wGridPx_74"> <ul id="ui-discussion"></ul></div> <div class="ui-discussion-input hGridPx_10 wGridPx_10"><label class="input hGridPx_10 wGridPx_60"><span>Add or reply to a comment...</span><textarea id="message" class="hGridPx_10 wGridPx_60"></textarea></label><div class="ui-discussion-send hGridPx_10 wGridPx_10"><span class="ui-image-addchat">Add</span> <span class="ui-image-replychat">Reply</span></div></div></div></div>');
//Missing ) here
widgetStructure.appendTo($($(this.options.containerClass)));
},
widget: function () {
return this.element;
},
destroy: function () {
$.Widget.prototype.destroy.call(this);
}//extra , here
});
var CloseDiscussionWidget = function () {
}
})(jQuery);
//missing }) here
(function ($) {
// Load discussion history fist time
$(document).ready(function () {
//GetCurrentUserDetails('arti.agarwa');
Discussionwidget = $('.ui-content-gutter').discussionwidget({
containerClass: ".ui-content-gutter"
});
})
}(jQuery));
Also the dom ready block can be written as below - there is no need to use the wrapper function
// Load discussion history fist time
jQuery(function ($) {
GetCurrentUserDetails('arti.agarwa');
Discussionwidget = $('.ui-content-gutter').discussionwidget({
containerClass: ".ui-content-gutter"
});
})

Calling functions with click handlers in ExtJS 4

I have a function inside a toolbar, let's call it:
Ext.define('MyArchive.Toolbar', {
search: function() {
console.log('searching');
}
}
Now I'd like to call this function when clicking a button. So I'm adding some click handlers in the afterRender on the toolbar setup:
afterRender: function() {
Ext.getCmp('search-button').on('click', this.search);
}
However, this doesn't work and I ultimately need to go the full route of:
afterRender: function() {
Ext.getCmp('search-button').on('click', function() {
quick_search();
)};
}
Any particular reason why my first attempt doesn't apply the click handler as I expect?
Thanks for any explanations or refactorings! Additional patterns/idioms welcome...
Next try:
var panelOverall = new Ext.form.FormPanel({
html: 'bla',
search: function() {
console.log('searching');
},
buttons: [
{
text: 'Moo',
id: 'button1',
handler: function(){
//window.destroy();
}
}
],
afterRender: function() {
Ext.getCmp('button1').on('click', this.search);
}
});
is working for me.. am I missing something?

Categories