Develop Reference

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.

Make Javascript wait for an HTML element to exist [duplicate]

This question already has answers here:
How can I be notified when an element is added to the page?
(8 answers)
Closed 6 years ago.
I am trying to make a bot that sends virtual currency over to another user. I have the bot search through a database for users. Before searching, the inner html of a division has no elements at all. After searching, it is then filled with several user links.
Because it takes a short while for results to appear, I need Javascript to wait for at least one anchor tag to exist. How can I do this?

There are many, many better ways to do this, all of which stem from actually checking when the AJAX data populates the element itself, but the following will work:
var t = setInterval(function () {
if ($("element").children().length > 0) {
clearInterval(t);
// do stuff
}
}, 50);

Using setTimeout() to delay the code a few seconds is risky, since on older browser/machines it may take longer than expected.
Use promise() instead, You can find documentation https://api.jquery.com/promise/ .

Using onload event, You can use onload with tag a.
EX: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_onload

I'm guessing this is an AJAX call.
You could use AJAX callback to check if you got any results from the server.
Something like this:
var tags_available = false;
$.ajax({
... the ajax stuff;
}).done(function(data){ // The callback
if(data || $('#tags_element').lenght != 0){
tags_available = true;
}else{
tags_available = false;
}
})
Then:
if(tags_available){
console.log("Tags available")
}

If I've understood you correctly you need to check if dom element have been updated/populated with new elements. There are a few ways you can achieve that:
1.) Using window.setTimeout function
function checkForChanges() {
var observeThis = document.getElementById('observethis');
if (observeThis.hasChildNodes()) {
alert('yes');
return;
/*this is gonna execute only once */
}
window.setTimeout(function() {
checkForChanges();
}, 25);
}
checkForChanges();
/* this part is only relevant for demonstration.
It shows what happens when dom element gets new child */
(function() {
var observeThis = document.getElementById('observethis');
var button = document.getElementById('button-append');
button.addEventListener('click', function() {
var anchorElement = document.createElement('a');
anchorElement.href = "http://example.com";
anchorElement.target = "_blank";
anchorElement.innerHTML = "Link";
observeThis.appendChild(anchorElement);
}, false);
})();
<div id="observethis"></div>
<button id="button-append">append anchor</button>
2.) MutationObserver class
this is modern approach (I would also say recommended one).
function checkForChanges() {
var observeThis = document.getElementById('observethis');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
alert("insert your own code");
}
});
});
var config = {
attributes: true,
childList: true,
characterData: true
};
observer.observe(observeThis, config);
//observer.disconnect();
//use observer.disconnect to end observations
}
checkForChanges();
/* this part is only relevant for demonstration.
It shows what happens when dom element gets new child */
(function() {
var observeThis = document.getElementById('observethis');
var button = document.getElementById('button-append');
button.addEventListener('click', function() {
var anchorElement = document.createElement('a');
anchorElement.href = "http://example.com";
anchorElement.target = "_blank";
anchorElement.innerHTML = "Link";
observeThis.appendChild(anchorElement);
}, false);
})();
<div id="observethis"></div>
<button id="button-append">Append Child</button>
Read more about MutationObserver here
3.) If you are just waiting to get a response from ajax callback and don't actually need to observe changes in dom then just use XMLHttpRequest. Or even better. Use new javascript fetch API (you are gonna need polyfill to ensure it works in most browsers)

eventListener doesn't fire/doesn't bind properly

I've been messing around with YouTube API to make a button that copies the video ID on click using jQuery. I have no idea why, I don't get any Javascript errors and after hours (actually been working on this problem for 2 days), I still haven't figured out why does the eventListener doesn't fire.
The eventListener is bound at the end of the function, which is fired when you hit a search button. Each time you click on the search button or on the next page/ previous page buttons, they fire the makeRequest function. Somehow, though, the function triggered by the eventListener never fires (the function code isn't in this parcel of code itself, but it's actually just console.log's). Can anyone help? Would be really appreciated <3
function makeRequest(e) {
$('#search-container')[0].innerHTML = '';
ytSearchResults = [];
var q = $('#query').val();
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet',
maxResults: 15,
pageToken: ytPage,
type: 'video',
safeSearch: 'none',
videoSyndicated: 'true'
});
request.execute(function(response) {
var str = response.result;
ytNextPage = str.nextPageToken;
ytPrevPage = str.prevPageToken;
for(i=0;i<str.items.length;i++){
$('#search-container')[0].innerHTML += '<br><image src='+str.items[i].snippet.thumbnails.default.url+'></image><br><button id="'+str.items[i].id.videoId+'" class="NCScopiable">'+str.items[i].snippet.title+'</button>';
ytSearchResults.push(str.items[i].id.videoId);
}
$('#search-container')[0].innerHTML += '<br><div id="button-changePage"><span id="button-prevPage" style="color:blue;cursor:pointer;margin:5px"><u>Previous Page</u></span><span id="button-nextPage" style="color:blue;cursor:pointer;margin:5px"><u>Next Page</u></span>';
if(e&&ytCurPage>0){
$('#button-prevPage')[0].style.display = 'block';
$('#button-nextPage')[0].style.display = 'block';
} else {
ytCurPage = 0;
$('#button-prevPage')[0].style.display = 'none';
}
$('#button-prevPage').on('click',function(){ytCurPage-=1;ytPage=ytPrevPage;makeRequest(true);});
$('#button-nextPage').on('click',function(){ytCurPage+=1;ytPage=ytNextPage;makeRequest(true);});
console.log('Current ytCurPage value: '+ytCurPage);
});
$('.NCScopiable').on('click',cTWI);
}

