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.
Related
I've struggled with this problem for two days. I googled it and see some similar cases.
After sending POST request to the server, I wanna redirect the page to another one. The POST function works properly but window.location.assign() method doesn't work (although it works in another part of my project).
Here is my code:
const $btnDel = $("<button>", {
appendTo: $('td:eq(0)', $tr),
"class": "revertButton",
html: "<i class='material-icons'>restore</i>",
on: {
click: function () {
console.log(`Reverting: ${book.name}`)
$.post(`/revert/${book.name}`, {
bookName: `${book.name}`,
pageCount: `${book.pageCount}`,
action: "REVERT"
}).done(() => {
window.location.assign('/bookPage');
})
}
}
});
The first console.log works (I mean console.log("Reverting: ${book.name}"), but done function doesn't work.
Can you please try the below code.
const $btnDel = $("<button>", {
appendTo: $('td:eq(0)', $tr),
"class": "revertButton",
html: "<i class='material-icons'>restore</i>",
on: {
click: function () {
console.log(`Reverting: ${book.name}`)
$.post(`/revert/${book.name}`, () => {
bookName: `${book.name}`,
pageCount: `${book.pageCount}`,
action: "REVERT"
}).done(() => {
window.location.assign('/bookPage');
}).fail(function(error){
console.log(error);
})
}
}
});
Hope this will give you some help/clue.
I am creating an welcomescreen for my html app. and im using a welcomescreen plugin from github. you can check it here https://github.com/valnub/welcomescreen.js
now i want to show welcome screen when localstorage value is 0. and when close button of welcomescreen is clicked i am changing the localstorage value to 1. but on page refresh the localstorage value is again set to 0.
how to do that this is my js file.
/*jslint browser: true*/
/*global console, Welcomescreen, $*/
// Init method
$(document).ready(function () {
localStorage.setItem("welscreen", "0");
var welcomeTour = localStorage.getItem("welscreen");
if (welcomeTour == 0) {
$(document).ready(function () {
var options = {
'bgcolor': '#0da6ec',
'fontcolor': '#fff',
'onOpened': function () {
console.log("welcome screen opened");
console.log(welcomeTour);
},
'onClosed': function () {
localStorage.setItem("welscreen","1");
var welcomeTour = localStorage.getItem("welscreen");
console.log("welcome screen closed");
console.log(welcomeTour);
}
},
welcomescreen_slides,
welcomescreen;
welcomescreen_slides = [
{
id: 'slide0',
picture: '<div class="tutorialicon">♥</div>',
text: 'Welcome to this tutorial. In the <a class="tutorial-next-
link" href="#">next steps</a> we will guide you through a manual that will teach you how to use this app.'
},
{
id: 'slide1',
picture: '<div class="tutorialicon">✲</div>',
text: 'This is slide 2'
},
{
id: 'slide2',
picture: '<div class="tutorialicon">♫</div>',
text: 'This is slide 3'
},
{
id: 'slide3',
picture: '<div class="tutorialicon">☆</div>',
text: 'Thanks for reading! Enjoy this app or go to <a class="tutorial-previous-slide" href="#">previous slide</a>.<br><br><a class="tutorial-close-btn" href="#">End Tutorial</a>'
}
];
welcomescreen = new Welcomescreen(welcomescreen_slides, options);
$(document).on('click', '.tutorial-close-btn', function () {
welcomescreen.close();
});
$('.tutorial-open-btn').click(function () {
welcomescreen.open();
});
$(document).on('click', '.tutorial-next-link', function (e) {
welcomescreen.next();
});
$(document).on('click', '.tutorial-previous-slide', function (e) {
welcomescreen.previous();
});
});
};
});
Change this:
localStorage.setItem("welscreen", "0");
var welcomeTour = localStorage.getItem("welscreen");
to this:
var welcomeTour = localStorage.getItem("welscreen");
if(welcomeTour === undefined || welcomeTour === null) {
localStorage.setItem("welscreen", "0");
welcomeTour = "0";
}
I need to add a button to the taskbar quickstart, but i do not want to open a module window, for example a logout button that will show a confirm messagebox, i have tried like this:
getTaskbarConfig: function () {
var ret = this.callParent();
me = this;
return Ext.apply(ret, {
quickStart: [
{ name: 'Window', iconCls: 'icon-window', module: 'ext-win' },
{ name: 'Logout', iconCls:'logout', handler: me.onLogout}
]
});
},
onLogout: function () {
Ext.Msg.confirm('Logout', 'Are you sure you want to logout?');
},
And i changed the getQuickStart function of the TaskBar.js file to this:
getQuickStart: function () {
var me = this, ret = {
minWidth: 20,
width: Ext.themeName === 'neptune' ? 70 : 60,
items: [],
enableOverflow: true
};
Ext.each(this.quickStart, function (item) {
ret.items.push({
tooltip: { text: item.name, align: 'bl-tl' },
overflowText: item.name,
iconCls: item.iconCls,
module: item.module,
//handler: me.onQuickStartClick, **original code**
handler: item.handler == undefined ? me.onQuickStartClick : item.handler,
scope: me
});
});
return ret;
}
But it does not work, is there a way to add a simple button to the taskbar quickstart?
Thanks for your reply. I have solved the issue. In the TaskBar.js file i changed this line:
handler: item.handler == undefined ? me.onQuickStartClick : item.handler
for this one:
handler: item.handler ? item.handler : me.onQuickStartClick
Actually, for me, both do the same, but for any weird reason the code works with that change.
I am trying to call input attribute value from child function.
Code is Here:
$("input.ups").fileinput({
uploadUrl: "/imalatci/products/uploadimages",
allowedFileExtensions: ["jpeg","jpg", "png", "gif"],
maxImageWidth: 500,
maxImageHeight: 400,
maxFileCount: 5,
resizeImage: true,
language:"tr",
uploadExtraData: function() {
return {
product_id: $(this).attr('product_id')
};
}
}).on('filepreupload', function() {
$('#kv-success-box').html('');
}).on('fileuploaded', function(event, data) {
$('#kv-success-box').append(data.response.link);
$('#kv-success-modal').modal('show');
});
I want to get $("input.ups") product_id attribute in this function:
uploadExtraData: function() {
return {
product_id: $(this).attr('product_id')
};
}
But it is getting undefined error?
How can we fix this ?
The scope of this within the uploadExtraData function is not the input.ups element which the plugin is being instantiated on. To achieve what you require you would need to loop over them individually so you can get a reference to the element. Try this:
$("input.ups").each(function() {
var $input = $(this);
$input.fileinput({
uploadUrl: "/imalatci/products/uploadimages",
allowedFileExtensions: ["jpeg","jpg", "png", "gif"],
maxImageWidth: 500,
maxImageHeight: 400,
maxFileCount: 5,
resizeImage: true,
language:"tr",
uploadExtraData: function() {
return { product_id: $input.attr('product_id') };
}
}).on('filepreupload', function() {
$('#kv-success-box').html('');
}).on('fileuploaded', function(event, data) {
$('#kv-success-box').append(data.response.link);
$('#kv-success-modal').modal('show');
});
});
I would also suggest using a data-* attribute instead of a non-standard attribute like product_id.
I'm calling flowplayer like this:
flowplayer("a.rmPlayer", "libs/flowplayer/flowplayer.swf", {
plugins: {
audio: {
url: 'libs/flowplayer/flowplayer.audio.swf'
},
controls: {
volume: true
}
}
});
I'd now like to have different covers for each mp3 file being called. flowplayer provides the coverimage variable (see http://flash.flowplayer.org/plugins/streaming/audio.html), however can I somehow have the images in a data attribute?
I've ended up using the following code, which seems to work flawlessly.
The link:
<a data-toggle="modal" class="rmPlayer" data-fpurl="http://releases.flowplayer.org/data/fake_empire.mp3" data-fpimg="http://releases.flowplayer.org/data/national.jpg">click me</a>
And the corresponding javascript (with '#rmPlayerInterface' being the modal window)
<script type="text/javascript">
$(document).ready(function() {
player = flowplayer("player", "/libs/flowplayer/flowplayer.swf", {
plugins: {audio: {url: '/libs/flowplayer/flowplayer.audio.swf'},controls: {url: '/libs/flowplayer/flowplayer.controls.swf'}},
clip: {autoplay: false, autoBuffering: true}
});
$(document).on("click", ".rmPlayer", function () {
$('#rmPlayerInterface').data('playeroptions', $(this).data());//.music = music;
$('#rmPlayerInterface').modal('show');//:music});//('music', $(this).data('music'));
});
$('#rmPlayerInterface').on('show', function () {
var poptions = $('#rmPlayerInterface').data('playeroptions');
var c = {url: poptions["fpurl"],coverImage: {url: poptions["fpimg"],scaling: 'orig'}};
player.play(c);
});
$('#rmPlayerInterface').on('hide', function () {
player.pause();
});
});
</script>