We Keep Coding

Javascript open new tab/window from a browser and load a different content inside the tab with javascript

I am using a Codeigniter framework. I have a link from a new tab/window from the browser which links my code to the profile of a user. Now I want to load a form from my opened tab which was rendered by javascript. Here is what I've done but it doesn't work.
let url = baseurl+'profile/'+applicant_profile_id;
let tab = window.open(url, '_blank');
tab.document.getElementById('#container__send_pm').(baseurl+"user/get/message_personal/"+applicant_profile_id, function(){
$('.pm__msg').click(function(e){
e.stopImmediatePropagation();
$('.spnner__msg_here').html(spiner);
$('.pm__msg').attr("disabled", true);
$.ajax({
url : baseurl+'user/send_message_execute/new_msg',
type : 'POST',
data : $('#email_pm').serialize(),
success : function(response) {
if(response == "success") {
swal('Message successfully sent', {
icon: "success",
});
$('.spnner__msg_here').html('');
$('.pm__msg').attr("disabled", false).val('Send Message');
location.reload();
}else {
swal('Message was not sent.');
$('.spnner__msg_here').html('');
$('.pm__msg').attr("disabled", false).val('Send Message');
location.reload();
}
}
});
});
return false;
});
As you can see i have an id tag of #container_send_pm in my newtab window and i want to load different content from my opened new tab. How can i do something like this?

Open chrome extension page programmatically in same tab as website

I am making an chrome-extension-based editor, and I want the user to be able to open a file within the extension when they receive a link like this: http://myeditor.com/link.html?file=xxxx
When going to that website I would like that:
if the person opening the url has the extension, open chrome-extension://blahblah/?file=xxx
else show a read-only version of the file and a link to install the extension.
Now to do that, I have in the link.html file a script that looks like this:
if (window.chrome) {
if (chrome.app.getDetails() === null) {
chrome.runtime.sendMessage(chromeId, { message: "isInstalled" }, function (reply) {
if (reply) {
chrome.runtime.sendMessage(chromeId, { gotoUrl: document.location.search });
}
});
}
}
and in the extension's background.html:
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
if (request) {
if (request.message) {
if (request.message == "isInstalled") {
sendResponse(true);
}
}
if (request.gotoUrl) {
var url = chrome.extension.getURL(request.gotoUrl);
chrome.tabs.create({url: url}); // how do I open this in the same tab rather than create a new tab?
}
}
return true;
});
The issue is that the code creates a new tab, is there a way I can open the extension page in the same tab as the page I called it from?

Actually chrome.tabs.update instead of chrome.tabs.create works fine...