The problem is that the line
$('.NCScopiable').on('click',cTWI);
Is being executed before the code inside the callback passed to request.execute has fired, so those elements don't exist yet. Thus $('.NCScopiable') is returning nothing.
Move that line into the last line of your callback code and you should be good to go, for example:
request.execute(function(response) {
var str = response.result;
ytNextPage = str.nextPageToken;
ytPrevPage = str.prevPageToken;
// ...code removed for brevity...
// this was the code that is actually creating the elements with
// the NCScopiable class
console.log('Current ytCurPage value: '+ytCurPage);
$('.NCScopiable').on('click',cTWI);
});

Display javascript validation messages on the screen not alert messages?

I'm using struts1.3.8. I'm using struts ValidatorPlugIn for generating client side and server side validation messages.
Now client side javascript is generated by validator plugin. If there is any validation errors it is displaying in alert messages. But i want to display them besides the text field.
I'm still now working with alert messages only.. But now requirement changed. I tried but no use...
How to do it?
This is the code generated by plugin
`enter code here` function jcv_handleErrors(messages, focusField) {
if (focusField && focusField != null) {
var doFocus = true;
if (focusField.disabled || focusField.type == 'hidden') {
doFocus = false;
}
if (doFocus &&
focusField.style &&
focusField.style.visibility &&
focusField.style.visibility == 'hidden') {
doFocus = false;
}
if (doFocus) {
focusField.focus();
}
}
alert(messages.join('\n'));
}

Without specific information, all I can really suggest is a variation of the following:
window.alert = function(message){
console.log(message);
}
JS Fiddle demo.
Which simply ensures that any messages passed to alert() get passed, instead, to the console.log().
You could, instead, target the messages to a particular element:
window.alert = function(message) {
var output = document.getElementById('output'),
newTextContainer = document.createElement('p'),
text = document.createTextNode(message);
newTextContainer.appendChild(text);
output.appendChild(newTextContainer);
}
JS Fiddle demo.
Using either of these will break any usage of your alert() function in your page, though. So I'd suggest, instead, creating a new function with the latter example (immediately above) and calling that function, rather than over-writing alert().
With regards to creating a custom function to handle your alerts, as well as specify a particular element to which the new 'alerts' should be appended:
function newAlert(message, elem) {
// message is a string containing the message to display.
// elem is the id of the element into which the message should be displayed,
// defaults to an id of 'output' if no element is specified.
var output = elem ? document.getElementById(elem) : document.getElementById('output'),
newTextContainer = document.createElement('p'),
text = document.createTextNode(message);
newTextContainer.appendChild(text);
output.appendChild(newTextContainer);
}
JS Fiddle demo.
Edited in response to question from OP, below:
Next again submit the form I want to overwrite the previous error message. Not twice display the same message.
There are a couple of ways of doing this, assuming you only want to show the last of the error messages, rather than appending those error messages; in the first example I'm using a while loop to remove the firstChild of the output element and, when empty, appending the new error message:
function newAlert(message, elem) {
var output = elem ? document.getElementById(elem) : document.getElementById('output'),
newTextContainer = document.createElement('p'),
text = document.createTextNode(message);
while (output.firstChild){
output.removeChild(output.firstChild);
}
newTextContainer.appendChild(text);
output.appendChild(newTextContainer);
}
JS Fiddle demo.
An alternative is to get a reference to the first paragraph element in the output element (if one exists, otherwise create one) and then simply overwrite the text in that element:
function newAlert(message, elem) {
var output = elem ? document.getElementById(elem) : document.getElementById('output'),
textContainer = output.getElementsByTagName('p')[0] || output.appendChild(document.createElement('p'));
if (textContainer.firstChild){
textContainer
.firstChild
.nodeValue == message;
}
else {
textContainer
.appendChild(document
.createTextNode(message));
}
}

GetElementById of ASP.NET Control keeps returning 'null'

