Okay, if I could offer a bounty for this I would - I offer virtual karma.
As mentioned in the title I have an .NET/MVC4/Jquery Mobile/Knockout website. On the index page there is a button
<button data-bind="click: getResults" data-theme="f">Search</button>
which calls a javascript function
$.mobile.navigate("/results?option1=a&option2=b", { transition: amw.transitions.slide });
This works great on all browsers and devices except Chrome/iPhone. As far as I can tell the version of Chrome or iOS does not matter. The resulting URL in the address bar is
iPhone/Chrome: http://www.mywebsite.com/#/results?option1=a&option2=b
Other Devices: http://www.mywebsite.com/results?option1=a&option2=b
I have put alerts throughout jQuery mobile to try and figure out what is going on (if someone knows a way to debug chrome on iOS let me know) and I cannot see where the extra # is being added.
This may not seem like a big deal but the url ends up being passed on to a downstream service that really does not like the extra #.
I can put in a hack at the call to the service to strip out the # but I would really like to figure out what is happening.
The only suspect line I can find in jQuery mobile (1.3.0) is line #2298
// if the hash is included in the data make sure the shape
// is consistent for comparison
if( data.hash && data.hash.indexOf( "#" ) === -1) {
data.hash = "#" + data.hash;
}
But I am not sure what this does or why it would occour only on Chrome/iPhone.
so StackOverflow people - what is going on?
Thanks.
Related
Something that drives me nuts in the developper tools of Chrome (106) and Firefox (105) is the fact that whenever some text logged to the console via console.log(text) happens to contain a hyperlink, this link is not only turned clickable (I can live with it even when I usually prefer to have just plain text) but is abbreviated, if it is a long link. So when I want to control what precise link is in some variable, I cannot just write e.g. console.log(img.src), because some of the interesting information of the link is hidden.
You can try yourself with
var href = 'https://stackoverflow.com/search?q=%5Bgoogle-chrome-devtools%5D+%5Bconsole.log%5D+%5Bfirefox-developer-tools%5D+%5Bhyperlink%5D+automatic+detection&someMoreStuffTomakeTheLinkLonger';
console.log(href);
In both, Firefox and Chrome, the output for me contains some '...', e.g. in Firefox I obtain as output:
https://stackoverflow.com/search?q=%5Bgoogle-chrome-devtools…link%5D+automatic+detection&someMoreStuffTomakeTheLinkLonger
thus hiding the part after "-devtools". (Chrome hides a slightly different part). The console is mostly a debugging tool. I log things because I want to see them, not hide them. I always need to either hover with the mouse and wait for the tooltip (doesn't allow me to copy fractions of the link) or to right click copy the link and paste it somewhere where I can see it completely. Or take a substring to remove the "https://" in the front. But note that the variable isn't necessarily a single hyperlink, but can be any text containing several such hyperlinks. I didn't find a way to force console.log to just print plain text all content. Did anybody meet this problem as well and find a workaround?
I made this a community wiki answer, because the main insight is not from myself but from the comments. Feel free to improve.
The console.log() function allows several arguments, which allows also a formatted output similar to printf in some languages. The possibilities of formatting can be found in the documentation of console.log() on MDN. In any case, this formatted output provides a solution at least for Chrome, as #wOxxOm pointed out in the comments:
console.log('%O', href) // works in Chrome
This is rather surprising, because %O is described at MDN as
"Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector".
It seems there is no 'clicking' in Chrome when the object is a string.
There is also %s for string output, but this just gives the standard behavior of replacing links in both browsers. And for Firefox none of the above two formatting options works. There one really has to replace the protocol "https://" by something that is not recognized as link. A space behind ':' seems enough, so "https: //". It turns out, that one can also insert a formatting string "https:%c//", which can even be empty, and thus yield an output which is the complete link and can be copied as well:
console.log(href.replace(/(https?:)/, "$1%c"), ""); // works in Firefox
In particular the FF solution is cumbersome, and there might also be several links within one console-output. So it is useful to define one's own log-function (or if one prefers, redefine console.log, but note the remark at the end)
function isChrome() {...} // use your favorite Chrome detection here
function isFirefox() {...} // use your favorite Firefox detection here
function plainLog() {
const msg = arguments[0];
if (isChrome() && arguments.length == 1 && typeof msg == "string") {
return console.log("%O", msg);
}
if (isFirefox() && arguments.length == 1 && typeof msg == "string") {
const emptyStyle = ""; // serves only as a separator, such that FF doesn't recognize the link anymore
const reg = /(https?:)\/\//g;
const emptyStyles = []; // we need to insert one empty Style for every found link
const matches = msg.matchAll(reg);
for (let match of matches) {
emptyStyles.push(emptyStyle);
}
return console.log(msg.replace(reg, '$1%c//'), ...emptyStyles);
}
return console.log(...arguments);
}
For browser detection isChrome() and isFirefox() see e.g. here on SO.
One can of course extend the redefinition also to the other console functions (console.info, console.warn, etc.)
The downside of the redefinition of console.log is that usually every output of the console shows also the last entry of the call stack as a practical link to the source of the logging. But due to the redefintion, this link is now always to the same place, namely the file and line number where plainLog() is defined and calls console.log(), instead of the place where the new log command plainLog() was called. This new problem is described on SO here, but the solution (see comment) is again a bit involved and also not completely satisfying to serve as a replacement for the built-in console.log . So if links appear only rarely in the logging, it's probably better to switch to the redefined plainLog() only for these links.
I am using Twilio Video React application, for my video application.
Twilio video renders video in two views, desktop and mobile, based on the device.
Due to space constraints on my desktop application I would like to render the video similar to that of a mobile on desktop, Is this possible? Is there a variable that I could set to allow me to do this ? Basically, I would like Twilio video to think that I am running the app on the mobile.
I tried to set isMobile to true in utils (as shown below), this doesn't seem to make a difference to the UI.
export const isMobile = (() => {
if (
typeof navigator === "undefined" ||
typeof navigator.userAgent !== "string"
) {
return true;
}
return /Mobile/.test(navigator.userAgent);
})();
I would like to achieve the below:
Twilio developer evangelist here.
I've not worked on this application myself, so I'm not familiar with how it is styled. There is not a variable for setting the style on mobile though, it is mostly controlled by CSS media query break points.
What you will notice among the code is that the CSS is embedded within the JavaScript. You will also find lines like:
[theme.breakpoints.down('xs')]: {
// styles
}
That breakpoint defines how a number of the styles are supposed to work at the small screen size. So if you remove the breakpoint and use the styles inside the breakpoint as the default styles, then the application will lay out in the mobile version.
Once you've done that, you can then place the video parts of the application within a div with a width you define and place the rest of your application around it.
Let me know if that helps at all.
I know that question has been asked and answered before, I have the code I think is the right, but I can't figure it out the right syntax, I think is about the quotes and double quotes.
I'm using phonegap version 2.9, in version 2.2 I could open an external link in Safari, but I had to upgrade to 2.9 or apple won't accept my app. and of course the external links will open inside the app without the back button.
This is an app that links to a mysql database with php trough Json.
This is the part I'm having problems:
if (employee.web) {
$('#actionList').append('<li><a href="#" onclick="window.open("http://' + employee.web + '", "_system");"><h3>Website</h3> ' +
'<p>' + employee.web + '</p></a></li>');
}
This worked perfect without the onclick option (but of course in phonegap version 2.9 it opens inside the application and get stuck there).
But now is just not doing anything when I click on it.
I've been many days trying to solve this problem and is the only thing I need to complete my application.
Yeah, your quotes are a bit messed up. Doing this inline can get hairy to say the least. I would separate my HTML from my JS by creating a separate function. Try something like the below:
if (employee.web) {
$('#actionList').append('<li><h3>Website</h3><p>' + employee.web + '</p></li>');
}
function openLink(url){
window.open('http://' + url, '_system');
}
I am building a news reader in Sencha Touch 2. There is a "share" button in this news reader, but I'm not sure how you would share the current article via a URL.
That is, if my Sencha site's URL is: www.senchareader.com, the only URL I can share is just that.
Is there some way to create, within the Sencha framework, something like, www.senchareader.com/article1234567 ? So that when the URL is clicked on by someone, it actually goes to the article that's being shared?
Hopefully this is clear, let me know if it's not.
Yes you can. Sencha uses URL hashes to support browser history. Take a look at this example on the ExtJS 4.1.3 site, and the related documentation here. Essentially, you add "tokens" (hashes) to the history, then listen for changes to support the forward and back buttons. If you are using Sencha Touch 2, however, history support is a bit easier by using "routes" in your controllers. You read Sencha Touch history support documentation here.
The code to do this differs depending on whether you are using ExtJS or Sencha Touch, but is ExtJS it is something like the following:
...
Ext.History.init();
...
// something happens to change the url (like a user clicks on an article)
var newToken = '/article/'+article.id; // or whatever
var oldToken = Ext.History.getToken();
if (oldToken === null || oldToken.search(newToken) === -1) {
Ext.History.add(newToken);
}
...
Ext.History.on('change', function(token) {
// handle the token changing, most likely by showing the right article
});
I am encountering a very stragne bug, i am trying to call javascript from AIR like this
this.webView.loadURL( 'javascript:alert(5)' ); -- This works
this.webView.loadURL( 'javascript:alert("hello there")' ); -- This is not working
I am not able to pass strings, in any function. I am not sure why this is happening and it is driving me insane. It works correctly in Android though.
Any help would be greatly appreciated.
Thanks
EDIT: after spending sometime tweaking it seems to be the space. alert("hello") works fine alert("hello there") doesnot.
Ok I think I found it.
You cannot pass whitespaces. You can in Android and Desktop - but no, the glorious iOs refuses to digest such an advanced entity.
So you must encode your whitespaces in strings and make sure that there will be no stray whitespace in your functiond declration
for example
this.webView.loadURL("javascript:test('hey__there')"); //will work
while
this.webView.loadURL("javascript: test('hey__there')"); //this won't
this.webView.loadURL("javascript:test( 'hey__there' )"); //this won't
Good luck