Javascript Alert Msg.

[pragan]

Hey All,


Please help me with my javascript coding.

I am trying to implement this:
I have a image button next to a variable/id..which when clicked will add this variable to the other part/section of the webpage. this is done with a function and it use location function to get the updated page after adding. Here is what I am trying to achieve is to show a msg(alert box??) saying that choice is added to the list and it works fine by taking them to the same updated page but I wanted to have a different look and feel for the alert box and tried that from this website(slayeroffice) and it seems to work fine if its just used alone but when I try to implement this along with the existing one and do it then the alert box doesn't wait for the user to click OK..it just shows the box and go to the updated page without even clicking. Please help me what I am doing wrong here or it would be great if there is any other way other than alert box to achieve this.

I thought of showing a div box once the updated page is shown saying "your choice is added to the list" and hide it after few seconds but I am not able to think of how to implement this with the existing function.

Regards
pragan.

[nottRobin]

I'm afraid I found that very difficult to understand. Could you rephrase and perhaps include some HTML code to illustrate?

Robin.

[pragan]

Hi Friends,

This is what I am trying to achieve.

I have a page in which there is a option for an user to click on a button(type=image) and once it is clicked it will add that item to the list which is on the same page so the page refresh/js location .
My current code is structured this way for this add function.

Assume here is the "Image" button next to an item so when this is clicked the below js function adds it to the list(can consider like the add to cart thing)

Current JS.
function addItem(item) {
function getArgs() {
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
var newstring = "";
for(var i = 0; i < pairs.length; i++){
var pos = pairs[i].indexOf('=');
if (pos == -1) continue;
var argname = pairs[i].substring(0,pos);
if(argname.toLowerCase() != "siteid" && argname.toLowerCase() != "urlpull" && argname.toLowerCase() != "exstyle" && argname.toLowerCase() != "aitems" && argname.toLowerCase() != "mitem" && argname.toLowerCase() != "ditems"){
newstring += pairs[i] + "&";
}
}
return newstring;
}

if (getArgs()) { urlString = getArgs(); }
else { urlString = ''; }

window.location = location.pathname + '?' + urlString + 'aitems=' + item + '#itemList';
}

//Code ends here.

Here, the idea is to show the user in someway that the item is being added to the list on the side and they can click OK to close the alert box.Currently there is no way that they will know its being added unless they check it in the list to see if its added.

I tried the usual alert method and it works fine. So when they click the image button it alerts them saying "Item Added" and if they click ok the page loads with the updated list...so this is fine..but I have the criteria of not to have this usual default boring Alert box so I found this site http://slayeroffice.com/code/custom_alert/ (please scroll down for the code here).
to customize the alert window. I was able to get this working but the problem(main issue) is if they click the image the Alert box appears but before they click OK the page refreshes and alert box disappears on its own but if they click the image button for second time then the alert box stays till they click OK and the page gets loaded as usual...

I added my Alertbox in the last to the above JS and also tried adding that to the html code..both way it works with the default alert box but I am struck here as the look and feel for the box should be different.

Hope this information is helpful to guide me..Please help me out.

Other ideas that I thought of :
1) show the Alert box after the page is loaded by adding the item saying "You item has been added to the list".
or
2)I was thinking to show some message in the DIV once they click the image button and after the page loads..
But I am not able to do it though.
I read it in many sites that customizing the alert box is not possible but the way the above site had done works as a standalone alert box but not with my code.
Waiting for the help.

Regards
Pragan

[Philip M]

Why not use a <div> or <span> with innerHTML?

[pragan]

Hi,

thanks for the suggestion but it would be easy if you can guide me in implementing that..as i am not good at JS.Please advise me.

[Philip M]

This is what you want - obviously you will need to adapt it to suit your situation:-

<span id = "messagebox"></span>

<script type = "text/javascript">

var message = "Your choice has been added to the list";
function showMessage() {
document.getElementById("messagebox").innerHTML = message;
var tim = window.setTimeout("end()", 4000);  // show for 4 seconds
}

function end() {
document.getElementById("messagebox").innerHTML = "";  // clear the messagebox
}

showMessage()

</script>

[pragan]

Hi,

thanks for the code.I can understand it well.
One more final question : As I mentioned in my previous post I have a other function which is actually adding the item to the list and reloads the page with the item in the list ..so if I have the above innerhtml code where it should go?? I tried calling this innerhtml function in the button along with the already existing function as below.

This is the button currently :
<input type="button" value = "Testing" onclick="addItem('$item')" />
I modified it as
<input type="button" value = "Testing" onclick="addItem('$item');showMessage()" />

What happens is the page gets loaded before we can read the message in innerhtml.

Any help??

Thanks a lot.

[Philip M]

Move this:-

window.location = location.pathname + '?' + urlString + 'aitems=' + item + '#itemList';

to here:-

