how to navigate or call ant .js file in titanium - appcelerator-mobile

hey all,
how to navigate/call other .js file after click event on button. once it ciick it will goes to other window. osplease help me to solve this problem
thanks,

Please find below a quick sample, focused around iOS. There are a bunch more available in the Kitchen Sink example App available here:
https://github.com/appcelerator/titanium_mobile/tree/master/demos/KitchenSink
Steps:
1) Create Titanium Mobile Project
2) In the app.js file add the below
var winPage1 = Ti.UI.createWindow({
url:'page1.js', title:'Page 1'
});
winPage1.open();
3) Add a file in the same directory as app.js called page1.js, then paste this in
var win = Ti.UI.currentWindow;
(function(){
var b1 = Ti.UI.createButton({
title : 'Press Me',
left : 10, top : 100, right : 10, height : 40
});
b1.addEventListener('click', function(e) {
var wPage = Ti.UI.createWindow({
title:'Test Page2',
backgroundColor:'yellow',
url:'page2.js'
});
wPage.open({modal:false});
});
win.add(b1);
})();
4) Add a file in the same directory as app.js called page2.js, then paste this in
var win = Ti.UI.currentWindow;
(function(){
var b1 = Ti.UI.createButton({
title : 'Press Me',
left : 10, top : 100, right : 10, height : 40
});
b1.addEventListener('click', function(e) {
win.close();
});
win.add(b1);
})();
5) Run in Titanium Developer or Studio
This should give you a running same showing how to open and close windows. Kitchen Sink (link above) has a ton more samples showing different ways to do this.

Related

Datepicker (month and year) not working inside fancybox

I am having a problem with my fancybox 3 and jquery ui datepicker.
if I place the datepicker outside the fancybox.. the dropdown for months and years are working.. but when I place it inside fancybox. the dropdown is not being triggered. any idea what is happening?
$("#Date_To").datepicker({changeMonth: true,changeYear: true});
image
Try disabling focusing, something like this:
$('[data-fancybox]').fancybox({
autoFocus : false,
trapFocus : false,
touch : false,
beforeClose : function() {
$( ".selector" ).datepicker( "hide" );
}
});
Demo - https://codepen.io/fancyapps/pen/QqLXaz
I tried using modal and found a solution. is there any way I can covert this code for fancybox?
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
$confModal.on('hidden', function() {
$.fn.modal.Constructor.prototype.enfor

Foundation off canvas menu always visible on mobile

Currently on this site the off canvas menu is always visible for mobile and small desktop screens... Can anyone tell me what I am doing wrong?
The site is built using the Joints WP theme based upon the Zurb Foundation framework.
Thanks in advance,
Adam
You have the error in the console:
Uncaught TypeError: $ is not a function
That suggests you have a jQuery problem and Foundation uses jQuery to hide the (not relevant) portion of the navigation on small / large screens.
I'm going to guess that if you change this:
$(document).ready(function() {
var temp = "";
$(':input').click(function() {
temp = $(this).attr('placeholder');
$(this).attr('placeholder','');
$(this).blur(function() {
$(this).attr('placeholder',temp);
});
});
});
To this:
jQuery(document).ready(function() {
var temp = "";
jQuery(':input').click(function() {
temp = jQuery(this).attr('placeholder');
jQuery(this).attr('placeholder','');
jQuery(this).blur(function() {
jQuery(this).attr('placeholder',temp);
});
});
});
In script.js
Things may work (though I have not checked the voracity of the code).
Have a look at http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ for more information on how jQuery can run into conflicts.

Color rows when "group by" sharepoint 2013

I need some help. I'm trying to set color when group by in a sharepoint list.
I'm using the following code
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function(ctx) {
var statusColors = {
'Liberada' : '#FFF1AD',
'Cancelada' : '#FFD800',
'Créditos' : '#01DF3A'
};
var rows = ctx.ListData.Row;
for (var i=0;i<rows.length;i++)
{
var status = rows[i]["Status"];
var rowId = GenerateIIDForListItem(ctx, rows[i]);
var row = document.getElementById(rowId);
row.style.backgroundColor = statusColors[status];
}
}
});
});
Can someone give a hint?
As I can see in my local Sharepoint 2013 environment, when I create a view with a group by, Sharepoint add a CSS class named « ms-gb » on the table cell that contains the group name.
Knowing this, a solution would be to edit the page of the view.
Then you can add to the page a Script Editor Webpart.
Inside this Script Editor Webpart you can add some JavaScript code to add the background-color.
Something like this for example :
<script>
$(document).ready(function(){
var statusNames = ['Liberada', 'Cancelada', 'Créditos'];
var statusColors = {
'Liberada' : '#FFF1AD',
'Cancelada' : '#FFD800',
'Créditos' : '#01DF3A'
};
$('td.ms-gb').each(function(){
for (var x=0;x<statusNames.length;x++) {
if ($(this).text().indexOf(statusNames[x]) > -1) {
$(this).css('background-color',statusColors[statusNames[x]]);
}
}
});
});
</script>
If you try this script and you don't already have a reference to JQuery in your masterpage or page layout, you will need to add one inside the script editor webpart.
You can download a local copy of JQuery or use one hosted like :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Hope this help.

How to implement HUD (spinner / activity indicator) in ionic 2?

What is equivalent code for $ionicLoading. If I have below code snippet how can I set up loading HUD for every http request in a config file. (i.e. It will automatically add HUD when application calls a web-service)
makePostRequest() {
this.http.post("https://domain/post", "ur=kkr")
.subscribe(data => {
//Done loading, stop!
}, error => {
console.log(JSON.stringify(error.json()));
});
}
Please check this
let loading = Loading.create({
content: "Please wait...",
duration: 3000
});
this.nav.present(loading);
go through loading ionic2 - documentation

jQuery dialog load a tabbed from url not working

I am working on opencart. I tried to create a modal dialog popup every time user click a link that contains a product page. That links has a tabs inside (review,description). It load successfully, but the tabs are not working. How can i fix this?
This is how i call this:
$('a[href*="index.php?route=product/product"]').click(function(event){
event.preventDefault();
showDialog(this.href);
});
$("#dialog-modal").dialog({ //create dialog, but keep it closed
autoOpen: false,
height: 550,
width: 1000,
position: "center",
modal: true,
close: function(event, ui) { $('#wrap').show(); },
open: function(event, ui) { $('.ui-widget-overlay').bind('click', function(){ $("#dialog-modal").dialog('close'); }); }
});
function showDialog(urlToLoad){ //load content and open dialog
$.ajax({
type: "POST",
url: urlToLoad,
success: function( returnedData ) {
var $html = $(returnedData);
var content = $html.find('#content').find('.breadcrumb').remove();
content = $html.find('#content').html();
var container = document.getElementById('dialog-content');
container.innerHTML = content;
$("#dialog-modal").dialog("open");
$('#tabs a').tabs();
}
});
}
Apparently the $('#tabs a').tabs(); after $("#dialog-modal").dialog("open"); is not working.
Finally i solve this. It's just a silly problem, i forgot to import the jquerytabs.js in my caller page. So the tabs() function doesn't work. Now it's work perfectly.