We Keep Coding

Bootstrap x-editable. Change data type programmatically (Remove select2 data-type)

I'm, using bootstrap x-editable https://vitalets.github.io/x-editable/index.html
This is my html code:
<a href="#" data-name="category" class="addon" data-value="{{$cat->id}}"
data-pk="{{$cat->id}}" data-type="select2" data-title="Favor llenar los campos"></a>
javascript code:
$('.addon').editable({
placement: 'bottom',
mode: 'inline',
showbuttons: false,
source: categories,
select2: {
width: 200
},
display: function (value) {
var elem = $.grep(categories, function (o) {
return o.id == value;
});
$(this).attr('data-value', value);
$(this).parent().parent().find('.btnEdit').attr('href', '/wizard_product/' + product_id + '/category/' + value + '/edit');
return $(this).text(elem[0].text);
}
});
But. I want to change programmatically to normal x-editable element without the select2 options.
I have tried with jquery to change the data-type attribute of the a element to text, but it does not work.
$('a.addon').attr('data-type', 'text');
Also tried:
$('a.addon').select2('destroy');
Also tried:
$('a.addon').editable({type: 'text'});
But neither options work. select2 is still active.
How can I remove select2 options of x-editable?
Can you help me please

You will have to combine the things that you've tried - destroy the default X-editable instance, change the data-type value, and reinstate X-editable on that element.
The most simple implementation/example would be:
$('.addon').editable('destroy').data('type', 'text').editable({type: 'text'});
In practice, you'll have to put your other settings back when you re-apply X-editable as text:
$('.addon').editable('destroy');
$('.addon').data('type', 'text');
$('.addon').editable({
placement: 'bottom',
mode: 'inline',
showbuttons: false,
source: categories,
type: 'text',
display: function (value) {
var elem = $.grep(categories, function (o) {
return o.id == value;
});
$(this).attr('data-value', value);
$(this).parent().parent().find('.btnEdit').attr('href', '/wizard_product/' + product_id + '/category/' + value + '/edit');
return $(this).text(elem[0].text);
}
});
Edit:
I've put together a demo that mirrors your setup as best I could tell and it seems to work:
var categories = [{
id: 'html',
value: 'html',
text: 'html'
}, {
id: 'javascript',
value: 'javascript',
text: 'javascript'
}];
setupSelect2();
$('#useSelect2').click(function() {
$('.addon')
.data('type', 'select2')
.editable('destroy');
setupSelect2();
});
$('#useText').click(function() {
$('.addon')
.data('type', 'text')
.editable('destroy');
setupText();
});
function setupSelect2() {
$('.addon').editable({
mode: 'inline',
placement: 'bottom',
showbuttons: false,
source: categories,
select2: {
width: 200
},
display: function(value) {
var elem = $.grep(categories, function(o) {
return o.id == value;
});
$(this).attr('data-value', value);
if (elem[0])
return $(this).text(elem[0].text);
}
});
}
function setupText() {
$('.addon').editable({
mode: 'inline',
placement: 'bottom',
type: 'text',
showbuttons: false,
source: categories,
display: function(value) {
var elem = $.grep(categories, function(o) {
return o.id == value;
});
$(this).attr('data-value', value);
if (elem[0])
return $(this).text(elem[0].text);
}
});
}
<script src="https://vitalets.github.io/x-editable/assets/jquery/jquery-1.9.1.min.js"></script>
<link href="https://vitalets.github.io/x-editable/assets/select2/select2.css" rel="stylesheet" />
<script src="https://vitalets.github.io/x-editable/assets/select2/select2.js"></script>
<link href="https://vitalets.github.io/x-editable/assets/bootstrap300/css/bootstrap.css" rel="stylesheet" />
<script src="https://vitalets.github.io/x-editable/assets/bootstrap300/js/bootstrap.js"></script>
<link href="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<link href="https://vitalets.github.io/x-editable/assets/select2/select2-bootstrap.css" rel="stylesheet" />
<h3>Select 2</h3>
<br>
<br>
<button id="useSelect2" class="btn btn-default">Use Select2</button>
<button id="useText" class="btn btn-default">Use Text</button>

simple jquery dialog box can't create input

