Call lightbox from javascript function - javascript

I have a webpage with the following code:
<script>
$("button").click(function(){
var loc = window.location.href;
$.post("../cgi-bin/test.py",
{stuff_for_python: loc},
function myFunction(data) {
window.open("/img/" + data);
});
});
</script>
When clicked, the button sends the current URL as a variable to a python script, which then formats it and queries a MySQL database to get the name an image file that is paired with this unique URL. The image name is then sent back to the page, where it is opened for viewing.
All the pieces are working together and the image is displaying correctly. What I would like to do now is to open the image in Lightbox (or a similar product). Can this be done? If so, how?

Example using http://www.jacklmoore.com/colorbox/
$("button").click(function(){
var loc = window.location.href;
$.post("../cgi-bin/test.py",
{stuff_for_python: loc},
function myFunction(data) {
$.colorbox({html:"<img src=\"/img/" + data + "\" />"});
});
});
Or this maybe work better (sorry, I have not used colorbox in a while):
$.colorbox({href:"/img/" + data});

Related

How can jQuery append() with backquote (``) miss/won't render a string variable?

I'm building several carousels on a webpage with jQuery by calling all the information I need from YouTube with the Youtube Data API v3.
After doing the designing and the functions I'm struggling with one simple thing that I cannot understand.
I use append(``) so that I can append all the HTML that I need to the element that I want, and also inserting other informations with the variables in the ${var} notation.
Everything works fine EXCEPT for a single string variable preview. It's like it not recognized as a variable and in the final output is rendered like a string chunck.
Now some code.
This is the preparation for calling the function that loads everything:
jQuery(document).ready(function () {
var apikey = 'my-api-key';
var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';
var playlists = {
1: 'PL549CFEF61BF98279',
2: 'PLX_IxBH-yGtonzSE2zyplhI2oky7FWvbE',
3: 'PL038B3F56D598DD61',
4: 'PLDDFDDD10E5584056',
5: 'PLD4F65416EB11640F',
}
loadVids(apikey, URL, playlists);
});
Next loadVids, for every youtube playlist call getJSON() and retrieve the data:
function loadVids(apikey, URL, playlists) {
for (const menuid in playlists) {
var options = { part: 'snippet', key: apikey, maxResults: 20, playlistId: playlists[menuid] }
jQuery.getJSON(URL, options, function (data) {
resultsLoop(data, menuid, apikey);
});
}
}
then resultLoop using each() puts all the information inside some HTML to be appended somewhere in the webpage (i stripped all the original attributes to keep it readable).
function resultsLoop(data, menuid) {
jQuery.each(data.items, function () {
var alttext = this.snippet.title;
var title = alttext.substring(0, 57) + '…'
var vid = this.snippet.resourceId.videoId;
var preview = this.snippet.thumbnails.standard.url;
jQuery("#carousel-" + menuid + " ul")
.append(`
<li>
<article>
<div>
<a href="//www.youtube.com/watch?v=${vid}&fs=1&autoplay=0&rel=0">
<img alt="${alttext}" src="${preview}">
</a>
</div>
<div>
<h4>${title}</h4>
</div>
</article>
</li>
`);
});
}
At the end of it the <img> tag is
<img alt="some text" src="/$%7Bpreview%7D">
I tried to:
change the name of the variable
console logging it before, after append(), without issues
typeof says it's a normal string
it gives me the same result on every browser
I really don't understand what I'm doing wrong, and only preview doesn't work, all the other variables in the append() are working properly.
Why you are not using concat as you have already did for jQuery("#carousel-" + menuid + " ul") !!
Example: (Please use this code for append and check, I have used single quote and not backquote as it is not accepted by js validation)
jQuery("#carousel-" + menuid + " ul").append('<li><article><div><img alt="'+alttext+'" src="'+preview+'"></div><div><h4>'+title+'</h4></div></article></li>');
and remove all white spaces from the append string. I hope it is what looking for.
Just to let you know, all the above was working on a Joomla page.
Taking all the code, apart from the jQuery(document).ready(function(){...loadVids()...}, and putting it on a .js file resolved everything.
I think there is some filter that won't let you inject external resources like https://i.ytimg.com/vi/lmuUD9_eDnY/sddefault.jpg in the page with javascript alone (and that's clever), but the filter doesn't apply if you include a .js file within the website itself.
A mediocre workaround for a mediocre javascript code. Thanks to Rory in the comments that gave me some insight.

Get URL Title from External URL without loading whole Website

