Page 1 of 2
many onclicks
Posted: Tue Feb 14, 2006 12:16 pm
by shiznatix
Ok I find myself unable to do javascript once again! Here is my problem:
I have a form with like 10 users or whatnot and each user has permissions for about 8 or so 'guestbooks'. There are 3 types of the permissions - 'r', 'w', and 'n'. Right now it goes you click on the link and it reloads the page and changes it to the next one, like this:
permission for this guestbook for this user is set to n. When you click the 'n' the page reloads and updates the database and now that user has permisson of 'r' set for that guestbook.
This is a hassel because you have to click it, then find where you where and click it again to change from 'n' to 'w'.
What I want to do:
Just use javascript so you click on the link but the page does not reload it just automatically changes it to the next one like it does now and then you hit submit and it updates all of the users for all of the guestbooks.
This will involve changing a hidden input that will look like this
Code: Select all
<input type="hidden" name="<?= $username ?>[<?= $guestbook ?>]" value="r">
the value is of course what is needed to change, but the link itself also has to change from the 'r' to the 'w'.
The final question:
How do I go about doing this?
Posted: Tue Feb 14, 2006 1:50 pm
by Chris Corbyn
I got lost halfway through that

But if I understood correctly this involves querying a database on each click yes? Have you considered AJAX? The use here would be very simple

Posted: Tue Feb 14, 2006 1:56 pm
by RobertGonzalez
Hey Shiz, do you have to use a link or can you use a form field (checkbox, radio button, etc)? This is fairly easy to do (at least for me) if you use a form field. Am sure that using a link can be adapted just as easily. Here is some code I have for changing the text of a link. This is followed by code I have for the changing the value of a form based on a checked checkbox.
The first...
Code: Select all
//Chage link text
function changeLinkText( linkID, textClicked, textUnclicked )
{
document.getElementById( linkID ).addEventListener('click', toggleText, false);
}
function toggleText(e)
{
e.preventDefault();
var link = e.currentTarget;
var text = link.firstChild;
text.nodeValue = (text.nodeValue == textUnclicked) ? textClicked : textUnclicked;
}
// Usage - <a href="#" onClick="changeLinkText('myLink', 'I am clicked', 'Click Me');" id="myLink">Click this thing</a>
And the other...
Code: Select all
function changeFieldValue( obj ) {
obj.form.field_name_1.value = ''; //Defaults field_name_1 value to ''
obj.form.field_name_2.value = ''; //Defaults field_name_2 value to ''
obj.form.field_name_3.value = ''; //Defaults field_name_3 value to ''
obj.form.field_name_1.focus(); // Sets focus to field_name_1
if (obj.form.check_box_field.checked) { // Checks if check_box_field is checked
// The following changes styles of the fields and values as well - Simulates disabling fields
obj.form.form_field_1.style.color = '#c0c0c0';
obj.form.form_field_2.style.color = '#c0c0c0';
obj.form.form_field_3.style.color = '#c0c0c0';
obj.form.form_field_1.value = 'Anonymous';
obj.form.form_field_2.value = 'Anonymous';
obj.form.form_field_3.value = '99999';
obj.form.another_text_field.focus(); // Moves focus to another_text_field
} else {
obj.form.form_field_1.style.color = '#000000';
obj.form.form_field_2.style.color = '#000000';
obj.form.form_field_3.style.color = '#000000';
}
}
function checkTab( obj ) {
if (obj.form.check_box_field.checked) {
obj.form.another_text_field.focus(); // If the box is checked reset focus to "enabled" field
}
}
// Usage
// <input type="checkbox" name="check_box_field" onclick="changeFieldValue(this);" />
// <input type="text" name="field_name_1" value="" size="50" maxlength="50" onfocus="checkTab(this);" />
I think you can adapt this to suit your needs. I think you might be able to update the DB at the same time as the form data is posted, too, without having to hit the DB with every change.
Posted: Tue Feb 14, 2006 2:21 pm
by feyd
becareful not to use a locking ajax for each of the clicks. It becomes painful to have to wait for an update after only clicking many form elements. I've seen a few ajaxed things that every field was ajaxed, which made the page run EXTREMELY slow as it locked up all other fields while in transport. So make sure to do asynchronous transports whenever possible.
Posted: Tue Feb 14, 2006 2:39 pm
by shiznatix
whew everah! awesome awesome! to make it so i knew what i was doing because i can barley read javascript i simplified the stuff. here is what i came up with:
Code: Select all
<script>
function change(theform, thething, thelink)
{
var target;
target = theform.thething.value;
if (target == 'r')
{
theform.thething.value = 'w';
thelink.innerHTML = 'w';
return;
}
else if (target == 'w')
{
theform.thething.value = 'n';
thelink.innerHTML = 'n';
return;
}
else if (target == 'n')
{
theform.thething.value = 'r';
thelink.innerHTML = 'r';
return;
}
}
</script>
<form name="myForm" id="id">
<input type="text" name="funk" value="r">
<a href="#" onclick="change(document.getElementById('id'), 'funk', document.getElementById('id2'))" id="id2">r</a>
</form>
but it does not work. if i take out the variable 'thething' and just put in 'funk' inside the function then it works perfect without errors. how can i do the variable field name inside the function?
and feyd: no ajax here, im terrible with javascript still.
Posted: Tue Feb 14, 2006 2:50 pm
by Chris Corbyn
feyd wrote:becareful not to use a locking ajax for each of the clicks. It becomes painful to have to wait for an update after only clicking many form elements. I've seen a few ajaxed things that every field was ajaxed, which made the page run EXTREMELY slow as it locked up all other fields while in transport. So make sure to do asynchronous transports whenever possible.
I'm heading for an e-Beating here for being a pedant
I just thought I might as well point out the difference between AJAX and XMLHttp. AJAX *is* asynchrous. It doesn't linger while it waits for the server to get back to it. AJAX without using asynchronisity would not be AJAX, it would be plain old XMLHttp

