I have link <a href="/MyData/Delete/"> Delete data
How can I implement onclick to popup confirm action with text are you sure and if yes selected to proceed to HttpPost action on MyData/Delete?
<a href="/MyData/Delete/" onclick="someFunction(this, event)">
In javascript:
function someFunction(target, event) {
if(confirm("Are you sure to delete?")) {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
// successfully deleted
}
};
xhr.open("POST", target.url, true);
xhr.send();
} else {
event.preventDefault();
}
}
More cleaner way of doing:
<a href="/MyData/Delete/" class="confirmlink">
document.querySelector(".confirmlink").addEventListener("click", function(event) {
if(confirm("Are you sure to delete?")) {
window.location.href = this.href;
} else {
event.preventDefault();
}
});
Avoid using inline js scripts in HTML. It will pollute the markup and tough to manage later.
Related
I've got an API that returns me {"html", "Css" and "JS"} that i'd ideally like to render on client side.
Issue:
Looks like something's failing for some reason and clicking on the button does not do anything. (I have accept button)
JavaScript:
function postAjax(success) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open('GET', '/myaccount/profile/api/accept');
xhr.onreadystatechange = function() {
if (xhr.readyState > 3 && xhr.status == 200) {
success();
}
};
xhr.setRequestHeader('Accept', 'application/json', 'Content-Type', 'application/json');
xhr.send(null);
return xhr;
};
document.onreadystatechange = function() {
if (document.readyState == "interactive") {
// some logic
var cookieLanguage = document.getElementById("CookieContent_wrapper");
var cookieBanner = document.getElementById("CookieBanner");
var acceptAllButton = document.getElementById("acceptAllButton");
acceptAllButton.onclick = function() { // Does not get trigerred.
// Does not get trigerred.
// Do some logic.
};
}
};
However, acceptAllButton.onClick event is not triggerred.
This is my directive.js (angular)
populate() {
this.cookieBannerData = this.models.CookieData; // We are getting { "js", "html", "css"}
//CSS
$("head").prepend( this.cookieBannerData.css );
// HTML
let div = document.getElementById( 'cookie-banner-outerwrap' );
div.insertAdjacentHTML( 'beforeend', this.cookieBannerData.html );
//JS
$("head").append( this.cookieBannerData.js );
}
template.html
<div id="cookie-banner-outerwrap"></div>
When I click on the button, nothing happens. Is there anyway I can bind the onclick event with window so that I can get my
How do I add the slideDown jquery animation when I knew message is loaded? Perhaps I can't with my method for loading... A file takes user input and inserts into database. Another file pulls from database onto chatbox and styles.
Javascript Code:
var form = document.querySelector('form[name="chatbox"]');
form.addEventListener("submit", function (event) {
event.preventDefault();
});
function submitChat() {
if(chatbox.message.value == '') {
alert('Error: Missing Fields.');
return;
}
var message = chatbox.message.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4&&xmlhttp.status==100) {
document.getElementById('chatlog').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET','chat.php?message='+message, true);
xmlhttp.send();
chatbox.reset();
}
$(document).ready(function(e) {
$.ajaxSetup({cache:false});
setInterval(function() {$('#chatlog').load('logs.php');}, 200);
});
Please let me know if you need the PHP attached.. Thanks for the help! :)
I have two separate links that call same function. They are used to load different external html doc into body of main one. They work correctly by themselves. But when one doc is loaded another one refuses to. What is a problem guys?
<li>
<a href="#" class="decorNavi" onclick ="xmlRequest('about')" >ABOUT</a>
</li>
<li>
<a href="#" class="decorNavi" onclick ="xmlRequest('contactus')" >CONTACT US</a
</li>
Script:
function xmlRequest(target) {
var targetClick;
targetClick = target;
if (window.XMLHttpRequest) {
xmlRequest = new XMLHttpRequest();
} else {
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlRequest.open("GET", targetClick + ".html?=" + Math.random(), true);
xmlRequest.onreadystatechange = function () {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
document.getElementById("midContainer").innerHTML = xmlRequest.responseText;
}
}
xmlRequest.send();
}
You're overwriting your function declaration inside your function:
function xmlRequest(target) {
and
xmlRequest = new XMLHttpRequest();
It fires once, and then replaces the function with the xmlRequest. Name the second one something else.
As Mike Robinson said, you are overwriting your function. Use an other name for your function. As easy as that.
function xmlRequest(targetClick) {
var xmlRequest; // xmlRequest is no more a global.
if (window.XMLHttpRequest) {
xmlRequest = new XMLHttpRequest();
} else {
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlRequest.open("GET", targetClick + ".html?=" + Math.random(), true);
xmlRequest.onreadystatechange = function () {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
document.getElementById("midContainer").innerHTML = xmlRequest.responseText;
}
}
xmlRequest.send();
}
JSbin: http://jsbin.com/kehaxexo/2/
The name of you function "xmlRequest" and object defined in it are the same. change it to something else.
I want to stop the submit button in the js function checkUni()
Usually in js you can just return false, but that it not gonna work in my case because its an asynchronous (ajax)function, so the outer function will return before the inner function is able to determine wether to return false or true.
Here is the js function:
function checkUni() {
var URL = "http://localhost:8080/GradSchoolApp/test.jsp";
var container = document.getElementById("container_ID"); //destination of returned data
var request = false;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
request.open("GET", URL, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
//SOME CODE
//IF <something> then STOP SUBMIT BUTTON
container.innerHTML = request.responseText;
}
}
request.send(null);
}
Simply return false in the onclick listener.
<input type="submit" onclick="checkUni(); return false;"/>
You can set the action of the form element to "#" which will have the same effect.
When you use Google Videos, you will notice the right part of the page stays still when you search videos on the left. How is it implemented?
using ajax
http://www.google.com/search?q=ajax+tutorial
edit:
function $(id) { return document.getElementById(id); }
function getHTTPObject() {
var xmlhttp;
/*#cc_on
#if (#_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
#else
xmlhttp = false;
#end #*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
function AJAX_GetAsinc(ajax, id, url) {
ajax.abort();
function statechange() {
if ((ajax.readyState==4) && (ajax.status==200)) $(id).innerHTML=ajax.responseText;
}
ajax.open('GET', url, true);
ajax.onreadystatechange = statechange;
ajax.send(null);
}
usage:
var a = getHTTPObject();
AJAX_GetAsinc(a, 'YOUR_DIV_ID', 'mycontent.php');
or:
use jQuery or your favourite framework/library
Hope it's specific enough