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
Related
I have a fun little button on a website I am developing here:
http://dev.lapiazzaonline.com/merrick.php
When you click on the takeout menu button on desktop and chrome inspector iPhone simulator it works great.... with a nice little delay.
Now on iOS, nothing happens. I think it might have to do with the hover state issue, but more think my JS is messed up.
this is the js in the behavior.js file
// cool buttons
(function() {
var removeSuccess;
removeSuccess = function() {
return $('.button').removeClass('success');
};
$(document).ready(function() {
return $('.button').click(function(e) {
e.preventDefault();
var goTo = this.getAttribute("href");
$(this).addClass('success');
setTimeout(removeSuccess, 1500);
setTimeout(function(){
window.open(goTo);
},1500);
});
});
}).call(this);
Any ideas?
Thanks,
-Muhu
Your issue here is the use of window.open. You can read more about this here and other similar issues if you search. Unfortunately, there are multiple reports that jQuery trigger will not work either. So, what I would do is just use something like Modernizr, or if you just want to figure out which browser it is, this is a nice tool, and then when you're on iOS or a browser with similar blocking functionality, run a different function that doesn't prevent the default, and opens the link normally.
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
I am developing an application with ASP.net and VB.net. In that application i have written this simple javascript function in the popup window in order to refresh the parent window when the popup is closed.
function RefreshParent() {
if (window.opener != null && !window.opener.closed) {
window.opener.location.reload();
}
}
window.onbeforeunload = RefreshParent;
This was working fine. But suddenly it stopped working. Its still working on Firefox and internet explorer.
its not just a problem in my PC. I am getting this problem from every user who is using chrome to access the application.
The function was working fine. Its just stopped working suddenly. And I can assure that there was no such changes been made which might cause this happen. Its still working on Firefox and IE
But i Have tried the following to see if the problem is related with chrome settings
to see if the javascript is enable or not I double checked the content settings section in advance setting of the browser. Allow all site to run Javascript option is selected.
And I have also re installed chrome.
According to the suggestion of Jeremy I have added two alerts in the javascript function to see if the function is accessed or not.
function RefreshParent() {
alert("Accessed the function!");
if (window.opener != null && !window.opener.closed) {
window.opener.location.reload();
}
}
alert("refreshed parent window!");
window.onbeforeunload = RefreshParent;
I can only see the 2nd alert. But this alert comes when i click to open the popup.
Also when I add this two alert the refreshing function also stops working in firefox (I did not checked in ie with the alert on.)
How to solve the problem
The following solution works for me. In POPUP.vb.aspx POPUP page I added the following line of code under button click
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "refresh", "var url = window.opener.location.href; window.opener.location.href = url;", True)
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "CloseWindowScript", "window.close();", True)
I still have the javascript function ( mentioned in the question) in the asp.net page. Its not clear why its suddenly just stopped working in Chrome.
I have implemented a script to prevent the link in my mobile app on my ipad.
It works fine but I have problem now with the popup I have with jquery mobile.
The problem is when I use this script, the popup window doesn´t open anymore.
What can I do to open the popup window?
The script:
(function(document,navigator,standalone) {
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
// Condidions to do this only on links to your own app
// if you want all links, use if('href' in curnode) instead.
if('href' in curnode && ( curnode.href.indexOf('http') ||
~curnode.href.indexOf(location.host) ) ) {
e.preventDefault();
location.href = curnode.href;
}
},false);
}
})(document,window.navigator,'standalone');
In this case, you need to open it programmatically.
$('#popupID').popup('open');
Solved it...
what i have done:
instad to use the script i have write above, i only use this code in the .
<a onclick="parent.location='root/example.html'" id="ex"></a>
this allows me when i see my app in the fullscreen mode.. to navigate between the pages without to open it in the browser, the page loaded in my app.
I came across this in some JS code I was working on:
if ( typeof( e.isTrigger ) == 'undefined' ) {
// do some stuff
}
This seems to be part of jQuery. As far as I can see it tells you if an event originated with the user or automatically.
Is this right? And given that it's not documented, is there a way of finding such things out without going behind the curtain of the jQuery API?
In jQuery 1.7.2 (unminified) line 3148 contains event.isTrigger = true; nested within the trigger function. So yes, you are correct - this is only flagged when you use .trigger() and is used internally to determine how to handle events.
If you look at jQuery github project, inside trigger.js file line 49 (link here) you can find how isTrigger gets calculated.
If you add a trigger in your JavaScript and debug through, You can see how the breakpoint reaches this codeline (checked in jQuery-2.1.3.js for this SO question)
Modern browsers fight against popup windows opened by automated scripts, not real users clicks. If you don't mind promptly opening and closing a window for a real user click and showing a blocked popup window warning for an automated click then you may use this way:
button.onclick = (ev) => {
// Window will be shortly shown and closed for a real user click.
// For automated clicks a blocked popup warning will be shown.
const w = window.open();
if (w) {
w.close();
console.log('Real user clicked the button.');
return;
}
console.log('Automated click detected.');
};