We Keep Coding

How to refresh a specific part of the HTML Document with Vanilla JavaScript

I am working on an AJAX cart system where the sub total will automatically update when the quantity changes. My solution is every time the input changes, post it to the current page (cart page) then reload the div that displays the sub total. However, I don't know how to do this with pure JavaScript, and I haven't found any reference yet.
This is my function for the above algorithm:
var _rangeInput = document.querySelectorAll('.ranum'), _upAload = document.getElementsByClassName('upAload');
var _frmData = {};
for (var i = 0; i < _rangeInput.length; i ++) {
_rangeInput[i].addEventListener('change', function(){
_frmData[this.name] = this.value;
ajaxFormValidate({
type: 'POST',
url: location.href,
method: true,
sendItem: _frmData,
success: function(response) {
//reload here
}
});
}, false);
}
Code explaination:
First, get the inputs and divs that need to be processed.
Loop through all of the inputs and get their values and names.
I have written an AJAX function for my self, you can look above.
Is there anyway to do this with pure JavaScript?
I can't use JavaScript methods or functions to change the content since I am sending the request to the same page, as a result, response here will have the value of the whole document.
Also, this is how the system works:
First, the user changes the quantity they want
AJAX sends request to the same page
The page changes the information based on the request
AJAX receives the request, and refreshes/reloads the specific div

Simply set the innerHTML of your sub total div with the response data.
document.getElementById("sub-total").innerHTML = response.value; //Whatever value you get in response

It sounds like you're actually asking how to get a single element out of an AJAX response.
You can do that by parsing the response into a temporary element, then finding the element you need within it:
const holder = document.createElement('div');
holder.innerHTML = response;
const myElement = holder.querySelector('some selector');

document.getElementById(..) gives null even though element is present

