Develop Reference

Disabling Form fields the use the SelectStatic widget in netbox v3 with javascript

I have a problem where i am trying to disable certain forms fields which use the SelectStatic Widget based on a tick box, i have included the javascript below.
const vlan = document.querySelector('#id_vlan');
const physical_facing = document.querySelector('#id_physical_facing');
const service_type = document.querySelector('#id_service_type');
const bd_function = document.querySelector('#id_function');
function vlan_enable(){
vlan.disabled = false;
};
function vlan_disable(){
vlan.disabled = true;
};
function service_function_enable() {
service_type.disabled = false;
bd_function.disabled = false;
};
function service_function_disable() {
service_type.disabled = true;
bd_function.disabled = true;
};
(function() {
service_function_enable();
vlan_enable();
if(physical_facing.checked){
service_function_disable();
} else {
vlan_disable();
}
})();
function pf_event() {
if(physical_facing.checked) {
vlan_enable();
service_function_disable();
} else {
vlan_disable();
service_function_enable();
}
};
physical_facing.addEventListener('change', pf_event)
When on the Page, the VLAN field is a DynamicModelFormField and will never disable, but when toggling the switch on and off the fields do not re-enable, i know the event is getting fired because i can see it in the developer tools, the disabled tag gets applied and removed with no change on the page, This may be a simple mistake but would like if someone can point me in the right direction.
below is what the page looks like
Netbox Page
Has anybody had any success doing this with the new version of netbox as it worked fine in V2 with the SelectStatic2 widget.

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

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.

send one of multiple search result to another page

I have a page userLanding.jsp
When a user performs a search the page will give multiple results.
I need to check selected dynamic result (succeeded so far),
Now the problem is I need to send/transfer/retrieve data of selected div to another page.
How can I do that?
Here is the code i am following to check which result is selected.
$('.demo-card-wide').click(function(){
article = $(this).text();
});
$(document).on('click', '.demo-card-wide', function(){
alert("clicked on result!!");
var id = this.id;
window.location = "http://localhost:8080/CarPool/test.jsp#"+id;
});

Since you are redirecting to a new page with the value you want set as the URL's hash, you can use window.location.hash to access that value on page load (though I wouldnt trust the data past that as it could be changed by the page after loading)
$(function(){
var id = window.location.hash;
// do something with id...
});
If you need to persist the data further than this, you might look into localstorage or a server side solution.
Just for grins, here is how I would do it (using localstorage):
Make this code available to both pages:
/**
* Feature detect + local reference for simple use of local storage
* Use this like:
* if (storage) {
* storage.setItem('key', 'value');
* storage.getItem('key');
* }
*
*/
var storage;
var fail;
var uid;
try {
uid = new Date;
(storage = window.localStorage).setItem(uid, uid);
fail = storage.getItem(uid) != uid;
storage.removeItem(uid);
fail && (storage = false);
} catch (exception) {}
/* end Feature detect + local reference */
On the first page have this:
$(document).on('click', '.demo-card-wide', function() {
if (storage) {
alert("clicked on result!!");
storage.setItem('article-id', this.id);
window.location = "http://localhost:8080/CarPool/test.jsp";
} else // some error message
});
On the second page, do this:
$(function() {
if (storage) {
var id = storage.getItem('article-id');
// do something with id...
}
});

How can I determine if a file input has been clicked?

I have a script that will trigger the click event for a file upload form. I want to be able to determine of the file upload button has already been clicked. Here is what I have:
<div ng-click="uploadFile()">Click Me</div>
<input name="uploader" type="file" style="display:none;">
var uploadFile = function () {
var interval = setInterval(function () {
$('input[name=uploader]').trigger('click');
clearInterval(interval);
}, 50);
}
The problem is that the upload button is triggered twice. The first time the file browser opens up, allowing me to select a local file to upload. But, if I hit cancel, the file browser opens back up again. I would like to place a condition in the above code that would check to see if the file upload button has already been triggered. How can I do this? Something like the following:
var interval = setInterval(function () {
if(hasUploaderBeenTriggered === false) { // not sure how to do this part
$('input[name=uploader]').trigger('click');
clearInterval(interval);
}
}, 50);

Do you really need the first click or do you just want to know when the user selected their file? Otherwise you could check out onchange instead of onclick.
You can create a global variable / boolean that you switch on and off when the user clicks the button, if the user then clicks the button again you can check if the boolean is false.
Put var hasUploaderBeenTriggered = false; at the very top of your javascript and then add hasUploaderBeenTriggered = true; after clearInterval(interval); like so:
var hasUploaderBeenTriggered = false;
var interval = setInterval(function () {
if(hasUploaderBeenTriggered === false) { // not sure how to do this part
$('input[name=uploader]').trigger('click');
clearInterval(interval);
hasUploaderBeenTriggered = true;
}
}, 50);

Commit settings instantly Windows 8 app

I'm trying to make a test app for Windows 8 that has two input boxes and one button (lets call it "Calculate" button). When the user presses the button he gets a result. He can enter his details in either metric or imperial units by choosing which units he wants to use in the settings flyout. Now what I'm trying to do is to commit the changes instantly. When the user selects for example the imperial units the input boxes and the result automatically change to imperial. Right now when I change the units from metric to imperial I must press the "Calculate" button again to see the results in imperial.
How can I do that?
Below is some of my code.
In the default .js file I created a button handler:
var test = document.getElementById("button");
test.addEventListener("click", doDemo, false);
In the main .js file where all the calculations are done it looks like this:
function doDemo(eventInfo) {
var applicationData = Windows.Storage.ApplicationData.current;
var roamingSettings = applicationData.roamingSettings;
if (roamingSettings.values["cmorft"] == 'imperial') {
var greetingString3 = "Imperial";
document.getElementById("units").innerText = greetingString3;
} else {
var greetingString4 = "metric";
document.getElementById("units").innerText = greetingString4;
}
I used the following to save the user's choice:
var applicationData = Windows.Storage.ApplicationData.current;
var roamingSettings = applicationData.roamingSettings;
WinJS.UI.Pages.define("/html/settings.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
var imperialRadio = document.getElementById("imperial"),
metricRadio = document.getElementById("metric");
// Set settings to existing values
if (roamingSettings.values.size > 0) {
if (roamingSettings.values["cmorft"]) {
setMIValue();
}
}
// Wire up on change events for settings controls
imperialRadio.onchange = function () {
roamingSettings.values["cmorft"] = getMIValue();
};
metricRadio.onchange = function () {
roamingSettings.values["cmorft"] = getMIValue();
};
},
unload: function () {
// Respond to navigations away from this page.
},
updateLayout: function (element, viewState, lastViewState) {
// Respond to changes in viewState.
}

If I understand you correctly, you simply need to set the innerText properties of your HTML elements when you change the units, not just when you click the button. In your demo it can be as simple as calling doDemo from within the onchange handlers for your radiobuttons, as that will read the updated setting and set the text.