We Keep Coding

Displaying Docs w/n a View Panel via a Dialog

I have an XPages app, whereas I have an XPage that contains a viewpanel and two Custom Controls...both custom controls are dialogs that are used to entered information. All this works perfectly. However, what I am interested in is: how do I get a handle on selected/clicked document and display it via a dialog. I am somewhat familiar for with the "var" variable w/n the viewpanel properties, but am not sure this is the right approach, or even how to finish it. Can someone advise as to how to accomplish this, or even if I should go about it differently? Thanks in advance.
onClick - vwColumn & pageURL event:
var dataRes;
if (rowData.isCategory()) {
return "";
}
var href = facesContext.getExternalContext().getRequest().getContextPath();
try {
var doc = rowData.getDocument();
if (doc != null) {
var docID = doc.getUniversalID();
var formType = rowData.getColumnValue("Form")
if(formType == "Memo") {
dataRes = href + "/memoXP.xsp?documentId=" + docID + "&action=openDocument";
} else {
dataRes = href + "/";
}
}
} catch (e) {
#WarningMessage(e)
}
if (doc != null) {
doc.recyle();
}
return dataRes;

Event triggered before data is inserted into page (After AJAX call)

This site (http://nelation.net/) loads pages by using AJAX and pushState. AJAX retrieves the contents of section#body and the path for the new CSS.
The following code sends the AJAX request, retrieves the new contents of section#body (page contents) and a new CSS path. Then it inserts those into the page, and after that it calls the "pageLoad" event - That's the event I believe is triggered too early.
function loadPage(url) {
var target = document.getElementById("body");
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.onreadystatechange = function() {
if (xhr.readyState < 4) {
target.innerHTML = "";
}
if (xhr.readyState == 4 && xhr.status == 200) {
// Function to decode the new page
var decodeEntities = (function() {
// this prevents any overhead from creating the object each time
var element = document.createElement('div');
function decodeHTMLEntities (str) {
if(str && typeof str === 'string') {
// strip script/html tags
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
element.innerHTML = str;
str = element.textContent;
element.textContent = '';
}
return str;
}
return decodeHTMLEntities;
})();
var resultJSON = JSON.parse(xhr.responseText);
var page = decodeEntities(resultJSON.page);
// Remove existing CSS and insert new one
$(".page-css").remove();
if (resultJSON.css != "none") {
$("<link/>", {
"class": "page-css",
rel: "stylesheet",
type: "text/css",
href: resultJSON.css
}).appendTo("head");
}
// Insert page contents, then trigger the pageLoad event
$(target).html(page);
$("body").trigger("pageLoad");
}
};
xhr.send();
}
// Detect link clicks, and make AJAX calls out of them + pushState.
$("body").on("click", '[data-ajax="true"]', function(event) {
event.preventDefault();
// detect which page has been selected
var newPage = $(this).attr("href");
if (newPage != window.location) {
window.history.pushState({path: newPage}, "", newPage);
}
loadPage(newPage);
});
The "pageLoad" event handler is found in this script. It re-executes most of the script, most notably the centerPlayButton_Featured() function if you're in the home page. That function resizes the overlay you see when you hover the image on the home page; It works fine when you load the page normally, but when you get to the page via AJAX it will not. The function is still executed (Logs to console), but I suspect it executes before the content is loaded properly into the page.
// DOES NOT RE-EXECUTE ON AJAX
function centerPlayButton_Featured() {
console.log("centerPlayButton_Featured() just executed");
var coverWidth = $("section.home-latest-release img.cover").width();
var coverHeight = $("section.home-latest-release img.cover").height();
$("section.home-latest-release div.cover-overlay").css({
"height": coverWidth + "px",
"width": coverHeight + "px"
});
}
$("body").click(function(e) {
if ($(e.target).hasClass("dropdown-text")) {
if ($(e.target).siblings(".menu").hasClass("open")) {
$(e.target).siblings(".menu").removeClass("open");
$(e.target).removeClass("open");
} else {
$(".dropdown .menu, .dropdown .dropdown-text").removeClass("open");
$(e.target).siblings(".menu").addClass("open");
$(e.target).addClass("open");
}
} else {
$(".dropdown .menu, .dropdown .dropdown-text").removeClass("open");
}
});
// RE-EXECUTES ON AJAX
$("body").on("pageLoad", function() {
$(function() {
// HOME PAGE
if ($("#body").children().hasClass("home-latest-release")) {
centerPlayButton_Featured();
$(window).on('resize', function() {
centerPlayButton_Featured();
});
}
// MUSIC PAGE
if ($("#body").children().hasClass("music-tracks")) {
//...
}
// CONTACT PAGE
$(function() {
if ($("#body").children().hasClass("contact")) {
$("textarea").bind("input", function() {
var offset = this.offsetHeight - this.clientHeight;
$(this).css("height", "auto").css("height", this.scrollHeight + offset);
});
}
});
});
});
$("body").trigger("pageLoad");
I appreciate any help/feedback. Go to the link to see more of the code, and tell me if you need to see the back-end. I apologize if the code is messy and comment-lacking. Thank you very much for the help.
Another problem I'm having is when you go to the music page, you may see all the dropdown menus fading out. Not as important as the main question, but help would be appreciated :)

The pageLoad event is not triggered because it is bound to the window load event:
$(window).bind("load", function() {
$("body").trigger("pageLoad");
});
load happens only once during the lifetime of a window, and that time has long passed when an ajax request can even start. Trigger pageLoad directly.
$(function () {...}) is executed once when the DOM has finished loading. Effectively, you are wrapping the code to be executed twice with the same event load which only happens once. Execute your setup code directly inside the pageLoad event handler. I'd write it like this:
function pageSetup () {
// HOME/MUSIC/CONTACT PAGE setup code
}
$("body").on("pageLoad", pageSetup);
pageSetup();

How to get the URL of a <img> that has been redirected? [duplicate]

If there is an img tag in a page whose final image it displays comes after a 302 redirect, is there a way with javascript to obtain what that final URL is after the redirect? Using javascript on img.src just gets the first URL (what's in the page), not what it was redirected to.
Here's a jsfiddle illustration: http://jsfiddle.net/jfriend00/Zp4zG/

No, this is not possible. src is an attribute and it does not change.

I know this question is old, and was already marked answered, but another question that I was trying to answer was marked as a duplicate of this, and I don't see any indication in any of the existing answers that you can get the true URL via the HTTP header. A simple example (assuming a single image tag on your page) would be something like this...
var req = new XMLHttpRequest();
req.onreadystatechange=function() {
if (req.readyState===4) {// && req.status===200) {
alert("actual url: " + req.responseURL);
}
}
req.open('GET', $('img').prop('src'), true);
req.send();

If you are open to using third party proxy this can be done. Obviously not a javascript solution This one uses the proxy service from cors-anywhere.herokuapp.com. Just adding this solution for people who are open to proxies and reluctant to implement this in backend.
Here is a fork of the original fiddle
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$.ajax({
type: 'HEAD', //'GET'
url:document.getElementById("testImage").src,
success: function(data, textStatus, request){
alert(request.getResponseHeader('X-Final-Url'));
},
error: function (request, textStatus, errorThrown) {
alert(request.getResponseHeader('X-Final-Url'));
}
});

based on http://jsfiddle.net/jfriend00/Zp4zG, this snippets works in Firefox 17.0:
alert(document.getElementById("testImage").baseURI)
It doesn't work in Chrome. Not tested anything else-

Here is a workaround that I found out. But it works only if the image on the same domain otherwise you will get an empty string:
var img = document.getElementById("img");
getSrc(img.getAttribute("src"), function (realSrc) {
alert("Real src is: " + realSrc);
});
function getSrc(src, cb) {
var iframe = document.createElement("iframe"),
b = document.getElementsByTagName("body")[0];
iframe.src = src;
iframe.className = "hidden";
iframe.onload = function () {
var val;
try {
val = this.contentWindow.location.href;
} catch (e) {
val = "";
}
if (cb) {
cb(val);
}
b.removeChild(this);
};
b.appendChild(iframe);
}
http://jsfiddle.net/infous/53Layyhg/1/

Difficulty Loading New Page w/ Javascript

I'm writing a basic Flask app. I have a page called /searchByCollege that consists of a bunch of buttons, each with a team name as their text, and .college as their class.
I've written some JS so that, when the user clicks on a button, it'll load /searchByCollege/collegeName, where collegeName is the text of the button they just clicked on. Here's what I have:
<script>
$('.college').on('click', function() {
var baseURL = $('#baseURL').text();
var finalURL = baseURL + "/" + this.text();
window.location.href = finalURL;
return false;
})
</script>
I didn't originally include return false; and nothing happened upon clicking a button. Then I added return false; and I got the same result. I've inspected the HTML and the base URL is correct (it's just /searchByCollege). I've looked at the requests as I click on the button and none are being made.
I've loaded jQuery above this through Google's CDN so that's not the issue.
Any other ideas?
Thanks for the help,
bclayman

this.text()
needs to be changed to
$(this).text()

You need to wait for the document to load by using $(document).ready:
<script>
$(document).ready(function(){
$('.college').on('click', function() {
var baseURL = $('#baseURL').text();
var finalURL = baseURL + "/" + this.text();
window.location.href = finalURL;
return false;
});
});
</script>

I could not figure out where you were getting the 'baseURL' Since you are using just JQuery you need to call .value and not .text()
<button class="college" value="CSU">CSU</button>
$('.college').on('click', function(){
var baseURL = "/searchByCollege";
var finalURL = baseURL + "/" + this.value;
return false;
});

you can try this
window.location.hostname = finalURL;
window.location.pathname = '';

How to use onhashchange with dynamic items

So, I have two select boxes on a webpage, but in different anchors (one on the page, the other in an iframe) and I'm trying to get the code to detect which anchor it's in, and then relay the selected value in that box to a link. Here's my code:
function locationHashChanged() {
if (location.hash === "#player") {
function setText(text) {
var selectVal = text;
var url = $('twitter').attr("href");
url = 'https://twitter.com/intent/tweet?button_hashtag=stream&text=Just enjoying ' + selectVal + ' on';
$('#twitter').attr("href", url);
}
}
if (location.hash === "#embeds") {
$(function () {
var $twitter = $('twitter');
$('#iframe').on('load', function () {
$(this).contents().find('#cds').change(function () {
var selectVal = $(this).val() || 'nothing much';
url = 'https://twitter.com/intent/tweet?button_hashtag=stream&text=Just enjoying ' + selectVal + ' on';
$('#twitter').attr("href", url);
}).change();
});
});
}
}
I know this is probably not right, or anywhere near right, but am I on the right track? I'm honestly a complete noob when it comes to javascript. Thanks in advance

Apart from what exactly your function looks like, it's not executed on hash change right now.
You use jQuery, so you can listen for hash change like this:
$(window).on('hashchange', function() {
// your locationHashChanged() function goes here
});
With this, every time the hash changes your function will be executed. The very base of your code is alright:
if (location.hash === "#player") {
// this is executed if hash changed to #player
}
if (location.hash === "#embeds") {
// this is executed if hash changed to #embeds
}
Although, inside your if blocks you declare functions (which doesn't make much sense here).
Also note that if the iframe is not from your domain, you won't be able to get any data from it. If that's the case, read more about same origin policy.