Admittedly, AJAX is nothing more than a buzzword for this extended feature of the XMLHttpRequest object.
//Hides from feyd
Posted: Tue Feb 14, 2006 2:55 pm
by feyd
unfortunately, they all fall under the umbrella of Ajax now, since Ajax no long has much to do exactly with it's original acronym.
Posted: Tue Feb 14, 2006 2:56 pm
by Chris Corbyn
feyd wrote:unfortunately, they all fall under the umbrella of Ajax now, since Ajax no long has much to do exactly with it's original acronym.
Quite true... pedantism dropped

Posted: Tue Feb 14, 2006 3:32 pm
by Chris Corbyn
shiznatix wrote:whew everah! awesome awesome! to make it so i knew what i was doing because i can barley read javascript i simplified the stuff. here is what i came up with:
Code: Select all
<script>
function change(theform, thething, thelink)
{
var target;
target = theform.thething.value;
if (target == 'r')
{
theform.thething.value = 'w';
thelink.innerHTML = 'w';
return;
}
else if (target == 'w')
{
theform.thething.value = 'n';
thelink.innerHTML = 'n';
return;
}
else if (target == 'n')
{
theform.thething.value = 'r';
thelink.innerHTML = 'r';
return;
}
}
</script>
<form name="myForm" id="id">
<input type="text" name="funk" value="r">
<a href="#" onclick="change(document.getElementById('id'), 'funk', document.getElementById('id2'))" id="id2">r</a>
</form>
but it does not work. if i take out the variable 'thething' and just put in 'funk' inside the function then it works perfect without errors. how can i do the variable field name inside the function?
and feyd: no ajax here, im terrible with javascript still.
Just use another getElementById(). I swear by it.
Code: Select all
<script>
function change(theform, thething, thelink)
{
var el1 = document.getElementById(theform);
var el2 = document.getElementById(thelink);
var target = document.getElementById(thehing).value;
switch (target)
{
case 'r':
el1.value = 'w';
el2.innerHTML = 'w';
return;
//
case 'w':
el1.value = 'n';
el2.innerHTML = 'n';
return;
//
case 'n':
el1.value = 'r';
el2.innerHTML = 'r';
return;
}
}
</script>
<form name="myForm" id="id">
<input type="text" id="funk" name="funk" value="r">
<a href="#" onclick="change('id', 'funk', 'id2')" id="id2">r</a>
</form>
Posted: Tue Feb 14, 2006 3:44 pm
by shiznatix
don't swear on your code before you test it

. that does not work (even after i fix your typo on var target = document.getElementById(thehing).value;)
edit that error. there is no error, it changes the link text but not the text box text. hummmmmm....
Posted: Tue Feb 14, 2006 3:44 pm
by RobertGonzalez
shiznatix wrote: ...how can i do the variable field name inside the function?...
You are on the right track setting up the function to take a few parameters: the form object, the field name, the value you are passing to the field. My javascript is limited so I am not certain how to tell javascript what field you are clicking (although I know DOM makes it possible). I will try to look around if I can, but it is going to be a while. I am going into three hours of meetings in just a few minutes.
Posted: Tue Feb 14, 2006 3:53 pm
by Chris Corbyn
shiznatix wrote:don't swear on your code before you test it

. that does not work (even after i fix your typo on var target = document.getElementById(thehing).value;)
edit that error. there is no error, it changes the link text but not the text box text. hummmmmm....

That error isn't from the code I posted. Must be another place you refer to theform.thething I guess
Everah wrote:My javascript is limited so I am not certain how to tell javascript what field you are clicking (although I know DOM makes it possible)
As for javascript being told which field you're clicking... you can just pass the object node itself ("this"), unless I'm misunderstanding

Posted: Tue Feb 14, 2006 4:00 pm
by shiznatix
haha d11wtq, i found the problem! you missed just 1 more document.getElementById()....or was your
Just use another getElementById(). I swear by it.
telling me to put that last one in there? either way this works:
Code: Select all
<script>
function change(theform, thething, thelink)
{
var el1 = document.getElementById(theform);
var el2 = document.getElementById(thelink);
var target = document.getElementById(thething).value;
var targ = document.getElementById(thething);
switch (target)
{
case 'r':
targ.value = 'w';
el2.innerHTML = 'w';
return;
//
case 'w':
targ.value = 'n';
el2.innerHTML = 'n';
return;
//
case 'n':
targ.value = 'r';
el2.innerHTML = 'r';
return;
}
}
</script>
<form name="myForm" id="id">
<input type="text" id="funk" name="funk" value="r">
<a href="#" onclick="change('id', 'funk', 'id2')" id="id2">r</a>
</form>
Posted: Tue Feb 14, 2006 4:04 pm
by Chris Corbyn
shiznatix wrote:haha d11wtq, i found the problem! you missed just 1 more document.getElementById()....or was your
Just use another getElementById(). I swear by it.
telling me to put that last one in there?
My bad

Good job for spotting it

Posted: Tue Feb 14, 2006 4:23 pm
by shiznatix
whew productive evening so far. everything is coming together really well just 1 last thing.
when i do:
when you click the link it executes the javascript but it jumps the page to the top so it like scrolls the page back up to the top. I really need it to not jump like that. any ideas?