I have an Iframe with formwhi fields wich sent data to php file through ajax. If it was successful I close iframe (it is working) and create new one with another information. So question is: how to close the old iframe and open another one?
so here is ajax function that works but doesn't open a new iframe
the function opening a new iframe work by it self but doesn't work in ajax. Where is a problem?
$.ajax({
type: "POST",
url: "sign.php",
data: {name : name,
data: canvasData
},
success: function () {
//frame_activation(); //if it will be here it will open iframe inside the old one iframe.
alert('done');
close_frame (); //closing frame with form
$(body).html(argument[0]);
//windows.top.frame_activation();
frame_activation(); // does't work, doesn't open a new iframe
}
});
So the result is - the old iframe sent information and close it, but doesn't open a new iframe.
frame activation :
function frame_activation() {
//document.getElementById('bg_frame').style.visibility = 'visible';
reg = document.createElement('iframe');
document.body.appendChild(reg);
reg.id = 'iframe';
reg.src = 'activate.html';
reg.style.width='600px';
reg.style.height='200px';
position_frame(reg);
reg.style.border='solid 5px #d4d4d4';
alert('here');
return false;
}
function to close iframe:
function close_frame () {
parent.document.getElementById('bg_frame').style.visibility = 'hidden';
var el = parent.document.getElementById('iframe');
el.style.display='none';
parent.document.body.removeChild(el);
return(false);
}
function for creating first iframe with fields
function frame_reg() {
document.getElementById('bg_frame').style.visibility = 'visible';
reg = document.createElement('iframe');
document.body.appendChild(reg);
reg.id = 'iframe';
reg.src = 'frame.html';
reg.style.width='640px';
reg.style.height='400px';
position_frame(reg);
reg.style.border='solid 5px #d4d4d4';
return false;
}
Related
Really stuck on this one, I've inherited a website that was built using a page builder vomits
I've created a script that guards the downloads on this page (resources) the user must fill out a form and input their details, the form submission works correctly and when it completes I open the resource using window.open(href, '_blank') this works correctly on the first submit but if you try and download a second resource it always returns the first clicked href and opens that.
Here is my code: Im getting all the anchors on the page, looping over them and adding an onClick event listener, when a user clicks the link it opens the modal, then jquery to submit the form. As you can see in the comments the href is logged correctly when outside of the submit function, however when inside the submit function it always reverts back to the first href clicked.
e.g user clicks resource1, submits the form and downloads, user then clicks resource2, submits the form but is directed to resource1 :'(
jQuery(document).ready(function ($) {
const anchors = Array.from(
document.querySelectorAll('.page-id-17757 .elementor-element-7121f28 .elementor-widget-icon-list a')
);
const modal = document.querySelector('#resources-modal');
function getFormData($form) {
var unindexed_array = $form.serializeArray();
var indexed_array = {
data: {},
};
$.map(unindexed_array, function (n, i) {
indexed_array.data[n['name']] = n['value'];
});
return indexed_array;
}
function updateFormResponse(status, anchor) {
if (status == 200) {
$('.form-response').html('Success.');
modal.close();
$('.form-response').html('');
$('#resources-submit').prop('disabled', false);
} else {
$('.form-response').html('There has been an error, please refresh the page and try again');
$$('#resources-submit').prop('disabled', false);
}
}
anchors.forEach((anchor) => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
modal.showModal();
let href = e.target.parentElement.href;
$('.resources-download').submit(function (e) {
console.log(e);
e.preventDefault();
e.stopImmediatePropagation();
let form = $(this);
$('#resources-submit').prop('disabled', true);
let formData = getFormData(form);
$.ajax({
url: '/wp-content/themes/hello-elementor/raisley/resources-download.php',
type: 'POST',
data: formData,
dataType: 'json',
complete: function (data) {
updateFormResponse(data.status, href);
if (data.status == 200) downloadResource();
},
});
});
console.log(href); // this logs the correct href
function downloadResource() {
console.log(href); // logs incorrect href, always returns the first clicked href
window.open(href, '_blank');
}
});
});
});
I'm really struggling with this one, need some pro help please!
Thanks,
I have an iframe inside my page with the following code:
...
<script language="javascript" type="text/javascript">
function clearMessage() {
window.print();
}
$(function () {
var state=0;
if (state==1) {
window.print();
window.opener.location = window.opener.location.href;
}
var sentToPrint=0;
if (sentToPrint==1)
{
window.print();
window.opener.location = window.opener.location.href;
}
});
window.onunload = refreshParent;
function refreshParent() {
if (('1') == '1') {
window.opener.location = window.opener.location.href;
//window.opener.location = 'mainPage.aspx'
}
}
</script>
...
Basically what it does is printing the page on form submit or if I having
"print=1" in the URL, which in my case I sending "print=0" because I don't want the iframe to be printed.
so I want to disable this part or removing this part form my parent page using jQuery.
Is there any way to disable the printing function or removing it from the iframe?
thank you!
If you don't want iframe part to be printed then use print media query #media print to hide that iframe while printing
#media print {
iframe {
display: none;
}
}
Finally, I found how to submit the form without printing the page,
I just copied the inputs from the iframe and submitted the form using ajax
$('#myFrame').one('load', function(){
var eventTriger = $("#myFrame").contents().find("#__EVENTTARGET").val();
var eventArgu = $("#myFrame").contents().find("#__EVENTARGUMENT").val();
var viewState = $("#myFrame").contents().find("#__VIEWSTATE").val();
var json = {
'__EVENTTARGET' : eventTriger,
'__EVENTARGUMENT' : eventArgu,
'__VIEWSTATE' : viewState
};
var request = $.ajax({
url: "url",
type: "POST",
data: json,
dataType: "html"
});
});
I'm working with a Google-Extention which allows me to open a new tab containing a form. After the form gets filled out and saved, every time I open this tab again the form should be prefilled with the data saved earlier.
Here is how the data gets saved: WORKS!
function saveCheckoutData() {
var vName = document.getElementById('txbx_name').value;
chrome.storage.sync.set({'name': vName}, function() {
console.log(vName);
})
}
Here is how i get the data: WORKS!
function getdata() {
chrome.storage.sync.get('name', function(data) {
var name = data.name;
if(name != null){
document.getElementById("txbx_name").value = name;
}
});
}
The code above gets called on button click and works perfectly!
But as soon I try to do this when the tab gets opened it doesn't work (the tab gets opened but there is nothing in the textbox): DOESN'T WORK!
function configAutofill(){
var newURL = "autofill_data.html";
chrome.tabs.create({ url: newURL });
chrome.storage.sync.get('name', function(data) {
var name = data.name;
if(name != null){
document.getElementById("txbx_name").value = name;
}
});
}
Does some one have an Idea why these lines do not work when creating a new tab?
Many thanks in advance.
Here's a question for you.
After creating a new tab, you access document.getElementById. Yes, but which document?
In your case, it would be the page calling create - which is not the created page.
In your case, it seems like you're opening a page that's part of the extension. Then you should just include code in it that will run on load.
You may want to check document.readyState:
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', getdata);
} else {
getdata();
}
If you're trying to do this with a webpage, you'll need a content script. Again, those normally execute after DOM is parsed - so just call getdata() at top level.
On a button click I'm calling a python script and I'm populating the result into an array. Once done, I create <a href> as many <a href> objects as the length of the array. Problem is, once the links are displayed, they vanish immediately.
Body:
//I obviously get the same effect by putting the onclick event in the submit button
window.onload = function() {
alert("loaded");
document.getElementById('submit_searchsubs').onclick = function () {
FindSubtitles();
};
};
function FindSubtitles() {
postData = {"movie": "Outlander", "season":"1", "episode":"2"};
$.ajax({
url: "/cgi-bin/find_subtitles.py",
type: "post",
datatype:"json",
async : false,
data: {postData},
success: function(response){
var subs = new Array();
var json = $.parseJSON(response);
for (var i=0;i<json.length;++i) {
subs[i] = new Array(json[i].IDSubtitle, json[i].SeriesEpisode, json[i].SubHash, json[i].SubDownloadsCnt, json[i].SeriesSeason, json[i].ZipDownloadLink, json[i].MovieName, json[i].id, json[i].SubFileName);
}
DisplaySubtitles(subs); //show the users the new words found in this subtitle
}
})
.fail(function(err) {
alert("error" + err);
});
}
function DisplaySubtitles(subs) {
var SubtitleDiv = document.getElementById("SubtitleDiv");
var a = document.createElement('a');
for (i = 0; i < subs.length; i++) {
var linkText = document.createTextNode(subs[i][8]);
a.appendChild(linkText);
SubtitleDiv.appendChild(a);
}
}
So what happens:
Page loads
alert("loaded") is displayed as it's fired in window.onload
FindSubtitles runs
DisplaySubtitles runs and <a> links appear
<a> links disappear and alert("loaded") is displayed again.
I don't know if I should use async: true, because in that case I get [Object object] error, which is strange because in case of another script I use that, otherwise it would freeze the UI.
Any ideas?
As Kieveli mentioned, if submit_searchsubs is a form button that submits, it may be refreshing the page after submit. Try using return false; to bypass the default browser onclick action.
document.getElementById('submit_searchsubs').onclick = function () {
FindSubtitles();
return false;
};
I have an Iframe with fields which sent data to php file through ajax. If it was successful I close (it is working) iframe and create new one with another information (doen't work). So question is: how to close the old iframe and open another one?
so here is ajax function that works but doesn't open a new iframe
$.ajax({
type: "POST",
url: "sign.php",
data: {name : name,
data: canvasData
},
success: function () {
//frame_activation(); //if it will be here it will open iframe inside the old one iframe.
alert('done');
close_frame ();
$(body).html(argument[0]);
//windows.top.frame_activation();
frame_activation(); // does't work
}
});
So the result is - the old iframe sent information and close it, but doesn't open a new iframe.
frame activation :
function frame_activation() {
//document.getElementById('bg_frame').style.visibility = 'visible';
reg = document.createElement('iframe');
document.body.appendChild(reg);
reg.id = 'iframe';
reg.src = 'activate.html';
reg.style.width='600px';
reg.style.height='200px';
position_frame(reg);
reg.style.border='solid 5px #d4d4d4';
alert('here');
return false;
}
function to close iframe:
function close_frame () {
parent.document.getElementById('bg_frame').style.visibility = 'hidden';
var el = parent.document.getElementById('iframe');
el.style.display='none';
parent.document.body.removeChild(el);
return(false);
}
function for creating first iframe with fields
function frame_reg() {
document.getElementById('bg_frame').style.visibility = 'visible';
reg = document.createElement('iframe');
document.body.appendChild(reg);
reg.id = 'iframe';
reg.src = 'frame.html';
reg.style.width='640px';
reg.style.height='400px';
position_frame(reg);
reg.style.border='solid 5px #d4d4d4';
return false;
}
You can change src of iframe to change a page display.
This is sample using Jquery :
$(document).ready(function () {
$("#btnMenu1").click(function () {
$("#myIframe").attr("src", "example.aspx");
});
});