How do I see what jQuery Mobile loaded in the background? - dom

Using jQuery Mobile, I have seen how it adds to the existing DOM when links are clicked and a related page is served. Then, when ready, it switches to that new data-role="page". But when I do a "view source" in the browser (Google Chrome or Mozilla Firefox), I see the original page, as delivered, without the additional things loaded later (DOM injections). How can I see what the browser really has (post-render HTML)? If it happens to be a JavaScript solution, please don't presume I know where to put it and how to trigger it to show the content.

In Chrome: Wrench > Tools > Developer Tools would be a way to see the 'live' DOM.

Related

Finding root cause of redirect with Chrome Developer Tools

I am trying to debug a webpage with chrome developer tools and the page redirects to a pdf file after it loads. I checked JavaScript files and there is not any place that we redirect the page. I cannot find any related message in developer tool console or network tab.
I activated event Listener Breakpoints -> beforeunload but it stops at an external js file (Placeholders.js) which is not related to redirecting.
Also, preserving Logs in network tab does not help me on finding root cause of redirect.
I am wondering how can I find the source of this redirect?
UPDATE: There is not any "refresh" meta tag in the html code.
There are a couple of things you can do. You can use the Event Listener Breakpoint -> Load - unload and then when it breaks in the 3rd party library, right click and select Blackbox Script. The next time you play through the code, it should only break in your own code (assuming there are no other 3rd party libraries to blackbox).
Another option is to go to the Network tab and check the Preserve Log checkbox. This will persist all requests between page loads/navigation, so that you will be able to find the network request that returned the PDF response.

Facebook comment plugin doesn't work at all

I inserted the facebook code where required and absolutely nothing happens or shows up. Using dreamweaver cs6 and in live view or when testing in ANY browser, nothing shows up. It's a blank box. ANy thoughts? I read somewhere that the website must be made into an application of facebook? Is this something?
Specifically, after activating the plugin and properly connecting the plugin to the facebook app,which does work and has been used extensively before hand, comments simply fail to load. There is no comment box, no past comments pull in either (note the app has historical comments already).
In the plugin settings area on the right side of the screen where the comments check box exists, there is a read more link that takes you to the facebook developers page where it discusses adding the facebook comments iframe.
If there is some other location where comment settings might also exist (past the three fields that require the 2 keys and the app name) I could not find them and this was not referenced in the plugin setup.

Links in fb canvas apps not working in IE

I created a canvas facebook app. The app itself was made in html and consisted of multiple different pages, the first page linking to the next, and so on... (links were assembled as simple html a tags with target="_self")
Everything seemed to be working fine in FF, Safari, Chrome, but not when we were testing in IE. It seems that redirecting within an iframe works different in IE, and it showed in the url of the browser:
When testing in FF,..., the url of the startpage would be apps.facebook.com/our-namespace, and after linking to the next page, this url in the browser would always remain that same apps.facebook.com/our-namespace.
When testing in IE, the url of the startpage would also be apps.facebook.com/our-namespace, but as soon as you hit one of the links, the url in the browser would change to apps.facebook.com/our-namespage/the-page-we-re-linking-to.php, not taking the target="_self" into account. When clicking on a comparable link again, the app would redirect to the start screen...
I spent hours trying to find an answer, I saw that changin IE's security settings would make it work:
in IE: go to Tools --> Internet Options --> Security --> Internet Zone --> Custom Level --> Miscellaneous --> Launch programs and files in an IFRAME. and make sure it is set to enabled
But this is not an acceptable solution as IE is configure different by default.
I found the solution was (in php) to add the following line to your code:
<?
header("p3p: CP=\"ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV\"");
?>
Problem solved! This should be in the facebook developer docs!!

Facebook “Like Box” and JQuery