I have a javascript code which shows all the urls in a textarea / textbox. I would like to show the web title of those urls. But I don't want to load the whole website (get_content) as it manipulates the other javascripts on my page. How can I show the title?
My Code
<script>
let result = $("#converted_url");
$("#textarea_input").on("input", function() {
result.html("");
var urlRegex = /(?:(?:http|https):\/\/)?([-a-zA-Z0-9.]{2,256}\.[a-z]{2,4})\b(?:\/[-a-zA-Z0-9#:%_\+.~#?&//=]*)?/gi;
var found = [];
$("#textarea_input").val().replace(urlRegex, function(url) {
let trimmedUrl = url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "");
if (found.includes(trimmedUrl)) {
return;
}
found.push(trimmedUrl);
var link = '<a target="_blank" href="' + url + '">' + TITLE + '</a>';
result.append(link);
});
});
</script>
Should output something like this:
Simply put: you can't. The title of a webpage is only stored in its HTML content, so without downloading that content, you can't get the title. I don't understand what you mean by "it manipulates the Javascripts on my page" -- if you make an AJAX call to the URL you want (assuming it's same-domain or has CORS enabled), you'll get back the raw source code as a string to parse as you wish, and it won't affect anything else on your page.

Redirect Window from iFrame

I was hoping somebody could please assist on a problem I am currently having. I have an IFrame named IFrame1 implemented on a client website. On the client website they have certain information of the user in the QueryString for instance clientwebsite.com/login.aspx?UserID=xxxx&UserName=xxxx.
Using MVC what would be the best way of retrieving the entire querystring while I only have an IFrame on the website?
I tried using JavaScript to retrieve the window.location but this only displays the URL where my IFrame is deployed (MyServer.com) and not where it has been implemented(clientwebsite.com). I also tried using C# HttpRequest.QueryString. This also just displays the URL where my solution was deployed and not the client website URL.
If anybody has any suggestions it would be greatly appreciated.
EDIT
I tried using the window.parent.location as many suggest. I wrote a small webpage where I just pull the code and display it as follows :
<script type="text/javascript">
document.write("window.location.href : " + window.location.href + "<br />");
document.write("window.parent.location : " + window.parent.location + "<br />");
document.write("document.referrer : " + document.referrer + "<br />");
</script>
When I run this page I get the result as follows :
window.location.href http://mywebsite.com/test
window.parent.location http://mywebsite.com/test
document.referrer
Which is fine but when I view this through the clientwebsite it onlyu displays the href value but neither the window.parent.location label or the value. Can this be caused due to permissions?
You should try using :
var parentUrl = window.parent.location;
window.parent will get you inside the parent window and then you can do anything with the parent window.
Hi Ruben,
I believe you need to add window.parent.location.search . You can do something like this for query string. This answer was provided by Marwan:
function getQueryString() {
var queryStringKeyValue = window.parent.location.search.replace('?', '').split('&');
var qsJsonObject = {};
if (queryStringKeyValue != '') {
for (i = 0; i < queryStringKeyValue.length; i++) {
qsJsonObject[queryStringKeyValue[i].split('=')[0]] = queryStringKeyValue[i].split('=')[1];
}
}
return qsJsonObject;
}
Just call it from the child window like this and act with the query string as an object.
For example if you have the query string ?name=stack and you want to get it, try:
getQueryString().name
This will return stack.

jQuery hiding content based on url

hi all i am trying to hide content for a ppc campaign, so if they come from the link they will have something like "/?utm_source=google" on the url
Ive got the following but it only works for that exact url
var url = "http://mysite.com/?utm_source=google";
if (location.href==url){
$('div').hide();
}
Ideally it needs to work for multiple pages i.e. http://mysite.com/page-one/?utm_source=google
Just wondering if anyone knows a way around this?
use a regexp match:
if (location.href.match(/utm\_source\=google/ig)){
$('div').hide();
}
var option = 'coke';
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();
}
Read the Contents

Need an alternative for iframes for jQuery ui tabs

I have a Spring based web app working with with jQuery Tabs.
I bulid up a data string (containg specific) and append to a URL
var hrefData = "?" + item1 + "&" + item2 + "&" + item3;
var href = "myURL";
href = href + hrefData;
basically I use the following to load the URL into my jQuery based tab:
$( ui.panel ).append( '<iframe frameborder="0" style="border:0px" src="'+href+'" width="100%" height="100%"></iframe>');
My servlet controller receives this URL and I get the paramaters from the string and process, returning the resulting data & page, which is displayed within the iframe stated above.
I dont want to use iframe for this. Can someone suggest an alternative solution or provide an example, to perhaps write the HTML to the tab panel instead, or something similar.
Thanks
I have also tried this:
$.get(href, function(data){
alert("Data Loaded: " + data);
$('ui.panel').append(data); // also tried .load(data);
});
But this doesn't work.
Please help
How about using jQuery load()?
$('ui.panel').load(href);
http://api.jquery.com/load/
How about using client side templates (handlebars.js, but many other very good alternatives).
The reply will be a simple JSON object that will be mapped into the client side template (instead of, say, a JSP page).

Categories