We Keep Coding

Android-jQuery cannot detect when popup dialog is closed

I have an Android app that is interfacing with a website (that I have no control of) and I'm able to do that by loading different Javascript or jQuery scripts to my WebView. One of my tasks is for my app to detect when a dialog in the website is displayed and closed. So far I've been able to detect if the dialog has been displayed through this script (works for both Desktop and Mobile mode):
$(".ui-link").click(function() {
Android.dialogOpened(); // function in my Android app
});
And detect if the dialog was closed by pressing the X button of the dialog through this script (works for both Desktop and Mobile mode):
$(".ui-btn-left.ui-btn.ui-shadow.ui-btn-corner-all.ui-btn-icon-notext.ui-btn-up-f").on("tap", function() {
Android.xBtnClicked();
});
By messing around with the Console in my PC (Desktop mode only), I've also been able to detect when the dialog is closed by clicking outside the dialog.
// popupDialog-screen is the ID of the space outside the dialog
$("#popupDialog-screen").click(function(){
alert('clicked outside'); // or the Android function
});
But when I try to use my mobile device (or by changing to Mobile mode in the Console), the script above does not work! I've also tried using various other scripts using different classes or divs, also tried using .on('tap') instead of click, and many other methods, but none of them have worked so far .
This is my first time ever using Javascript and jQuery so I don't understand much of the code of the website. If it helps, I saw that it uses Tapestry, and I saw the code to display the popup, but did not see where it is closed. Below is the code I found (I did not make this):
// dialoglink.js
(function( $ ) {
T5.extendInitializers(function(){
var bindElements = [];
function init(spec) {
var elementId = specs.triggerId;
if ( $.inArray(elementId, bindElements) === -1 ) {
bindElements.push(elementId);
$('#' + elementId).click(function(e) {
e.preventDefault();
jQuery('#' + spec.dialogId).popup('open');
return false;
});
}
}
return {
dialogLink : init
};
});
}) ( jQuery );
What do you think is the problem? I've been at this for hours. Thanks!

Finally got it to work!
Searched about popups in jQuery mobile and used the afterclose event.
Here is the working script:
$('#popupDialog').popup({
afterclose: function( event, ui ) {alert('CLOSED')}
});
Source: http://api.jquerymobile.com/popup/#event-afterclose

Updating Angular 1.2.10 to latest with a minor bug (Overriding a href - third party)

What I did,
I took this angularjs project and did nothing just updated it using nugget package manager to latest angular libraries,
https://github.com/OfficeDev/Learning-Path-Manager-Code-Sample
Issue
When I click on top right settings button, "Working On It" dialog appears and doesn't goes away.
What I investigated
Looking at url, when I click on "cog" url changes from,
https://omapny-ersda819baad8d.apps.com/sites/Dev1/lpm/app.html#/
to
https://omapny-ersda819baad8d.apps.com/sites/Dev1/lpm/app.html#
and dialog appears, but when I add "/" again, dialog disappears
what could be wrong ? I am totally new to AngualrJS
Edit
Most likely because it has this third party link,
<a id="chromeControl_topheader_apptitlelink" href="#" class="ms-core-suiteLink-a" target="_top"><span id="chromeControl_topheader_apptitle">Learning Path Manager</span></a>
How to get around this ?

