Javascript with Ajax question

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 391,986 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,217 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 395 | Replies: 1

•

Join Date: Oct 2007

Posts: 63

Reputation: still_learning is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

still_learning still_learning is offline

Offline

Junior Poster in Training

Javascript with Ajax question

May 25th, 2008

Hey guys,

I am making a website where I have a panel of colors to choose from and it allows the user to click on a layer on the page and then click on the color they wish to change that layer to. Everything works fine and the color changes, BUT I need to be able to save the color changes. So basically I need a way to insert the value of the color variable into my MySQL database. People have told me that this can be accomplished using Ajax since I am using javascript to make the color changes, but I cannot seem to figure out how to do this. Here is an example of what I'm talking about. My function which changes the color of a certain layer is like this:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
 
function color(strColor)
{
 var i;
 for (i=0;i<document.change.elem.length;i++)
 {
  if (document.change.elem[i].checked) break;
 }
 if (document.change.elem[i].value == 'aName')
 {
  document.getElementById(document.change.elem[i].value).style.backgroundColor = '#'+strColor;
  document.change.elements['color'+document.change.elem[i].value].value = '#'+strColor;
 }
 
function color(strColor)
{
 var i;
 for (i=0;i<document.change.elem.length;i++)
 {
  if (document.change.elem[i].checked) break;
 }
 if (document.change.elem[i].value == 'aName')
 {
  document.getElementById(document.change.elem[i].value).style.backgroundColor = '#'+strColor;
  document.change.elements['color'+document.change.elem[i].value].value = '#'+strColor;
 }

Obviously strColor is the variable that holds the color value. So how can I use Ajax to take this value and insert it into my database. Thanks so much for your help.

Last edited by still_learning : May 25th, 2008 at 2:58 pm.

•

Join Date: Aug 2006

Location: Noida, India

Posts: 152

Reputation: Luckychap is an unknown quantity at this point

Rep Power: 3

Solved Threads: 16

Luckychap

Offline

Junior Poster

Re: Javascript with Ajax question

May 26th, 2008

I think you have t just send color-vlaue to database through ajax. If so you have to send a asyncronous request to the server using ajax techonolgy. This can be done after you have chaged the color of the layer successfully. here is the simple ajax code to send data to he server.

Help with Code Tags

(Toggle Plain Text)

function xmlhttpPost(mycolor) {
    var xmlHttpReq = false;
    var self = this;
    var strURL = "path of your servlet to do database entry";
    var sParams = "?color=" + mycolor;
     strURL =  strURL + sParams;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('POST', strURL, true);
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.onreadystatechange = function() {
        if (self.xmlHttpReq.readyState == 4) {
            alert("Color successfully saved in database.");
        }
    }
    self.xmlHttpReq.send(getquerystring());
}

call this function as soon as you have changed the layer color successfully.

When you think you have done a lot, then be ready for YOUR downfall.