Disable "Changes you made may not be saved" pop-up window - javascript

I use the following frontend code to export a .csv document.
HTML
<form id="tool-export" method="post" action="export/">{% csrf_token %}
<a id="export-link" class="btn btn-sm btn-primary" href="#">DOWNLOAD</a>
</form>
JS
$('#export-link').click(function(e) {
e.preventDefault();
var link = $(this);
var form = link.closest('form');
var project_id = proj_id.find(":selected").val();
var input = $('<input>').attr('type', 'hidden').attr('name', 'project_id').val(project_id);
form.append($(input));
var project_type = proj_type.val();
input = $('<input>').attr('type', 'hidden').attr('name', 'project_type').val(project_type);
form.append($(input));
form.submit();
});
Export works well and I get the correct document. But also I receive the Changes you made may not be saved message after clicking on the export link. How to disable this message? I don't want to see it.


#Dekel helped me to get it.
The message is the beforeunload event.
And I can disable it with window.onbeforeunload = null;.
JS
$('#export-link').click(function(e) {
window.onbeforeunload = null;
e.preventDefault();
var link = $(this);
var form = link.closest('form');
var project_id = proj_id.find(":selected").val();
var input = $('<input>').attr('type', 'hidden').attr('name', 'project_id').val(project_id);
form.append($(input));
var project_type = proj_type.val();
input = $('<input>').attr('type', 'hidden').attr('name', 'project_type').val(project_type);
form.append($(input));
form.submit();
});


In jQuery simply use :
$(window).off('beforeunload');


I had the same problem.
window.onbeforeunload = function () {
// Your Code here
return null; // return null to avoid pop up
}


I've had the same error with embedding Google-Form in Chrome,
I can verify that none of the found solutions helped me. Here is the screenshot of my pop-up:
The only solution I've managed to implement was hiding the element and then unhiding/creating the new iframe with the current embed. Here's the part of my code:
if (oldvalue !== value) { // checks the id of the form (value) is not the same
// set value of the id
$('#info').text(value);
// check the element exists
let exists = value;
if($("#" + value).length == 0) {
//it doesn't exist
exists = false;
}
// hide all child elements of the div for forms
parent.children().hide();
// create new node if needed
if (!exists)
{
// create new form element and embed the form
$("#google-form").clone().attr("id",value).attr('src', record.url).appendTo(parent);
}
// unhide error element
$("#" + value).show();
}
The full code of my solution is here.

Related

Go to the given URL (if we not there), show the form and scroll to it