may any one help me create a input box inside my dialog box? i am using the jquery-ui.js. this is my code:
$(document).on("click",".savebtn",function(). {
var id = $(this).attr("id");
$.dialog({
title: "Activation date ",
content:"Activation date ",
create: function() {
$("#inputBox").val();
},
closeBack:function(){
$.dialog.message({
content: "The id is "+ id
});
},
buttons:[
{
text:"Click me"
}
]
});
});

You can try this:
Fiddle
HTML:
<div id='dialog' style='display: none;'>
<input type="text" />
</div>
<button>
Click Me!
</button>
Jquery:
$(document).ready(function() {
$("button").click(function() {
$("#dialog").dialog({
resizable: false,
modal: true,
title: "My Awesome Title",
buttons: {
"Do Something": function() {
alert("Do something if I was clicked.");
},
Cancel: function() {
alert("Dialog Canceled");
$(this).dialog("close");
}
}
});
});
});

Customize hardcoded jquery context menu

My working jquery code for displaying context menu is like this:
<script type="text/javascript">
$(function () {
$.contextMenu({
selector: '#mytv a',
callback: function (key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {
name: "Closing on Click",
icon: "edit",
callback: function () { return true; }
},
"cut": {
name: "Open after Click",
icon: "cut",
callback: function () { return false; }
}
}
});
});
</script>
Instead of hardcoded Menu I want menu to be displayed from this:
<ul id="myMenu" class="contextMenu">
<li class="copy">Add</li>
<li class="edit">Edit</li>
<li class="delete">Delete</li>
<li class="quit separator">Cancel</li>
</ul>
I am not good with with jquery any help would be strongly appreciated.

Working with Knockoutjs and jCarouselLite

sorry to be this forward, but I need to see a working example of Knockoutjs working with jCarouselLite (in jsFiddle please). I can't seem to make it work. Here is an earlier question for me regarding this:
Having trouble making Knockout and jCarouselLite to work
Now, what I did was try it out bare bones outside of my actual project. Here is the code I have:
the HTML:
<h2>Index</h2>
<div id="index-root">
<div class="house-row" data-bind="slide: true">
<div class=" house-row-nav"></div>
<div class="house-row-nav"></div>
<ul data-bind="foreach: images">
<li>
<div class="house-row-box nopadding-left nopadding-right">
<div class="image-wrapper">
<img data-bind="attr: { src: $data.image }" alt="image"><span data-bind="text: $data.image"></span>
</div>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
And the KOjs:
$(document).ready(function () {
var model = new IndexViewModel();
model.init();
ko.applyBindings(model, document.getElementById("index-root"));
});
var IndexViewModel = function () {
var self = this;
self.images = ko.observableArray();
//
// Custom bindings
//
//ko.bindingHandlers.slide = {
// init: function (element) {
// },
// update: function (element, valueAccessor) {
// $(element).jCarouselLite({
// btnNext: ".next",
// btnPrev: ".prev",
// visible: 3,
// speed: 1450,
// mouseWheel: true
// });
// }
//};
//
// Methods
//
self.init = function () {
self.images.push({
image: "/Images/1.png"
});
self.images.push({
image: "/Images/2.png"
});
self.images.push({
image: "/Images/3.png"
});
self.images.push({
image: "/Images/4.png"
});
self.images.push({
image: "/Images/5.png"
});
//$(".house-row").jCarouselLite({
// btnNext: ".next",
// btnPrev: ".prev",
// visible: 3,
// speed: 1450,
// mouseWheel: true
//});
};
};
$(document).ready(function () {
$(".house-row").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 3,
speed: 1450,
mouseWheel: true
});
});
The commented $(".house-row").jCarouselLite... and ko.bindingHandlers.slide... are the locations I tried initializing jCarouselLite.
A sample in a jsfiddle would really help me clear this.