I'm attempting to add a FB "Like Box" to a website I'm developing. Not too familiar with Facebook apps, but so far I've gone the non-IFRAME route, using the FB SDK script include.
I'm fairly certain I've got almost everything setup correctly. In fact, I see the widget appear when I visit the page UNCACHED (i.e. in FF, I hit CTRL+SHIFT+R to reload all content to avoid loading from cache). Once I revisit the site, or move around within the site by clicking links, the content does not reappear.
I'm wondering if it's an issue with a) the channel.php file, or b) the apps interaction with my use of JQuery. The channel.php file is verbain what is provided by Facebook (using PHP's caching mechanism).
Here's the site currently: http://www.morningfatty.com/demo - It might be easier to list this rather than post several code snippets.
I went to your website and didn't see the like box. I checked the HTML code and it all appeared fine. The div looked like <div data-header="false" data-stream="false" data-border-color="#40ADAD" data-show-faces="true" data-colorscheme="light" data-width="192" data-href="http://www.facebook.com/morningfatty" class="fb-like-box"></div>
I went to https://developers.facebook.com/docs/reference/plugins/like-box/ and tried your link http://www.facebook.com/morningfatty and lo-and-behold the like box didn't display there.
I tried going directly to http://www.facebook.com/morningfatty and it redirected me to http://www.facebook.com/MorningFatty. I noticed the change of case in the name. So I went back and tried http://www.facebook.com/MorningFatty in the like-box and it worked!!.
I believe that you page will work once you update the casing on the url. :)

Error when using mailto: link in Mobile Safari in app-capable mode

I've got a form in a web page with an action that is "mailto:email" (where email is a real email address). When I load this page in Mobile Safari in regular mode (ie, not launched from home screen with app-capable mode), this works fine - after I submit the form, the email app comes up. However, when I'm in app-capable mode and have launched from the home screen (so, no Safari chrome), and submit the form I get the error "URL can't be shown". However, a regular mailto: link (ie, not in a form) does work when in app-capable mode.
Has anyone else noticed this? Any workarounds? Are forms disallowed in app-capable mode?
Thanks,
Elisabeth
This accurately describes the issue. There is nothing wrong with the mailto link, the mailto link fails to load. Often the webapp crashes.
The funny thing is that tel: link for telephone numbers work fine.
window.location.replace does in-fact work. Thanks!
Here is the jQuery to fix this automatically...
$('a[href^=mailto]').click(function (event) {
event.preventDefault();
window.location.replace = $(this).attr('href');
return false;
});
I think I've figured this out. I noticed when in app-capable mode, any http link will take you out of the app and launch a separate mobile safari window, take you to the page and show the Safari chrome. Makes sense (typically one wouldn't link to anything from an "all in one" app-capable web app. I noticed this because I implemented a 4 page app with my own "tab bar" at the bottom and was linking amongst the .html files with plain http links in the a element. When I replace this with a javascript function to load the pages using document.location.replace this doesn't happen.
So, on the form - I think what must be happening is that because I'm using a scheme (in this case, mailto:) somehow the browser is needed in "regular mode" to interpret the scheme and do the right thing by launching the email app and this clearly doesn't work when submitting a form. I haven't yet found anything in the Apple documentation specifically about this, so if anyone knows the technical details, please do post!
UPDATE: I did find that I can access a server side script using a form in web-app mode, so I'm still curious about the mailto: issue, if anyone has an answer.
Thanks,
Elisabeth
I am having the exact same issue with mailto links not working in the web capable mode. I just got done submitting a bug report to Apple. Let's see what happens, meanwhile I found another dev. platform for web apps that works in web capable mode and mailto links work, but it is funny how it works in this even--it is not as fluid as it is in Safari. Because even in this new web dev tool that I found, it closes your app and launches mail client, which is lame. In Safari it just slides in a mail window that slides back out if you hit cancel or send--it doesn't actually close your app.
Here is a workaround that does not depend on JQuery:
aTmp = document.createElement("a");
aTmp.href="mailto:example#example.com?subject=Test&body=Hello.";
aTmp.click();
Update: To run this code from a bookmarklet you have to wait about 1000 ms before the bookmarks bezel is closed and the browser is ready to respond. I realized this by wrapping the code in a setTimeout function.