I'm desperate having spent well over an hour trying to troubleshoot this. I am trying to access a node in the DOM which is created from an ASP.NET control. I'm using exactly the same id and I can see that they match up when looking at the HTML source code after the page has rendered. Here's my [MODIFIED according to suggestions, but still not working] code:
ASP.NET Header
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
$(document).ready(
var el = document.getElementById('<%= txtBox.ClientID %>');
el.onchange = alert('test!!');
)
</script>
</asp:Content>
ASP.NET Body
<asp:TextBox ID="txtBox" runat="server"></asp:TextBox>
Resulting Javascript & HTML from above
<script type="text/javascript">
$(document).ready(
var el = document.getElementById('MainContent_txtBox');
el.onchange = alert('test!!');
)
</script>
...
<textarea name="ctl00$MainContent$txtBox" id="MainContent_txtBox"></textarea>
I can only assume that the script is loading before the control id has been resolved, yet when I look at the timeline with Chrome's "Inspect Element" feature, it appears that is not the case. When I created a regular textarea box to test and implement the identical code (different id of course), the alert box fires.
What on earth am I missing here? This is driving me crazy >.<
EDIT: Wierd code that works, but only on the initial page load; firing onload rather than onchange. Even jQuery says that .ready doesn't work properly apparently. Ugh!!
$(document).ready(function() {
document.getElementById('<%= txtBox.ClientID %>').onchange = alert('WORKING!');
})

Assuming the rendered markup does appear in that order, the problem is that the element doesn't yet exist at the time your JavaScript is attempting to locate it.
Either move that JS below the element (preferably right at the end of the body) or wrap it in something like jQuery's document ready event handler.
Update:
In response to your edits, you're almost there but (as others have mentioned) you need to assign a function to the onchange event, not the return result of alert(). Something like this:
$(document).ready(function() {
// Might as well use jQuery to attach the event since you're already using
// it for the document ready event.
$('#<%= txtBox.ClientID %>').change(function() {
alert('Working!');
});
});
By writing onchange = alert('Working');, you were asking JavaScript to assign the result of the alert() method to the onchange property. That's why it was executing it immediately on page load, but never actually in response to the onchange event (because you hadn't assigned that a function to run onchange).

Pick up jQuery.
Then you can
$(function()
{
var el = document.getElementById('<%= txtBox.ClientID %>');
el.onclick() { alert('test!!'); }
});

Other answers have pointed out the error (attempting to access DOM nodes before they are in the document), I'll just point out alternative solutions.
Simple method
Add the script element in the HTML below the closing tag of the element you wish to access. In its easiest form, put it just before the closing body tag. This strategy can also make the page appear faster as the browser doesn't pause loading HTML for script. Overall load time is the same however, scripts still have to be loaded an executed, it's just that this order makes it seem faseter to the user.
Use window.onload or <body onload="..." ...>
This method is supported by every browser, but it fires after all content is loaded so the page may appear inactive for a short time (or perhaps a long time if loading is dealyed). It is very robust though.
Use a DOM ready function
Others have suggested jQuery, but you may not want 4,000 lines and 90kb of code just for a DOM ready function. jQuery's is quite convoluted so hard to remove from the library. David Mark's MyLibrary however is very modular and quite easy to extract just the bits you want. The code quality is also excellent, at least the equal of any other library.
Here is an example of a DOM ready function extracted from MyLibrary:
var API = API || {};
(function(global) {
var doc = (typeof global.document == 'object')? global.document : null;
var attachDocumentReadyListener, bReady, documentReady,
documentReadyListener, readyListeners = [];
var canAddDocumentReadyListener, canAddWindowLoadListener,
canAttachWindowLoadListener;
if (doc) {
canAddDocumentReadyListener = !!doc.addEventListener;
canAddWindowLoadListener = !!global.addEventListener;
canAttachWindowLoadListener = !!global.attachEvent;
bReady = false;
documentReady = function() { return bReady; };
documentReadyListener = function(e) {
if (!bReady) {
bReady = true;
var i = readyListeners.length;
var m = i - 1;
// NOTE: e may be undefined (not always called by event handler)
while (i--) { readyListeners[m - i](e); }
}
};
attachDocumentReadyListener = function(fn, docNode) {
docNode = docNode || global.document;
if (docNode == global.document) {
if (!readyListeners.length) {
if (canAddDocumentReadyListener) {
docNode.addEventListener('DOMContentLoaded',
documentReadyListener, false);
}
if (canAddWindowLoadListener) {
global.addEventListener('load', documentReadyListener, false);
}
else if (canAttachWindowLoadListener) {
global.attachEvent('onload', documentReadyListener);
} else {
var oldOnLoad = global.onload;
global.onload = function(e) {
if (oldOnLoad) {
oldOnLoad(e);
}
documentReadyListener();
};
}
}
readyListeners[readyListeners.length] = fn;
return true;
}
// NOTE: no special handling for other documents
// It might be useful to add additional queues for frames/objects
else {
if (canAddDocumentReadyListener) {
docNode.addEventListener('DOMContentLoaded', fn, false);
return true;
}
return false;
}
};
API.documentReady = documentReady;
API.documentReadyListener = documentReadyListener;
API.attachDocumentReadyListener = attachDocumentReadyListener;
}
}(this));
Using it for your case:
function someFn() {
var el = document.getElementById('MainContent_txtBox');
el.onclick = function() { alert('test!!');
}
API.attachDocumentReadyListener(someFn);
or an anonymous function can be supplied:
API.attachDocumentReadyListener(function(){
var el = document.getElementById('MainContent_txtBox');
el.onclick = function() { alert('test!!');
};
Very simple DOM ready functions can be done in 10 lines of code if you just want one for a specific case, but of course they are less robust and not as reusable.