Here's a first stab at it. I had to put the initial call inside a timer because it was being called before the foreach binding had happened, so the carousel didn't have any contents. A more advanced design would probably incorporate the foreach binding as part of the slide.
The setup call is in the init section because it only happens once. I suggested the update section in your previous thread because I thought there would be a need to handle repeated actions on the carousel and bind its selection to an observable or something. We don't do that here.
ko.bindingHandlers.slide = {
init: function(element) {
setTimeout(function() {
$(element).jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 3,
speed: 1450,
mouseWheel: true
});
}, 0);
},
update: function(element, valueAccessor) {}
};
$(document).ready(function() {
var model = new IndexViewModel();
model.init();
ko.applyBindings(model, document.getElementById("index-root"));
});
var IndexViewModel = function() {
var self = this;
self.images = ko.observableArray();
//
// Methods
//
self.init = function() {
self.images.push({
image: "/Images/1.png"
});
self.images.push({
image: "/Images/2.png"
});
self.images.push({
image: "/Images/3.png"
});
self.images.push({
image: "/Images/4.png"
});
self.images.push({
image: "/Images/5.png"
});
};
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//rawgit.com/ganeshmax/jcarousellite/master/jquery.jcarousellite.min.js"></script>
<h2>Index</h2>
<div id="index-root">
<div class="house-row" data-bind="slide: true">
<button class="prev">«</button>
<button class="next">»</button>
<ul data-bind="foreach: images">
<li>
<div class="house-row-box nopadding-left nopadding-right">
<div class="image-wrapper">
<img data-bind="attr: { src: $data.image }" alt="image"><span data-bind="text: $data.image"></span>
</div>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>

jQuery - How to call a function in another scope

I'm using this: http://terminal.jcubic.pl/
I want to output something, and have that output be a hyperlink that when clicked would output something else.
jQuery(document).ready(function($) {
$('#terminal').terminal(function(cmd, term) {
term.echo('\nClick this: <a onClick="javascript:terminal.exec(\'somethingelse\')">somethingelse</a>', {raw: true});
}, {
greetings: "Welcome!\n",
onInit: function(terminal) {
terminal.echo('Welcome!');
},
prompt: '> '
});
});
However,
<a onClick="javascript:terminal.exec
doesn't work because terminal.exec isn't defined in the context of the window. What would be the proper way to do it?
Thanks!

You can define the onclick handler in your JavaScript:
<!-- In your HTML -->
<a class="trigger-terminal" href="#">Terminal</a>
// In your JavaScript in the scope of terminal
$('.trigger-terminal').click(function() { terminal.exec(); });
Or you could sin and expose your terminal variable by attaching it to the global window object:
window.terminal = terminal;
Here are the two suggestions inline with your code:
// First suggestion
jQuery(document).ready(function($) {
$('#terminal').terminal(function(cmd, term) {
term.echo('\nClick this: <a onClick="javascript:terminal.exec(\'somethingelse\')">somethingelse</a>', {raw: true});
}, {
greetings: "Welcome!\n",
onInit: function(terminal) {
$('.trigger-terminal').click(function() { terminal.exec(); });
terminal.echo('Welcome!');
},
prompt: '> '
});
// Second suggestion
jQuery(document).ready(function($) {
$('#terminal').terminal(function(cmd, term) {
term.echo('\nClick this: <a onClick="javascript:terminal.exec(\'somethingelse\')">somethingelse</a>', {raw: true});
}, {
greetings: "Welcome!\n",
onInit: function(terminal) {
window.terminal = terminal;
terminal.echo('Welcome!');
},
prompt: '> '
});
});

Variable can t be access. Also take care that terminal is a property of $('#terminal")
Solution 1
jQuery(document).ready(function($) {
$('#terminal').terminal(function(cmd, term) {
term.echo('\nClick this: '+$('<a></a>').text('somethingelse').on('click', function(){$('#terminal').terminal.exec();}), {raw: true});
}, {
greetings: "Welcome!\n",
onInit: function(terminal) {
terminal.echo('Welcome!');
},
prompt: '> '
});
});
Solution 2
jQuery(document).ready(function($) {
$('#terminal').terminal(function(cmd, term) {
term.echo('\nClick this: <a onClick="javascript:$("#terminal").terminal.exec(\'somethingelse\')">somethingelse</a>', {raw: true});
}, {
greetings: "Welcome!\n",
onInit: function(terminal) {
terminal.echo('Welcome!');
},
prompt: '> '
});
});
wrote on the fly, i hope it is correct. But the idea is there.