Unable to hide a Gif image after file download from server.(C# and javascript)

I have a tricky situation :
There is UI which just has a button. On button click I process a PowerPoint document in the server (I add some relevant content to the slide) and then download it to the client system.
Now when the user clicks the download button, I show a small animated gif saying "processing", but when the PowerPoint file downloads into the client system I am not able to hide or disable the "processing image".
This is the Serverside Code:
HttpContext.Current.Response.ContentType = "APPLICATION /OCTET-STREAM";
String Header = "Attachment; Filename=" + FileName;
HttpContext.Current.Response.AppendHeader("Content-Disposition", Header);
//for the server
//for normal
System.IO.FileInfo Dfile = new System.IO.FileInfo(PPTPath);
HttpContext.Current.Response.WriteFile(Dfile.FullName);
This is the Client Side Code :
ShowProcessMessage = function(PanelName)
{
document.getElementById(PanelName).hidden = "";
document.getElementById("Image1").style.visibility = "visible";
return true; //Returns the control to the Server click event
}
Can anyone give some Ideas on how to implement?

Possible solution is do client side ajax call.
use beforeSend to show spinner and complete to hide spinner (complete triggers on succes of failure)
$.ajax({
url: linktoPdf
, beforeSend: function (xhr) { $('#idOfSpinner').addClass("showSpinner"); }
, complete: function () { $('#idOfSpinner').removeClass("showSpinner"); }
, success: function (response) { /*your code here */ }
, error: function () { /*your code here */ }
});

getting to grips with javascript callbacks - undefined callback data

My javascript skills are limited and I'm having a problem with the structure of a series of functions which I think need callbacks. I've been reading a number of posts and tutorials but it's not sticking...yet..
On my page I have a pop up modal which contains an image. If the user clicks the edit button it's to be edited in aviary. Once that's completed the image properties get saved into a database and then the images within the modal box - and the underlying form - should get updated with the edited image.
My series of events starts with the modal opening:
$('#editImageLink2').click(function(event) {
aviaryOnClick('image2', $(this).data('mode'), function(image) {
#do final bits here
});
});
Modal pops up then if the user clicks the edit button this next function starts the editor:
function aviaryOnClick(source, mode) {
editedImage = doAviary(source);
if (editedImage) {
return true;
} else {
return false;
}
}
So - aviary pops up as expected. Then when the user saves the edited image I'm starting to have trouble:
The doAviary function looks like this:
function doAviary(source) {
console.log("hit doAviary", source);
var featherEditor = new Aviary.Feather({
apiKey: 'XXXXXXXX',
apiVersion: 3,
theme: 'dark',
tools: 'all',
displayImageSize: true,
maxSize: 1200,
onSave: function(imageID, newURL) {
//replace image in modal preview
var img = document.getElementById(imageID);
img.src = newURL;
if (newURL != undefined) {
storeImage(newURL, updateFormImage(imageData));
featherEditor.close();
return true;
}
},
onError: function(errorObj) {
alert(errorObj.message);
return false;
}
});
return featherEditor.launch({
image: source,
url: $('#' + source).attr('src')
});
}
So I'm trying to run storeImage in the onSave event, which should then run a callback to the update images with the image data.
My storeImage function:
function storeImage(newURL, imageData) {
var options = new Object();
options.aviaryURL = newURL;
options.mode = mode;
options.dbID = ($('#dbID').val()) ? $('#dbID').val() : null;
//console.log("store image options object:", options);
jQuery.ajax({
url: '/filemanager/aviary',
type: 'POST',
dataType: 'json',
data: options,
complete: function(xhr, textStatus) {
//called when complete
},
success: function(data, textStatus, xhr) {
//called when successful
console.log("finished store image", data);
$.cookie('asset_filename', data.image.filename);
$.cookie('asset_id', data.image.id);
imageData(data);
},
error: function(xhr, textStatus, errorThrown) {
//called when there is an error
imageData(false);
}
});
so IF the image is saved the data should be passed back to the callback. If it fails it's false
Then in the update image function
function updateFormImage(data) {
if (data.result == 'success') {
image = data.image;
#simple updates of elements in page
}
}
My current problem is that on save I'm getting an error imageData is not defined - I'm not sure why this is - if it's waiting for ajax to complete before passing back the data to the callback it should exist.
Why does this error happen?
What better ways are there to refactor this code and use callbacks correctly.
I originally had a callback on the first function but got an error callback function not defined
Confused.
Thanks

imageData is not defined into doAviary.
Also, updateFormImage should return something (imageData).

Magnific popup closes on content click after replacing content

I am using Magnific Popup version 0.8.9.
I am loading content into it via Ajax, and I use a callback for ajaxContentAdded. This callback sets up an event handler for submitting a form that was loaded into the popup, like so:
$('.add-item-btn').magnificPopup({
type: 'ajax',
closeOnContentClick: false,
callbacks: {
ajaxContentAdded: HandleItemFormSubmit
}
});
This works fine, the form submit is handled correctly. The event handler function posts it to the server, which (in case of errors) returns the entire form including error messages.
For this purpose I let it replace the popup's content with the returned form, and setup the submit handler again.
function HandleItemFormSubmit()
{
var popup = this;
// Submit form using ajax
$('form.item-form').submit(function()
{
var data = $(this).serialize();
var url = $(this).attr('action');
$.post(url, data, function(resp)
{
if (resp == 'OK')
{
// All good, close up
popup.close();
}
else
{
// Show HTML from response (with errors)
popup.closeOnContentClick = false;
popup.content.replaceWith(resp);
popup.updateItemHTML();
HandleItemFormSubmit();
}
});
return false;
});
}
However, despite setting closeOnContentClick to false at two different points, the popup immediately closes when content is clicked after the content was replaced (it does work the first time).
The content in the popup has a single root element by the way.
I hope the author or someone else can help out here, I have no idea what is wrong here.
Thank you very much!

I've found another solution:
$('html').on('submit', '#UR_FORM', function(e) {
e.preventDefault();
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
var magnificPopup = $.magnificPopup.instance;
magnificPopup.items[0].type = "inline";
magnificPopup.items[0].src = response;
magnificPopup.updateItemHTML();
}
});
});

You need to call the HandleItemFormSubmit for the popup object:
HandleItemFormSubmit.call(popup);
Otherwise when you call it the way you do, HandleItemFormSubmit();, the this will be set to window and this will not work as expected.
Update
Use this in the else clause:
if (resp == 'OK')
{
popup.close();
}
else
{
// Show HTML from response (with errors)
popup.closeOnContentClick = false;
popup.content.replaceWith(resp);
popup.updateItemHTML();
HandleItemFormSubmit.call(popup);
}