I have the following program in which a user can enter any name in a search box after which I redirect the user to a page called usernameSearchResults.php where I print a list of the usernames obtained in the form of an array from usernamesearch.php. Here is the javascript:
$(window).on('load', function() {
$(".searchBarForm").submit(function(e){
e.preventDefault();
var search=document.getElementsByClassName("search")[0].value;
$.ajax
({
type: 'POST',
url: 'usernamesearch.php',
data:
{
search:search
},
success: function (response)
{
window.location.href="usernameSearchResults.php";
response = JSON.parse(response);
var array_length = Object.keys(response).length;//getting array length
for(var i=0;i<array_length;i++){
if(i==0){
document.getElementById("searchResults").innerHTML=""+response[0].username+"<br>";//i=0
}else{
document.getElementById("searchResults").innerHTML+=""+response[i].username+"<br>";
}
}
window.stop();//stops page from refreshing any further(put here to fix a bug that was occuring)
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
return false;
})
});
This is usernameSearchResults.php(inside tags):
<h1>Username Search Results</h1>
<p id="searchResults"></p>
But the problem is that whenever I go to any other page say index.php and enter the username to be searched, the page redirected to is indeed usernameSearchResults.php but the page is blank and error in the console shown says document.getElementById("searchResults") is null.But if I stay at the page usernameSearchResults.php and refresh it and then search any name again, then the results are correctly obtained. What is the problem here?

I would say that the user is being redirected to usernameSearchResults.php but the JavaScript code is still being executed from the current page, which have no element with id "searchResults" defined.
As #Kashkain said, one way to achieve what you want is to pass your response variable in your redirection url and process it then into your other page.

I think the problem here is that the new document could very well still not have been loaded when you call getElementById.
You could add a listener on your target element which would trigger on the load event. In this event's handler you could execute the operations that are now giving you an error.
I have never done or tried this, but maybe something like this would work:
$('#searchResults').on('load', function() {
//execute code here
});
Or you could add a form to the page with action="target_url" method="post" and send your response data through post by doing form.submit, and place the problematic code into usernameSearchResults.php, which will need to read data from POST - this way you can send your ajax data to the new page

How can delete Ajax Request from browser memory?

I have a simple problem, how can I delete the ajax request store into the memory. I'll try to explain what I'm will trying to get.
I have a form for edit a table into database.
All runs well the first time, but the problem is after trying again. If I don't refresh the page, it always sent the same data from the first request.
Example:
Into database I have
id
user
password
I have a form with the same parameters, and I called this form with ajax.
I edited a register from the database, and I sent the data edited, and run well, but into the browser memory, the request is stored.
I try to edit again the same register, but when I send again, the data is the same like the first time.
If the first time send:
user : 'userx'
password : 'usex1234'
When I try again to edit this register for example with:
user: 'userxx'
password : 'password1234'
at the end, the data send has these values
user : 'userx'
password : 'usex1234'
How can fix this? I suppose delete the first request, but I can't.
I want to clean the memory from browser without f5 or refreshing, because only with f5, running again well.
I tried:
request = new Request();
request = null; but not happens nothing
delete request; but is the same, nothing changes.
Who can help me please?
MY CODE:
function _update(id){
var n = Number(new Date());
var edit = new Request({
url: 'users/edit?'+new Date().getTime(),
noCache: true,
onRequest: function(){
$('dark').setStyle('display','block');
},
onSuccess: function(data){
$('dark').setStyle('display','none');
box_edit.close();
update();
},
onComplete: function(response){
console.log(response);
},
onFailure: function(){
Sexy.error("Ocurrio un error procesando su solicitud, intente más tarde.");
}
});
var box_edit = new LightFace.Request({
url: 'users/edit?'+new Date().getTime(),
draggable:true,
title: 'Editar usuario.',
request:{
method: 'post',
data: { isc_user_id: id }
},
buttons: [ { title: 'Editar', color:'blue', event: function(){
var id__ = $('isc_user_frm_id_'+id).get('value');
if (before_update(id__)){
if ( $('isc_password_'+id__).get('value')=='' && $('isc_re-password_'+id__).get('value')==''){
var data = 'userEdit=Ok&isc_user='+$('isc_user_'+id__).get('value')+'&isc_group='+$('isc_group_'+id__).getSelected().get('name')+'&isc_user_id='+ id;
}else{
var data = 'userEdit=Ok&isc_user='+$('isc_user_'+id__).get('value')+'&isc_password='+hex_md5($('isc_password_'+id__).get('value'))+'&isc_group='+$('isc_group_'+id__).getSelected().get('name')+'&isc_user_id='+ id;
}
edit.send(data);
}
}
},
{ title:'Cancelar', event:function(){ this.close(); } }]
});
box_edit.open();}

The simplest solution, as your server-side should be stateless, and the variables shouldn't be cached to send to the server, so the problem is probably with how you are getting the values.
The browser may cache when it requests information from the server, which is why it was suggested to turn off caching, but that is for data coming from the server.
So, I would suggest you use the Firebug extension on Firefox and you can put in breakpoints to see if the values are changing.
For every part of setting data you should put these in variables so you can check each value easily.
I didn't create all the variables, but I wanted to show an example to help you.
var val1 = $('isc_user_'+id__).get('value');
var val2 = $('isc_password_'+id__).get('value');
var data = 'userEdit=Ok&isc_user='+$('isc_user_'+id__).get('value')+'&isc_password='+hex_md5($('isc_password_'+id__).get('value'))+'&isc_group='+$('isc_group_'+id__).getSelected().get('name')+'&isc_user_id='+ id;
You will also want to look at the value of id as you may not be appropriately changing that value when the password is changed. I expect this will be your problem.

Append a string like e.g. a timestamp to the requested url, this prevents the browser from using the cached version of the requested ressource.
In mootools there is a noCache-option for Request, set it to true.(default is false, so the cache will be used there without setting the option)

The OP wrote:
FIX
Ok, after tring a lot of ways to fix, I found a solution, which consist of creating a dynamic form. I created a random variable and sent just before to get the form with ajax, after recovery this value into the server code, I put this value like a name of the form and I have a dynamic form. With this I fixed the problem.
Example
function rand(){
return Math.floor(Math.random()*1000);
}
function _update(id){
var form_rand = rand();
...
data: { isc_user_id: id , form_rand : form_rand }
...
To get the value now:
var id__ = $('isc_user_frm_id_'+id+form_rand).get('value');
Into the html I have and hidden input like this:
<input type="hidden" id="isc_user_frm_id_<?php echo $form_rand; ?>" value="<?php echo $r; ?>" ?>

How to Make a Feed From User Submitted Posts

I'm trying to figure out how to use AJAX to create a Twitter-like feed that displays user's posts on the same page immediately after they push the submit button. It would be an infinite-feed site that would have a "more" button at the bottom.
All I'm trying to make is a simple page containing a textarea box with a submit button and to have user submissions appear below the box as they are submitted.
If possible, a walk through or discussion of the script needed to do this would be great.
Thanks so much

All you need is a server-side script with an SQL query that would return newer posts.
have your javascript store a variable of the date or of the last post id (used PHP for clarification):
result = mysql_query("SELECT ID,POST FROM POSTS WHERE DATE>" . $_GET['date']); //or use WHERE ID> $_GET['id']
while(rows[] = mysq_fetch_array(query));
print json_encode(rows);
now you have a server-side script that will return new posts, so all you have to do is write javascript function for the more button:
updatePosts = function () {
$.ajax({
url: 'serversiderUrl?lastId=' + last_id, //last_id is global variable for the id of the last post on the page
success: function(data){
data = JSON.parse(data);
for(i in data){
$('#posts_container').append(data[i].post); //do your appending functions here
last_id = data[i].id;
}
}
}
now for posting new entries create a server-side script of your favorite language that handles new posts:
result = mysql_query("INSERT INTO POSTS VALUES(''," . urldecode($_POST['POST']) . ")");
now for the client side:
submit_post = function(){
$.ajax({
type: 'POST',
url:'yourposturl',
data: "post=" + encodeURIComponent($('#textArea').text()),
success: function(){
updatePosts(); // call the function that update the posts so the new entry is now added to the page
}
});
}
Now bind the functions to the appropriate buttons when the document is fully loaded:
$(document).ready(function (){
$('#moreButtonId').click(updatePosts);
$('#submitButtonId').click(submitPost);
});

There are many ways such as the submit button kept sending it to the database while we'd append text to a container underneath. Or we can update the container underneath to create a container (page) that are similar, after the ajax response is successful then we append the data to the container beneath
$.post(url,function(data){
//Here you can append the data responsed by the ajax request to the container underneath
});
But you have to have a exactly same view with a conatiner (feed container) existing in the currently page

How do I make a jQuery POST function open the new page?

I know that a submit button in HTML can submit a form which opens the target page, but how do I cause a jQuery ajax call to POST information to a new page and also display the new page. I am submitting information that is gathered by clicking elements (which toggle a new class called "select") and then identifiers from these items with the new class are added to a string and POSTed to the new page. This new page will use this data to provide a summary of the selections from the previous page. I currently can get it to POST the data to a new PHP page but it seems to be the ajax function simply remains on the current page (which is great for some things, just not this), not redirecting to the new page. how might I go about doing this?
here's the script section:
//onload function
$(function() {
//toggles items to mark them for purchase
//add event handler for selecting items
$(".line").click(function() {
//get the lines item number
var item = $(this).toggleClass("select").attr("name");
});
$('#process').click(function() {
var items = [];
//place selected numbers in a string
$('.line.select').each(function(index){
items.push($(this).attr('name'));
});
$.ajax({
type: 'POST',
url: 'additem.php',
data: 'items='+items,
success: function(){
$('#menu').hide(function(){
$('#success').fadeIn();
});
}
});
});
return false;
});
any pointers would be great!! thanks
edit:
thanks for the help, I've changed my script to :
//onload function
$(function() {
//toggles items to mark them for purchase
//add event handler for selecting items
$(".line").click(function() {
//get the lines item number
var item = $(this).toggleClass("select").attr("name");
});
$('#process').click(function() {
var items = [];
//place selected numbers in a string
$('.line.select').each(function(index){
items.push($(this).attr('name'));
});
$('#items').attr('value',items);
$('#form').submit()
});
return false;
});

First of all I discourage using ajax here as you are not using it for the purpose for which it is intended to, and you are forcing it to do a reload.
You can do something like this in the success of ajax
success: function(){
window.location = "the new url you wanted to load";
}
Edit:
Why not do a normal post with form action attribute set to the page you want to post to and you can access all the variables of the form in that posted page, or alternatively you can concatenate or store in array all your values and store this array in a hidden variable and access this variable in the posted script.

Ajax posts by definition won't to a page load. But you can do whatever you want in your success handler. So just change the document location there:
success: function(){
$('#menu').hide(function(){
$('#success').fadeIn();
});
window.location = 'http://www.example.com/elsewhere';
}
Oftentimes a POST will return a HTTP 301 or 302 redirect. In that case, you can get the returned header information from the XHR object, which is passed into the callback functions.
complete: function( xhr ) {
// assume we got a redirect; the new URL will be in the Location header
window.location = xhr.getResponseHeader( 'Location' );
}