So I have this piece of code where the form is hidden until I click on the element. If I'm in that page (profile.php) it shows the form and scrolls down to it but if I'm not on that page (e.g: index.php) it goes to thatpage(profile.php) but doesn't show the form and doesn't scroll down to it until I click again on that element (which it is in the menu)
So here is my html code:
<a id='showForm'>Apply</a>
<div class="formL" style="display:none">
//code
</div>
and here's my script:
<script>
$('#showForm').click(function() {
let currentURL = $(location).attr("href");
let redirectURL = "http://127.0.0.1/dealaim/profile.php#formL"
if (currentURL !== redirectURL) {
$(location).attr("href", redirectURL);
var formL = $('.formL').show();
document.documentElement.scrollTop = formL[0].offsetTop;
} else {
var formL = $('.formL').show();
document.documentElement.scrollTop = formL[0].offsetTop;
}
</script>

The code after your redirect won't do anything; that code needs to run on the page you redirect to, not the page doing the redirect.
Once the redirect takes place, it's a question of passing along some info that the page can receive and use to automatically invoke the function. So:
$('#showForm').click(function() {
let currentURL = location.href;
let redirectURL = "http://127.0.0.1/dealaim/profile.php?showForm=1"
if (currentURL !== redirectURL)
location = redirectURL;
else {
let formL = $('.formL').show();
document.documentElement.scrollTop = formL[0].offsetTop;
}
});
if (location.href.includes('showForm=1') $('#showForm').click();
Note also there's no point at all in doing $(location).attr('href') - you just unnecessarily invoke jQuery and wrap what is a simple object-and-property combo in its API. Just use location.href.

Add client field validation Odoo's POS

I want to add validations for data that I've added to Odoo's POS client model.
By the moment I've created the following code:
screens.ClientListScreenWidget.include({
// Client save alerts
save_client_details: function (partner) {
if (!fields.custom_field) {
this.gui.show_popup('error', 'Missing custom_field!')
}
this._super(partner)
}
})
If my custom_field is empty it raises the popup and that's fine. The problem is that even if the user fills the field, the popup appears too.
Checking Odoo's code I've found that they check what the user filled in the window "fields" with the following code:
save_client_details: function(partner) {
var self = this;
var fields = {};
this.$('.client-details-contents .detail').each(function(idx,el){
if (self.integer_client_details.includes(el.name)){
var parsed_value = parseInt(el.value, 10);
if (isNaN(parsed_value)){
fields[el.name] = false;
}
else{
fields[el.name] = parsed_value
}
}
else{
fields[el.name] = el.value || false;
}
});
if (!fields.name) {
this.gui.show_popup('error',_t('A Customer Name Is Required'));
return;
}
I'm not used to javascript so I didn't manage mimic this code for my custom field.
How can I achieve this? How should my code look like for this?

Using Javascript/jQuery to change form response

I have a form on my site, and I need to change the response just for people who enter one of a few zip codes. I'm trying to set the code up to check the first 3 digits of the entered zip code against the objects saved in my array. It's not finished yet, but I'm testing it as I go along and right now I'm trying to get the zipValue to show in the console once someone clicks off of the zip field, but I'm not having any luck getting it to work. This is what I have so far -
let inLA = false;
var zipsLA = ["700, 701, 703, 704, 705, 706, 707, 708, 710, 711, 712, 713, 714"];
const $zipField = document.getElementById('formFieldZip')
const $zipValue = document.getElementById('formFieldZip').value
$zipField.addEventListener('blur', function(){
console.log(zipValue);
});
My eventual hope is that if the first 3 digits of the entered zip code match an entry in the array, it will set 'inLA' to true.
Edit: Fiddle link: https://jsfiddle.net/zdy9sgbn/

Try something like this:
let inLA = false;
var zipsLA = ["700", "701", "703", "704", "705", "706", "707", "708", "710", "711", "712", "713", "714"];
const $zipField = document.getElementById('formFieldZip');
$zipField.addEventListener('blur', function(){
if (zipsLA.indexOf(this.value.slice(0, 3)) != -1) {
inLA = true;
} else {
inLA = false;
}
console.log(inLA);
});
<form action="">
<input type="text" id="formFieldZip">
</form>

The problem is you are trying to access the DOM elements before it is loaded.
The fiddle shows you are using onLoad where you should be using ready
Updated your fiddle as well https://jsfiddle.net/zdy9sgbn/1/
$( document ).ready(function() {
const $zipField = document.getElementById('formFieldZip')
const $zipValue = document.getElementById('formFieldZip').value
$zipField.addEventListener('blur', function(){
console.log($zipField.value);
});
});
Once the DOM is ready, you can query the elements in DOM and you can add event listeners to it.
If you are looking for a pure JS alternative for jquery's document ready, you can use this solution here.

Problem is you take the input value in the beginning(which is undefined). It doesn't get updated in your event listner.
Fetch the value from the input in your eventListener.
Use this,
var inLA = false;
var zipsLA = ["700", "701", "703", "704"];
const $zipField = document.getElementById('formFieldZip');
$zipField.addEventListener('blur', function(){
console.log($zipField.value);
(zipsLA.indexOf($zipField.value) > -1) ? console.log('zip matched') : console.log('no match');
});
You have a lot of syntax errors too. See the comments above.

Form Submit onbeforeunload in Firefox

I am writing a javascript function that creates an iframe and a form that targets the frame. The form should submit the form on before unloading the page. The code works with every browser, except Firefox.
function unloadPage(message) {
actionUrl = "https://test.testpage.com/log/logwatch.lw"
var iframe = $('<iframe id="pageLogFrame" name="pageLogFrame" style="display:none;"></iframe>');
var form = $('<form id="pageLogForm" target="pageLogFrame" method="post"></form>');
$('body').append(iframe);
$('body').append(form);
form.attr('action',actionUrl);
var input = $('<input type="hidden" name="pageLog" />');
form.append(input);
input.val(message);
form.submit();
};
window.onbeforeunload = function(){
var message = "sampleMessage";
unloadPage(message);
};
Does anyone have a solution or an idea how to make this work in Firerox? Thanks!

Firefox requires you to specify a void return value.
The function should assign a string value to the returnValue property of the Event object and return the same string.
taken from: https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload
window.onbeforeunload = function(e) {
return 'Dialog text here.';
};

Getting value from RadWindow OnClientBeforeClose JavaScript event

I posted a very much similar question yesterday but no one answerd so far. Now I have changed the functionality and stuck with the following problem. In this scenario, I have a RadWindow that i am opening from code behind file (.aspx page) on a button click. On this rad window I have a hidden field where I am setting value and now OnClientBeforeClose event I want to get the value from hidden field and assign it to a text box on my .ASPX page which is the parent page of this Rad Window. Could please anyone give me any idea how to do that. I have looked inot many examples on Telerik and StackOverflow but nothing working for me. Thanks in advance.
Rad Window Diclaration in my .Aspx.cs page
RadWindow window = new RadWindow();
window.Title = "Comments Pick List";
window.ID = "CommentsListPopUpRadWindow";
window.NavigateUrl = "CommentsList.aspx";
window.OnClientBeforeClose = "CommentsListPopUpRadWindowBeforeClose";
window.Skin = "Metro";
window.Behaviors = WindowBehaviors.Close;
window.KeepInScreenBounds = true;
window.VisibleStatusbar = false;
window.Modal = true;
window.Width = 750;
window.MinHeight = 510;
window.VisibleOnPageLoad = true;
window.EnableViewState = false;
RadWindowManager1.Windows.Add(window);
JavaScript function on RadWindow .ASPX page where I am setting value to the hidden field
function displayItem(id) {
var selectedText = document.getElementById(id);
document.getElementById('hiddenSelectedTextField').value = selectedText.innerText;
}
JavaScript OnClientBeforeClose function on my .ASPX parent page (to close the RadWindow) where I am trying to get value from the hidden field and set in the TextBox of parent page
function CommentsListPopUpRadWindowBeforeClose(oWnd, args) {
}

You can easily pass arguments to the RadWindow's Close function, from the child page:
function GetRadWindow() {
if (window.radWindow) {
return window.radWindow;
}
if (window.frameElement && window.frameElement.radWindow) {
return window.frameElement.radWindow;
}
return null;
}
function ChildClose() {
GetRadWindow().Close(document.getElementById('hiddenSelectedTextField').value);
}
and then retrieve the argument in the parent page by specifiying its OnClose function:
Add, in the aspx.cs file:
window.OnClientClose = "CommentsListPopUpRadWindow_OnClose";
and in the aspx parent page:
function CommentsListPopUpRadWindow_OnClose(radWindow, args) {
var arg = args.get_argument();
}

Categories

Resources