Stop html submit button in js ajax function - javascript

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.

Related

on delete link popup are you sure

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.

AJAX function parameter is null?

i got a problem with JS:
On line 1 to 4 I take all "a"-Elements from the DOM and get their hrefs.
later I want to reload the URL via AJAX, but the href does not arrive correctly... Whats wrong?
$(document).ready(function(){
$('a').click(function(e){
ajaxReload($(this).attr('href'));
e.preventDefault();
});
});
function ajaxReload(href) {
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", href, true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState != 4) {
document.write('loading');
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert('hello');
//alert('getting '+xmlhttp.status+' for '+href);
var pureHTML = xmlhttp.responseText;
var ajaxstart = pureHTML.indexOf('<!-- AJAX START -->');
var ajaxend = pureHTML.indexOf('<!-- AJAX END -->');
var ajaxContent = pureHTML.substring(ajaxstart, ajaxend);
var writeContent = document.getElementById('content');
writeContent.innerHTML = ajaxContent;
}
}
xmlhttp.send(null);
}
Sorry if I've misunderstood your code. I think that you simply need to (at least approximately) just remove code as commented below:
//$('a').click = function(href) {
var pureHTML = xmlhttp.responseText;
var ajaxstart = pureHTML.indexOf('<!-- AJAX START -->');
var ajaxend = pureHTML.indexOf('<!-- AJAX END -->');
var ajaxContent = pureHTML.substring(ajaxstart, ajaxend);
$("content").html(ajaxContent);
// ajaxReload(href); //this would cause a loop?
// return false;
//}
To answer your later question - you can change your event propagation handling to:
$(document).ready(function(){
$('a').click(function(e){
ajaxReload($(this).attr('href'));
e.preventDefault();
});
});
And for the further comments, maybe try changing your:
document.write('loading');
To:
$("content").html(xmlhttp.status); //so now you can see the loading status for testing

"Object doesn't support..." IE8 stops at declaring ordinary variable

I'm trying to make a form send its data through AJAX and cancel the event sans jQuery, just for learning native JavaScript, which can never be bad, I figured. Anyway, this code is returning the error:
"Object doesn't support this property or method"
in IE8 at the line where I declare variables s and r in the send() function. I figured the problem must actually be elsewhere? Code works in both Firefox and Chrome, returning no errors. Ideas?
// Function to serialize form
function serialize() {
var a = document.getElementsByTagName('input'), b = '';
for (i = 0; i < a.length; i++) {
b += a[i].name + '=' + a[i].value + '&';
}
return b.substring(0, b.length - 1);
}
// Function to execute when user submits form
function send(evt) {
// Prevent the page from reloading
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
// Declare DOM variables for quick access
var s = document.getElementsByClassName('skicka')[0], r = document.getElementById('return');
// Hides the submit button and return text
s.style.visibility = 'hidden';
r.style.visibility = 'hidden';
// Initialize and send data and request to login.php
var xhr = new XMLHttpRequest();
xhr.open('POST', 'login.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(serialize());
// Check for return value from login.php
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.responseText == true) {
// If response if true, reload page
window.location.reload(true);
} else {
// If response is false, reset form and show response
s.style.visibility = 'visible';
r.style.visibility = 'visible';
r.innerHTML = xhr.responseText;
}
}
};
return false;
}
// Declare event listeners
if (window.addEventListener) {
window.addEventListener('load', function() {
document.forms[0].addEventListener('submit', send, false);
}, false);
} else {
window.attachEvent('onload', function() {
document.forms[0].attachEvent('onsubmit', function() {
send(window.event);
});
});
}
IE8 does not support .getElementsByClassName(). See the Ultimate GetElementsByClassName for a pure JavaScript implementation that will work in IE.

onload Functions Firing Out Of Order

Any idea why the following code:
<script>
var access_token;
var access_token_secret;
function Login(){
img = document.getElementById('authenticate');
img.src = 'authenticate.png';
login = document.getElementById('login');
login.style.visibility="visible";
}
function cookieHandlerStep1(){
chrome.cookies.get({
url:URL_GOES_HERE,
name:'access_token'
},
function(cookie){
if(cookie){
access_token = cookie['value'];
cookieHandlerStep2();
} else{
Login();
}
});
}
function cookieHandlerStep2(){
chrome.cookies.get({
url:URL_GOES_HERE,
name:'access_token_secret'
},
function(cookie){
if(cookie){
access_token_secret = cookie['value'];
Interact();
} else{
Login();
}
});
}
function Interact(){
alert(access_token);
xhr = new XMLHttpRequest();
xhr.open("GET", URL_GOES_HERE, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
document.write(xhr.responseText);
}
}
xhr.send();
}
</script>
<body onload="cookieHandlerStep1(),cookieHandlerStep2(),Interact()">
Could possibly have the functions executing out of sequence?
They're not firing out of order. You've provided callbacks to chrome.cookies.get which are not guaranteed to be called before the rest of the code. The first function returns before the callbacks are fired, and the next two (cookieHandlerStep2() and Interact()) get called.
However, in these callbacks, cookieHandlerStep1() is already calling cookieHandlerStep2() which then calls Interact() - so I presume what you actually want in your onload is just the first function to initiate the chain:
<body onload="cookieHandlerStep1()">

How can the right part of page of Google videos stay still when you search videos on the left

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

Categories