I have been trying to write a code in sencha touch, which has a button and when i click on that , it should open a webpage as a pop-up in a new window .
Window.open()-I cannot use this method because it doesn't work fine
in phones.Though I realise this is the easiest way to open a new
browser window.
document.location.href=url - This method opens the URL in the same
page , but I want it to be opened in a new window as pop-up.
Is there any other way to open a page in a new window when a user clicks a button, Below is my code
Ext.application({
name: 'Opening new page',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: false,
items: [
{
xtype: 'button',
text: 'click to open google',
ui: 'confirm',
handler: function() {
document.location.href=("http://www.google.com/");
}
}
]
});
}
});
Please try this code:
handler: function() {
var link = Ext.getDom('hidden_link');
link.href = 'http://www.google.com'/;
var clickevent = document.createEvent('Event');
clickevent.initEvent('click', true, false);
link.dispatchEvent(clickevent);
}
I don't know exactly how to do it in Ext.js, but I was basically thinking along the same lines as #bunlong-van. Create a anchor tag that targets a new window, add it to the page, and then click it.
This is how it could be done in jQuery:
$('button').bind('click',function(e){
var $me = $(this);
e.preventDefault();
e.stopPropagation();
$('<a />')
.attr('href', $me.data('href'))
.attr('target', '_blank')
.css({display:'none'})
.appendTo($('body'))
.get(0).click();
});
Full Sample: http://jsbin.com/adakur/edit
Hey #coding you can that is a Overlay is a type pop-up, try this into handler event,
var overlay = new Ext.Panel({
floating : true,
modal : true,
centered : true,
width : 500,
height : 500,
styleHtmlContent : true,
html: '<div><iframe style="width:100%;height:100%;" src="http://www.sencha.com/products/touch">Your device does not support iframes.</iframe></div>',
}).show('pop', true)
And please use your brain, I do not I can be doing your homework. I hope this helps. :) Ciao
Use window.open() in your handler as mentioned below:
handler: function() {
window.open("http://www.google.com/", "_blank");
}
Create a pop up window(a simple window) in your working page and make its visibility to false.. when you click on the button, change its visibility to true and give the focus to it..
also you can open anything in that popup window..
or you can use this jQuery code
$(document).ready(function() { tb_show(title, "testpage.aspx?id=" + url + "&TB_iframe=true&width=700&height=600", null); });
in this you can pass the parameters you want. this will open as a new popup window.
Related
I have a modal window that displays two text boxes (customer id and customer name). When the user clicks on 'save', I'd like to close the modal window. I tried using $('#NewCustomer').hide() but that doesn't seem to close the window. So how do I close a kendo window from a different function from my ViewModel? Any help would be appreciated.
Thanks!
JS
var viewModel = kendo.observable({
ShowNewCustomerForm: function () {
var newCustomerWindow = $('#NewCustomer').kendoWindow({
title: "Add New Customer",
modal: true,
width: 500,
height: 300
}).data("kendoWindow");
newCustomerWindow.center().open();
$('#AddNewCustomerBtn').hide();
},
SaveCustomer: function (e) {
// close #NewCustomer here
$('#NewCustomer').hide();
}....
Kendo Window widget exposes a lot of API. open() & close() methods are available for you to programmatically handle the window.
Here is a demo we have on Kendo Window API methods - http://demos.telerik.com/kendo-ui/window/api
Do take a look at how it has been done in the demo and you can follow the same procedure.
OK -- I was able to figure it out. This is the working code:
var viewModel = kendo.observable({
ShowNewCustomerForm: function () {
var newCustomerWindow = $('#NewCustomer').kendoWindow({
title: "Add New Customer",
modal: true,
width: 500,
height: 300
}).data("kendoWindow");
newCustomerWindow.center().open();
$('#AddNewCustomerBtn').hide();
},
SaveCustomer: function (e) {
// close #NewCustomer here
$("#NewCustomer").closest(".k-window-content").data("kendoWindow").close();
}
Can't found way to open Fancybox window http://fancyapps.com/fancybox/ with options, and callbacks. Without trigger('click') => this is working WRONG. If try to click usual link in opened fancy window - it just reopend. This is bug.
You can see fancy greeting window here: http://noveogroup-test.esy.es/#
CODE:
setTimeout(function(){
if (!$.cookie('greeting')) {
$.cookie('greeting', true);
$('.greeting').fancybox({
'beforeLoad': function(){$('.body').css('-webkit-filter', 'blur(6px)')},
'afterClose': function(){$('.body').css('-webkit-filter', 'blur(0px)')},
'openSpeed': 1000,
'closeSpeed': 500,
'padding': 20
}).trigger('click');
}
}, 1000);
I just have the same problem.
You can trigger click and pass an event which explain « I'm a fancy trigger ». In your listener event click, you will be able to see if it is a manual trigger or a fancy trigger.
var eventClick = new $.Event("click"),
$element = $(".element");
$element.click(function (e) {
if (e.fancy) {
return console.log("This is a fancy trigger")
}
console.log("This is manual trigger");
});
eventClick.fancy = true;
$element.trigger(eventClick);
This is a codepen example : http://codepen.io/Haeresis/pen/RWyxBy
Is it possible to have dynamic window titles using templates?
Something like this:
wnd = $("#details").kendoWindow({
title: #= ItemName #,
modal: true,
visible: false,
resizable: false,
width: 300}).data("kendoWindow");
I added ItemName in the title field merely to indicate the concept. Any idea?
You can do it with setOptions api method, something like:
// Setting some options
wnd.setOptions({
title: "dynamic title",
width: "60%"
});
First initialize your window with your code and on some events (button click may be), use window object to set its options.
If its not clear, lets play with example: I am setting the window title on kendo-grid custom command button click:
<div class="k-content">
<div id="noteswindow"></div>
</div>
<script>
$(document).ready(function () {
$("#noteswindow")
.kendoWindow({
actions: ["Refresh", "Maximize", "Minimize", "Close"],
visible: false
})
});
function onNotesClick(e) { // Custom button click
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
rData = dataItem;
// Using same window variable again and again for successive clicks with dynamic content
var nWin = $("#noteswindow").data("kendoWindow");
// Setting some options
nWin.setOptions({
title: "Notes on " + dataItem.AssetOrShotName,
width: "60%"
});
nWin.refresh({
url: "../Task/Notes",
data: { AssignId: rData.Id }
});
nWin.open().center();
}
</script>
This is easy way i have show event title in title header like that
API.get('/Scheduler/GetEventDetailById', detailParams).then(function (data) {
$('.k-window-title').text(data.EventTitle);
});
What I want is that I have few links like
sample Link 1 sample Link 2
and I want to call the static html when user clicks the link. For that I have written a code
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.popup-link').on('click',
function() {
var dialog = new A.Dialog({
bodyContent: 'Loading...',
centered: true,
title: 'Sample Popup Content',
width: 400,
height:600
}
).render();
dialog.plug(
A.Plugin.IO,
{
autoLoad: false,
uri: '/html/sample.html'
}
);
dialog.io.start();
});
});
but this does not work, it simply does not call the function when I click the link, I also tried this, but same thing
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.sample-popup').each(function() {
this.on('click', function(A){
.....
......
Any idea what is wrong here?
Finally I got why it was not working. I was using the same object "A" in the click function as well.
it should be like this: (have a look at the variable name event)
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.sample-popup').each(function() {
this.on('click', function(event){
.....
......
I don't know much about AUI but if you want to achieve same task using jQuery you can achieve like this
i.e
<script>
$(document).ready(function() {
$('.popup-link').click(function(){
alert($(this).text());
});
});
</script>
Or
Using Javascript
i.e
Link
<script type="text/javascript">
function theFunction () {
// return true or false, depending on whether you want to allow the `href` property to follow through or not
}
</script>
HTH
I have a ListPanel inside my application defined as follows:
//Create List View Using ListStore Created in data.js
SpotiPod.listPanel = new Ext.List({
id: 'artistList',
store: SpotiPod.ListStore,
itemTpl: '<div>{ArtistName}</div>',
grouped: true,
indexBar: true,
listeners: {
itemtap: function(list, index){
var rec = list.store.getAt(index)
//Ext.Msg.alert(rec.get('ArtistName'), 'Load In Spotify?', function(){location.href = rec.get('SpotifyURI');});
Ext.Msg.show({
title: rec.get('ArtistName'),
msg: 'Load In Spotify?',
buttons: Ext.MessageBox.YESNO,
fn: showSpotify
});
function showSpotify(btn){
if(btn == 'yes'){
window.open(rec.get('SpotifyURI'));
}
}
}
}
});
The application presents a list of artists and should provide a link to them using the Spotify URI's, when you click yes to load spotify it should open the app and show the artist. The application as below works fine in the browser and in mobile safari on the iPhone. However if I add the application to the home screen and run it then it no longer works. I get an error that "The URL can't be shown."
Has anybody got any ideas on how this could be changed to allow the link to be fired correctly?
Cheers
Adam
Here is something I found on Sencha Forums, I do not know if it works so excuse me if it does not. The idea is to create an anchor markup and simulate a click on it instead of calling window.open() method. Here is the code doing this taken from sencha post.
Ext.util.openLink = function(href) {
var link = document.createElement('a');
link.setAttribute('href', href);
link.setAttribute('target','_blank');
var clickevent = document.createEvent('Event');
clickevent.initEvent('click', true, false);
link.dispatchEvent(clickevent);
return false;
}
http://www.sencha.com/forum/showthread.php?130358-window.open()-from-toolbar-button-opens-window-from-list-item-a-new-tab&p=639938#post639938