How to include javascript file in to dynamically created modal window? - javascript

I have a photo gallery that use modal window to display photos. During modal windows initialisation I'm inserting rest of photo functionality (share button, comment, tags, etc). Everything works well except facebook share button. From documentation you have to include following html code:
<a name="fb_share">share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script>
It works perfectly for static pages, but not with the pages that created on the fly.
Here is example of my javascript code (using jQuery)
//Insert share button
$.gallery.facebookLike.insertAfter($('#cboxContent #cboxLoadedContent'));
//Insert script element after share button
$('<script />', {
src : 'http://static.ak.fbcdn.net/connect.php/js/FB.Share',
type: 'text/javascript'
}).insertAfter($.gallery.facebookLike);
As result button inserted but script element is not initialised, after inspection in firebug this script appears in loaded script tab but not present on HTML tab. However if you click on the share link it sends you to facebook page and when you click BACK button in your browser the script gets initialised.
What am I doing wrong and what can be done about it?

I'm just taking a guess here, but I believe the script has a function running on window onload event. Since the window is already loaded, the script isn't running.
Edit: Yes, it seems that the function FB.Share.stopScan is being run on window load. You should try manually calling that function.

Related

Wordpress, how to debug Javascript to check a specific behavior

I need to debug Javascript to check which function is called on a specific behavior.
To be more specific, when we click inside an iframe, all the page or at least the iframe is reloaded, so loaded 2 times.
For example, if you take a look at this page:
https://artetcadres.fr/art-et-images/#collection/hopper/
and click on the artist "Klimt", the main page activate a javascript function, display this image on the entire page and reload the iframe content.
I tried with the Chrome Devtools but can't figure out which function is called display the image "Loading..." and reload the iframe.
It's reloaded maybe because the url is dynamically updated. The anchor #collection/hopper/ will become #collection/klimt/.
This strange behavior appeared after an wordpress upgrade.

Using Javascript to redirect to an anchor

I have a website that's mostly generated via PHP and uses the jQuery library (v1.11.1). My problem is that I would like to link to anchor tags that are generated dynamically on separate pages.
For example, I have the following link on index.php?page=Home:
And on the page that's loaded when $_GET[page] == "ABC," I have the anchor:
<a name="firstItem"></a>
So far, so good. But when I try to click the link, it redirects to the page without jumping to the anchor. The same behaviour happens if I click Reload. However, if I enter the URL directly into the browser window, it DOES jump to the anchor.
I've found that the problem goes away if I delete the "function detach()" from the jQuery file, but then some other libraries that I've loaded fail to work. Any suggestions?

Hyperlink + Javascript = One click?

Is it possible to integrate a javascript into a hyperlink? Or make it into some sort of batch script or whatnot, so when the page has loaded it calls the javascript which is a button on the page?
To explain it further:
We have this page:
http://work.acceptance.XXXX.com/XXXX_Raffle/Lists/Raffle/overview.aspx
The sharepoint page has a survey on it.
To get the "popup" window to show, so you can answer a question in the survey, you need to press a button which calls this script:
javascript:__doPostBack('ctl00$m$g_e999ab40_719f_42fb_bd61_d986f232bdd5$ctl01$ctl00$toolBarTbl$RptControls$ctl00$diidIONewItem','');
So, is it possible to somehow combine the page + the javascript, so all they have to do is press one link or alternatively, a hyperlink which goes to a file on a server which triggers all this, so they instantly get to the page + the javascript automatically pops so they dont have to press the button?
Keep in mind, when I say "hyperlink" I mean the kind of hyperlink you would see in an email. A simple link to a website or a server location.
I'm not very good at everything that has to do with programming and webdesign, but I do have access to the sharepoint, though I'd need serious guiding in how to add anything there other than simple webparts. It's SharePoint Server 2010.
Here is a picture of the button and what happens when you press it.
http://i.stack.imgur.com/gKCG5.jpg
Add an onload event to the page to get it to show the popup:
<script type="text/javascript">
window.onload = showPopup();
function showPopup() {
__doPostBack('ctl00$m$g_e999ab40_719f_42fb_bd61_d986f232bdd5$ctl01$ctl00$toolBarTbl$RptControls$ctl00$diidIONewItem','');
}
</script>
This needs to go on the page that you're linking to so that the link takes you to this page which then fires this onload. Put it before the closing tag on the page.
No. You cannot construct a URL that will load a document and then call some JavaScript.
You would have to modify the page you are linking to so it runs the JS automatically. It could look at the URL and run that function conditionally though (e.g. if (location.hash === '#foo') { ... }.)

trying to close a pop up window after submitting a link on click

i have a page in joomla that i am generating a pdf off of using the pdfmyurl service. to call the service you click a link.
ie:
click to generate pdf
so you click a link on the main page which opens a "pdf-able" page in a popup window which then has a link to the above. (this is how joomla operates with printing pages).
this all works perfectly. but, i would like to close the popup when the link is clicked but AFTER the pdf is generated. if i use onclick="window.close();" method in the link the window closes before the pdf is generated.
i would like to solve this using jquery.
Use window.open, keep a reference to the window, and then go ahead and trigger window.close() when the PDF is finished loading (instead of the href). the only question is -- do you have any hooks to determine when the PDF has completed loading?
Reference: http://www.quirksmode.org/js/popup.html (mdn isn't working for me, but here's thelink: https://developer.mozilla.org/en-US/docs/DOM/window.open)
create a link or element with 'closePdf' id:
$('#closePdf').click( function() {
$('#whateverYourPDFContainerIdIs').remove();
});

Prevent PrettyPhoto from closing

the script i created uses PrettyPhoto to load an ifram on which there is an upload page going on, the upload works great the image is uploaded and the url is returned back to the page for preview, but not saved into the database just yet...
so far so good, i just want to add a function that if a picture is not saved and the user hits close button it will promt to either save or dismiss which it will make an ajax call to either remove the uploaded picture or save its url into the database
does anyone have an idea how to do that? not the ajax part i have everything under control, just need to know how to prevent the prettyphoto close button from closing directly
ps: i tried the callback function but what it does it that it closes then executes, but i need the execution to be done before closing
any help would be much appreciated
thank you
you can tweak the prettyPhoto js code but that will effect all your popups, so as you found the workaround of the close function inside the iframe then that's it, you didn't have to duplicate themes and hide the close button on the its stylesheet, you could have simply let jquery do so from withing the iframe, just include this code into your iframe
<script type="text/javascript">
$(document).ready(function() {
window.parent.$('.pp_close').css('display', 'none');
});
</script>

Categories

Resources