[thelist] AJAX - expose a div with radio buttons, select & submit/save to mysql

Hugh Miller hmiller at cfpress.co.uk
Mon Aug 16 03:19:00 CDT 2010


  Bob,

This is a fairly long answer; really just throwing a couple of immediate 
ideas your way on problem #2.

Problem #1 (Easy)

Any ID you declare within the page needs to be unique; so this is 
exactly why your onclick is always filling the top one. If you add the 
stateId to the id format using something like:

<span id="rating_div_1">

and then change the two JS functions accordingly:

document.getElementById('rating_div_' + 
state_id).innerHTML=req.responseText;

you should see a difference in the resulting output.

Be careful using span here, your current Ajax output puts div's into the 
span which will have unpredictable results in different browsers, much 
easier to imagine your Ajax output as regular HTML and validate 
accordingly. A problem I see quite a lot on Ajax pages, they end up 
hugely invalid and are a nightmare to debug for live sites.

Problem #2 (Various answers)

For your second problem (saving city ratings), I'd be inclined to have 
my form saving everything with the Save State Ratings button (just 
renamed something like Save All Ratings). Don't know enough about what 
your likely use is to know much more, but if you do want to be able to 
save just those entries have a look at your html output structure and 
think about the radio button naming convention (and use ID's for the 
function to handle and build the correct query to send via Ajax).

For example when I open state #1 to show cities perhaps the radio 
buttons appearing could be written to the DOM with something like:

<div class="city">
<input id="S1_C1" name="C1" value="1" type="radio" /> 1
<input name="C1" value="2" type="radio" /> 2
<input name="C1" value="3" type="radio" /> 3
<input name="C1" value="4" type="radio" /> 4
<label for="S1_C1">Broomfield</label>
</div>

# Notice that only the first radio button has an id in use, this is 
because the JS will only need to get the ID for this to collect the 
value selected.

So when you press the button and do getCloseRating(1) you can use the 
state Id to find the various radio buttons that are active, without 
knowing exactly how many are likely and so on this could be difficult to 
manage efficiently. What if one state has 4 cities and another needs 15 
- somewhere in your workflow you'll need to be able to determine what 
this number will be.

You may need to first call a server script that will tell the JS what 
city numbers it then needs to get; or alternatively you could build an 
array into the JS with the values each state will have access to (I'd go 
with a DB table and PHP output probably, much easier to maintain).

I suppose it would be possible to reset the city counter in the radio ID 
for each state so the ID used on each set would then allow you to get 
the correct values as a loop:

for(count = 1;count < max_number_of_cities;count++) {
  document.getElementByID('S'+ state_id + '_C' + count);
  // get element name, value whatever else you need to do with it, 
probably just building a querystring;
}

But this is probably very inefficient (though if you think about how the 
PHP writes the initial page you could also tell the getCloseRating 
function how many cities related to the state to give you 
max_number_of_cities if you have the PHP that writes the initial page. I 
have no idea what your DB backend is set up like so you'd need to look 
at the best way to get this information).

These are just some quick ideas; you'll know yourself what the most 
efficient way of determining which radio buttons you need to get the 
values from to pass to your PHP script.

I tend to always use POST for Ajax so you'll need to look at the best 
way of calling your PHP script that works for you.

HTH
H

On 14/08/2010 03:31, Bob Meetin wrote:
> Simon, all,
>
> Thanks, but I don't really understand how to put this together.  To 
> make this a little easier to troubleshoot I made up a working 
> (failing) demo which saves toplevel ratings.  See it and all files at: 
> http://www.dottedi.biz/code/ajax/rating/index.php, including a zip 
> file to test locally.
>
> -Bob
>
> Simon MacDonald wrote:
>> For class-"q7" read class="q7" - told you I was good at typos
>> S
>>
>> Bob
>> If I understand correctly what you are trying to do you could try 
>> this. I have used the mootools $$ function to return an  array of 
>> input tags of a
>> particular class and then walk the array to find the checked one - 
>> you would
>> have to add a different class to each input set and walk each one. 
>> There's probably neater ways of coding it but it worked for me.
>> (apologies in advance for any typos - I always manage to get some in!)
>>
>> =============html=========================================
>>
>> <div class="stretcher">
>> <p class="compact">
>>
>> <input class-"q7" name="Q7" value="0" type="radio"><span>0</span> 
>> <input class-"q7" name="Q7" value="1" type="radio"><span>1</span> 
>> <input class-"q7" name="Q7" value="2" type="radio"><span>2</span> 
>> <input class-"q7" name="Q7" value="3" checked="checked"
>> type="radio"><span>3</span> <input class-"q7" name="Q7" value="4" 
>> type="radio"><span>4</span> Element 1 </p>
>> <p class='c'><input type="submit" name="submit" value="Save &raquo;"
>> onClick="getCloseRating()></p>
>> .
>> .
>>
>> =============Javascript=========================================
>>
>> function getCloseRating(){
>>
>> // get checked button
>>     var pt = $$("input.q7");// mootools $$ function returns an array of
>> input tags with class q7
>>     // walk the array to find checked button
>>     if (pt.length != 0)// check to see if a button selected
>>     {
>>         var ptIndex = "";
>>         for (var i=0; i < pt.length; i++)
>>        {
>>            if (pt[i].checked)
>>               {
>>                 //do something
>>               }        }
>>
>> }
>>
>>
>> HTH, Simon
>

-- 
Hugh Miller
Web Developer
Clyde&  Forth Press Ltd

Tel:   +44-01475-726511
Fax:   +44-01475-783734
Email: hmiller at cfpress.co.uk


This e-mail and any attachments are confidential and intended solely for the addressee. If you have received it in error, please inform the sender and delete it immediately. The views or opinions contained within this email may not be those of Clyde&  Forth Press Ltd, which accepts no liability for any damage caused by the transmission of any viruses. E-mail traffic is monitored within Clyde&  Forth Press Ltd and messages may be viewed.

Clyde&  Forth Press Ltd is a company registered in Scotland (SC132609) with its registered office at Pitreavie Business Park, Dunfermline, Fife, KY11 8QS.


-- 
This message has been scanned for viruses and
dangerous content by MailScanner, and is
believed to be clean.



More information about the thelist mailing list