I fixed this issue by doing followings,
for app title, I had to modify appStartPage to following,
function init() {
// create chrome control settings
spChromeControlData = {
appStartPage: "app.html#/",
Above change is in spAppChrome.js controller file then in same file i added this within init function,
//fix issues with chrome ctrl
$('body').on('click', '.ms-core-menu-root', function () {
$(this).attr("href", "javascript:;")
});
So this will look something like this,
// create the sharepoint chrome control
var nav = new SP.UI.Controls.Navigation("chrome_ctrl_container", spChromeControlData);
// show chrome control
nav.setVisible(true);
// hide top app chrome (image & app name)
nav.setBottomHeaderVisible(false);
//fix issues with chrome ctrl
$('body').on('click', '.ms-core-menu-root', function () {
$(this).attr("href", "javascript:;")
});
logger.log("spAppChrome loaded", null, controllerId);
common.activateController([], controllerId);
}
Let me know if there's any issue.
Thanks

JQuery UI Tabs not mapping to content divs correctly in different versions of IE8

I've have a webpage which I've added JQuery UI tabs too. The HTML code is generated by a third party which I have no control over but its mostly as JQuery expects. When the page is viewed on my machine its working correctly however the clients machine renders the tabs along the top but all the tab contents are listed one after another under the first tab. So it's finding the tabs but not the content Divs. I've tried it in chrome and the tabs work correctly.
Working on : IE 8.0.6001.19393 broken on : IE 8.0.7601.17514
What's different between these 2 browser version that would affect the browser content tabs? Upgrading the browser is not an option as it's set at corporate level.
UPDATE:
As mentioned earlier I'm having to work against set html which requires a few tweaks before the tabs can be rendered. Mainly the href on the tabs links start off incorrect are are pointing to hidden anchors i.e. href="#profile1" when they should be href="#profile_1".
I use this code to reset the urls prior to calling tabs:
var i = 1;
$('#ProfileTOC ul li a').each(function () {
$('#profile' + i).remove();
$(this).attr('href', '#profile_' + i);
i++;
});
Now looking through the Jquery code the only difference I've found so far is when the tabs are created it calls "islocal" which returns true on the working browser and false on the broken browser. The reason being JQuery is using full http://* urls for the working tab anchors while the broken browser is using just the #anchor url missing the http:// completely. Which makes "islocal" return false; I think its the map function which seems to be doing different things:
this.anchors = this.tabs.map(function() {
return $( "a", this )[ 0 ];
})
.addClass( "ui-tabs-anchor" )
.attr({
role: "presentation",
tabIndex: -1
});
after this one browser has full URLs for each anchor while the other has relative. If I remove the URL changing code the URLs are full paths again but obviously still incorrect.
I've hacked the JQuery UI code to remove the islocal check and the tabs work but I'd like to know why and possibly get it working without hacking the jQuery UI code.

I've hacked the JQuery UI code to remove the islocal check.

window.open won't work in Phonegap 1.7.0

I'm working with Phonegap on a mobile device. And its issues and bugs are too much to solve. One of them is:
window.open('new_window.html','well','width=300,height=200');
(I have already created a new_window.html under assets/www/.)
it appears a full screen window, and of course. If I set scroll bar option is true, it's still no use. The system is like a dummy.
I have searched the solution for several days, trying use iframe/frame to replace it. But they are not appropriate or no use. In my development environment, I just want to let the user press a button and a small window pops out. I can set the tile, location, size...
Any alternatives or suggestions?
Thanks.

You could try setting the size on the actual page that is popping up and try window.open() again, if that does not work try:
window.location.href = "newindow.html";
If that does not work either and you could try using a jQuery Dailog box (need to import the jQuery Library found here jQuery) as the popup, code would be something like this:
$(document).ready(function()
{
$('#buttonID').click(function()
{
$help.dialog('open');
return false;
});
var $help = $('<div></div>')
.html('Your HTML copy goes here!')
.dialog
({
autoOpen: false,
height:200,
width: 300,
title: 'Window Title'
});
});

You are treating it like a web browser when it is not a web browser. You can use the ChildBrowser plugin from https://github.com/phonegap/phonegap-plugins/tree/master/Android/ChildBrowser

Javascript and CSS onclick Div Swap

I am new to both Javascript and designing for Facebook. I am using Shortstack to create custom tabs and have created a 3 panel sub-tab application using the service. In the 3rd panel, I have 19 div's holding information. By default, I use CSS to hide these DIVs (display:none;) and have a series of links at the top of the panel that change the visibility of each DIV onclick. Only the active onclick content is visible at any time.
The tab functions properly in Firefox, Chrome, and even Safari on the Mac, but fails in all browsers on the PC, and fails differently. In IE, immediately after the swap happens an error message pops up which mentions the publisher not allowing the action in an iFrame. In Firefox the tab just goes blank with no error message.
My script is below. As I stated, I am new to coding for Facebook and working with Javascript as I am a designer and not a programmer, but am eager to learn.
Thank you in advance for your thoughts and ideas.
function showhide(layer_ref) {
var thisDiv;
// check to see if any DIVs are currently showing
var divlist = ["div1","div2","div3","div4","div5","div6","div7","div8","div9","div10","div11","div12","div13","div14","div15","div16","div17","div18","div19"];
// loop through the list of DIVs in "divlist"
for (x = 0; x < divlist.length; x++) {
thisDiv = document.getElementById(divlist[x]);
// if the DIV is showing, hide it
if (thisDiv.style.display == "block") {
thisDiv.style.display = "none";
}
}
// show the appropriate DIV
thisDiv = document.getElementById(layer_ref);
thisDiv.style.display = "block";
}

If you try to change the things in iframe that could be a problem if the iframe is loaded from different domain. It is basically security rule - you don't want to allow rogue code to change/read/write things on the page other than it's own.
To answer your question better we need to know where is changing javascript is located and what it tries to change (are those two things loaded from the same domain or not).
The script itself looks ok to me.