We Keep Coding

window.print(); load Issue

I tried to print something using window.print();
It is working, but whenever I click my print button for the second time without reloading the page (which is unnecessary),
the window print will appear again even though I already click on close button.
After the code runs until $('#main').show(); , it goes back to window.print(); again.
And if I tried for the third time, it will reload the window print 3 times and so on.
I'm not sure how to terminate the query after I close the window for the first time.
I do not want the window to be reloaded again.
This is my code;
self.QrCode = ko.observable("../Content/img/qr-code (1).png");
self.GetQrCode = function (obj) {
var ID = obj.Id;
$.ajax({
url: '/QC/GetQrCode',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: { rejectsId: ID },
success: function (rejectsId) {
self.QrCode(rejectsId.QRCode);
self.PrintQrCode();
}
});
}
self.PrintQrCode = function (obj) {
$('#main').hide();
$('#QrCodePrint').show();
$("#test").on("load", function () {
window.print();
$('#QrCodePrint').hide();
$('#main').show();
return false;
});
}

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?

Javascript: Buttons disabled after reloading DIV

I have got a form with two tabs, on both tabs you can edit data and submit your changes which is working already.
Now I want the tab where you made changes to get reloaded after you changed something (e.g. a picture URL and the thumbnail should get refreshed) to see the changes.
I have this code for the second tab
<script>
$(document).ready(function(){
$('.btn').click(function(){
var clickBtnValue = $(this).val();
if(clickBtnValue == 'Save') {
var ajaxurl = 'ajax.php',
data = $('form').serialize();
$.post(ajaxurl, data, function (response) {
if(response == '')
{
alert("Successfully saved");
location.href="catalog.php";
}
else alert(response);
});
}
else if(clickBtnValue == 'Save & Continue Edit')
{
var ajaxurl = 'ajax.php',
data = $('form').serialize();
$.post(ajaxurl, data, function (response) {
if(response == '') alert("Successfully saved");
else alert(response);
});
}
else if(clickBtnValue == 'Add new Item')
{
var ajaxurl = 'ajax.php',
data = $('#itemform').serialize();
$.post(ajaxurl, data, function (response) {
if(response == '')
{
alert("Successfully added new Item");
location.href="catalog.php";
}
else alert(response);
});
}
else if(clickBtnValue == 'Save Images')
{
var ajaxurl = 'saveimages.php',
data = $('#imageform').serialize();
$.post(ajaxurl, data, function (response) {
if(response == '')
{
alert("Successfully saved");
$("#tab_images").load(location.href+" #tab_images>*","");
}
else alert(response);
});
}
});
});
Everything is working until now, the data get saved and the DIV reloads, but now whenever I try to press a button nothing happens, even on the first tab.
What am I doing wrong?
EDIT:
My Tab Code: http://i.epvpimg.com/9SaKb.png
Can't post it here since it is too long so I had to make a screenshot.

It looks like the buttons you try to click are inside the div what you are reloading. When the content of that div is replaces, all the elements you fetched with ajax are considered as new - that also means that the click handlers you had previously on those buttons are also lost - hence they don't react the same way :D
try binding the event not on the button itself but an element outside the div that is being replaced
$("parent_selector_outside_ajax_div").on("click", ".btn", function() {
//your button function
});
read move about event delegation with jQuery at http://api.jquery.com/on/
As your external js library binds it's own buttons I suggest moving those buttons outside the div you are trying to update (which shouln't be a big problem as you are trying to update only for the sake of them image previews? :D).
The other alternative (which I wouln't do) would be to rebind those buttons again after the ajax has reloaded by calling whatever function the library offers to initialize itself. If your application is long lived, you also should, before replacing the old content with a new one, remove all the event handlers from the current content, to avoid possible memory leaks in some browsers (not sure what is your target audience).

how to prevent current window tab page reload when another window tab is being opened?

I would like to know how I can prevent the current window tab page reload when another window tab is being opened. Actually, I have page in which there is a search field. After filling the search field and clicking on the search button, a new window tab (at the same window) will be opened. This is a part of the javascript code which is belonged to opening the new window tab after that the search button is clicked:
function affichegroupe(){
var x = document.forms["formrecherche"]["recherche"].value;
function ret(a){
var par = a;
var result;
$.ajax({
type: "POST",
url: '{{asset('bundles/ikprojhome/recherche/moslem14.php')}}',
//dataType: 'JSON',
data:{par:par},
async: false,
success: function(data) {
result = data;
return;
}
});
return result;
}
var idgroupe = ret(x);
//window.open(Pathmgroupe.replace('__REPLACEME__', idgroupe));
var ch = Pathmgroupe1.replace('__REPLACEME__', idgroupe);
var ch1 = ch.replace('__REPLACEME2__', visitorid);
location.unload();
window.open(ch1);
return;
}
Please focus on this line of the code above: location.unload();.
The problem is that when the new window tab page is opened the current window tab page is reloaded ! .. So my question is: Is it possible to prevent the current window tab reload in case that a new window tab page is opened?...If yes, how?? and what is wrong in my code?

Make sure that you preventDefault submit:
document.forms["formrecherche"].addEventListener('submit', function(event) {
event.preventDefault();
});

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);
}