function end() {
document.getElementById("messagebox").innerHTML = ""; // clear the messagebox
window.location = location.pathname + '?' + urlString + 'aitems=' + item + '#itemList';

}

In other words, change the location after the 4 seconds message display.
Make sure that all the variables are global. As things stand they are local to the function addItem().

[pragan]

Hi,
I am not able to make it work it still..I guess I did not understand the way you had mentioned..below is the way I have my JS in a file.

In the HTML I ahve the button as
<input type="button" value = "Test the alert" onclick="addItem('$item')" />
when I click the button I get the innerhtml text and it disappears after 8 seconds but doenst load the page with the item to the list.

Please advise me if I have made the changes in the wrong way.thanks again.

function addItem(item) {
function getArgs() {
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
var newstring = "";
for(var i = 0; i < pairs.length; i++){
var pos = pairs[i].indexOf('=');
if (pos == -1) continue;
var argname = pairs[i].substring(0,pos);
if(argname.toLowerCase() != "siteid" && argname.toLowerCase() != "urlpull" && argname.toLowerCase() != "exstyle" && argname.toLowerCase() != "aitems" && argname.toLowerCase() != "mitem" && argname.toLowerCase() != "ditems"){
newstring += pairs[i] + "&";
}
}
return newstring;
}

if (getArgs()) { urlString = getArgs(); }
else { urlString = ''; }
showMessage()

}
var message = "Your choice has been added to the list";
function showMessage() {
document.getElementById("messagebox").innerHTML = message;
var tim = window.setTimeout("endmsg()", 10000); // show for 4 seconds

}

function endmsg() {
document.getElementById("messagebox").innerHTML = ""; // clear the messagebox
window.location = location.pathname + '?' + urlString + 'aitems=' + item + '#itemList';
}

[pragan]

hi,

I tried it again but still the message doesnt stay longer even after its placed under the settimeout statement..please guide me .

thanks
pragan

[Philip M]

Originally Posted by pragan

hi,

I tried it again but still the message doesnt stay longer even after its placed under the settimeout statement..please guide me .

thanks
pragan

Sorry, I don't understand. What exactly is wrong? Do you get the message for 4 seconds (8 or 10 far too long!!)?

Or is the problem that the redirect does not take place. Did you heed my comment that the variables (urlString and item) must be global?

[pragan]

Hi,

First, I tried in the way as in Post#9 but realized that its not global as you mentioned.So I did the below way by combining the showmessage and endmessage inside the additem function.. The output is
Firefox : Message appears but redirection takes place as usual..it doesnt wait for the timeout and then redirect.
IE : Message does not appear but redirection works as usual(also I see a JS error in the status bar.)

Help me!!

//COde here

function addItem(item) {
function getArgs() {
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
var newstring = "";
for(var i = 0; i < pairs.length; i++){
var pos = pairs[i].indexOf('=');
if (pos == -1) continue;
var argname = pairs[i].substring(0,pos);
if(argname.toLowerCase() != "siteid" && argname.toLowerCase() != "urlpull" && argname.toLowerCase() != "exstyle" && argname.toLowerCase() != "aitems" && argname.toLowerCase() != "mitem" && argname.toLowerCase() != "ditems"){
newstring += pairs[i] + "&";
}
}
return newstring;
}

if (getArgs()) { urlString = getArgs(); }
else { urlString = ''; }
var message = "Your choice has been added to the list";
document.getElementById("messagebox").innerHTML = message;
var tim = window.setTimeout('document.getElementById("messagebox").innerHTML = ""', 8000); // show for 8 seconds
window.location = location.pathname + '?' + urlString + 'aitems=' + item + '#itemList';
}

[Philip M]

So I did the below way by combining the showmessage and endmessage inside the additem function..

That is quite wrong. Just use the code you were given.

The message shows at once, and will continue to show indefinitely until you stop it. The setTimeout() function calls the function end() after 4 seconds to erase the message from the message box, and then after that you can redirect. Without that redirection takes place at once.

[pragan]

hi,

Thanks. I tried the other way too by placing the functions as you advised me but redirection never happened. MEssage disappears after 4 seconds but doenst redirect...so I realised it mmight be because of the fact it is not global so thats the reason I moved it ..sorry if did it in wrong way but I dint understand how to make the variables global so that the window.location line inside end message function can use those variables to redirect it.

My assumption was
1) As show message() is called in the additem function it will show the message and in turn as it has the call for endmessage() function it should make it disappear and then redirect but only the disappear works not the redirection.

Any more suggestions for me pleas?

Regards
pragan.

[Philip M]

To make a variable global, declare it with var outside the function.

e.g. var urlString = "";

Try testing with:-

dummy = location.pathname + '?' + urlString + 'aitems=' + item + '#itemList';
alert (dummy);
window.location = dummy

What does the alert reveal?