The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
|||
|
|||
Desperate ajax help needed
I am working on a nice hack: Calendar sports predictions
I have my predictions.php where I have all the code laid out for submissions, but it is important to me that the prediction are done in ajax so the user does not leave the page which sometimes has multiple events, thus multiple predictions (for each event). I sought help in the paid forums, got the run around by 2 wantabe coders so I decided to do it myself, and if not for the ajax, I am pretty much done. What I am looking for is something in the manner of the Post Thank You hack to submit into a TABLE_PREFIX ."predictions. That's all I need. As a picture is worth a thousand words, I am attaching two of them, both from calendar custom fields. Please someone give me the ajax formula. I never worked on ajax before and I have no idea where to start. I need the formula when you click on submit to submit to predictions.php and the one when you click on remove simply deletes the predictions (once it is deleted the boxes reappear, providing that timenow is smaller than dateline_from, all that is done already) |
#2
|
||||
|
||||
Post your HTML form and I'll help you.
|
#3
|
|||
|
|||
nico, thank you. The html form really is just a simple form
Quote:
The 2 templates that I am working with are calendar_showeventsbits and calendar_showevents_customfields. The form is in the showevents and the fields are in the custom fields. Since there was no hook for customfields, I had to do all the coding the php, at the foreach loop. and my current database structure (which will be extended but has nothing to do with the ajax part) PHP Code:
|
#4
|
||||
|
||||
Your form is somewhat messed up. I need the names of the input fields, and I need to know which values you want to send to your PHP script.
Here a raw example. Code:
<script type="text/javascript"> function create_req_object() { var req = false; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { var msp = new Array('Microsoft', 'Msxml2'); for (var i in msp) { try { req = eval('ne' + 'w Act' + 'iveXObj'+ 'ect(msp[i] + ".XMLH'+ 'TTP");'); } catch(e) { continue; } } } return req; } function submit_form(form) { var http = create_req_object(); if (!http) { return true; } http.open('POST', form.action); http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); http.onreadystatechange = function() { if (http.readyState == 4 && http.status == 200) { alert("The data has been submitted."); } } http.send('do=dopredict&foo='+ form.fieldname.value +'&bar='+ form.otherfield.value); return false; } </script> <form action="predictions.php" method="post" onsubmit="return submit_form(this);"> <input type="hidden" value="do"><input type="hidden" value="dopredict"> then I have the different fields which are dynamic <input type=text value=Home> <input type=text value=Away> <input type="submit"> </form> You have to edit this line. Code:
http.send('do=dopredict&foo='+ form.fieldname.value +'&bar='+ form.otherfield.value); So if you'd do a print_r() for the example above you'd get something like this Code:
Array ( do => dopredict, foo => (value of your field), bar => (value of your field), ) |
#5
|
|||
|
|||
this the calendar_showeventsbit template
PHP Code:
and the fields are in calendar_showeventsbit_customfield PHP Code:
PHP Code:
$box="<input name=\"$customtitle\" type=\"text\" size=\"1\" value=\"\">"; $button="<input type=\"image\" src=\"$stylevar[imgdir_button]/predict.gif\">"; Nico, I have some problems. The form submits, but it's not ajax. and I also have a javascript error. Here is what I am submitting Quote:
PHP Code:
|
#6
|
||||
|
||||
There were a couple of syntax errors. Also note that variable names cannot begin with numbers. Neither in PHP nor Javascript. (I changed 1Home to Home1 and 1Away to Away1).
This works for me. Code:
<script type="text/javascript"> function create_req_object() { var req = false; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { var msp = new Array('Microsoft', 'Msxml2'); for (var i in msp) { try { req = eval('ne' + 'w Act' + 'iveXObj'+ 'ect(msp[i] + ".XMLH'+ 'TTP");'); } catch(e) { continue; } } } return req; } function submit_form(form) { var http = create_req_object(); if (!http) { return true; } http.open('POST', form.action); http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); http.onreadystatechange = function() { if (http.readyState == 4 && http.status == 200) { alert("The data has been submitted."); } } http.send('do=addpredict&Home='+ form.Home.value +'&Away='+ form.Away.value +'&eventid='+ form.eventid.value +'&1Home='+ form.Home1.value +'&1Away='+ form.Away1.value); return false; } </script> <form action="predictions.php" method="post" onsubmit="return submit_form(this);"> <input type="hidden" name="do" value="addpredict"> <input type="hidden" name="eventid" value="32"> <table class="tborder" cellspacing="1" cellpadding="4" border="0"> <tr><td class="tcat" colspan="5">Interactive game details</td></tr> <tr><td class="thead">Your predictions</td><td class="thead">Actual</td><td colspan="2" align="center" class="thead">Teams</td><td class="thead">Colors</td></tr> <div class="smallfont"> <tr><td align="center"> <input type="hidden" name="Home1" value="RDG"> <input name="Home" type="text" size="1" value=""> </td><td class="alt2" align="center"></td><td nowrap> <strong>Home</strong>: </td><td> RDG </td><td><img src="images/calendarteams/RDG.gif"> </div> </td></tr> <div class="smallfont"> <tr><td align="center"> <input type="hidden" name="Away1" value="Victory"> <input name="Away" type="text" size="1" value=""> </td><td class="alt2" align="center"></td><td nowrap> <strong>Away</strong>: </td><td> Victory </td><td><img src="images/calendarteams/Victory.gif"> </div> </td></tr> <div class="smallfont"> <strong>Venue</strong>: Gonaives - Parc Vincent </div> <div class="smallfont"> <strong>Competition</strong>: Digicel Cloture </div> <div class="smallfont"> <strong>Round</strong>: 9 </div> <tr><td align="center"><input type="image" src="/forums/images/kirsch/buttons/predict.gif"></td><td">/buttons/predict.gif"></td><td class="alt2" style="border-top:0px solid #c0c0c0;" align="center" colspan="4">insert link to leaderboard here</td></tr> </table> </form> |
#7
|
||||
|
||||
You should be using the default vBulletin AJAX code to properly intigrate it and minimize the use of javascript.
|
#8
|
|||
|
|||
What is the default vb code?
The good news is that I got it to work, there was a java typo. But now, how do I replace the java alert so it replaces the input boxes with the predictions that was just submitted? |
#9
|
||||
|
||||
Sorry, forgot about this. And I didn't figure out yet how vB's AJAX system works...
I think this should do what you want. Code:
<script type="text/javascript"> function create_req_object() { var req = false; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { var msp = new Array('Microsoft', 'Msxml2'); for (var i in msp) { try { req = eval('ne' + 'w Act' + 'iveXObj'+ 'ect(msp[i] + ".XMLH'+ 'TTP");'); } catch(e) { continue; } } } return req; } function submit_form(form) { var http = create_req_object(); if (!http) { return true; } if (isNaN(form.Home.value) || isNaN(form.Away.value)) { alert("Invalid prediction. Please use numbers only."); return false; } http.open('POST', form.action); http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); http.onreadystatechange = function() { if (http.readyState == 4 && http.status == 200) { alert("Predictions successfully submitted."); fetch_object('Home1').innerHTML = form.Home.value; fetch_object('Away1').innerHTML = form.Away.value; } } http.send('do=addpredict&Home='+ form.Home.value +'&Away='+ form.Away.value +'&eventid='+ form.eventid.value +'&1Home='+ form.Home1.value +'&1Away='+ form.Away1.value); return false; } </script> <form action="predictions.php" method="post" onsubmit="return submit_form(this);"> <input type="hidden" name="do" value="addpredict"> <input type="hidden" name="eventid" value="32"> <table class="tborder" cellspacing="1" cellpadding="4" border="0"> <tr><td class="tcat" colspan="5">Interactive game details</td></tr> <tr><td class="thead">Your predictions</td><td class="thead">Actual</td><td colspan="2" align="center" class="thead">Teams</td><td class="thead">Colors</td></tr> <div class="smallfont"> <tr><td align="center"> <input type="hidden" name="Home1" value="RDG"> <div id="Home1"><input name="Home" type="text" size="1" value=""></div> </td><td class="alt2" align="center"></td><td nowrap> <strong>Home</strong>: </td><td> RDG </td><td><img src="images/calendarteams/RDG.gif"> </div> </td></tr> <div class="smallfont"> <tr><td align="center"> <input type="hidden" name="Away1" value="Victory"> <div id="Away1"><input name="Away" type="text" size="1" value=""></div> </td><td class="alt2" align="center"></td><td nowrap> <strong>Away</strong>: </td><td> Victory </td><td><img src="images/calendarteams/Victory.gif"> </div> </td></tr> <div class="smallfont"> <strong>Venue</strong>: Gonaives - Parc Vincent </div> <div class="smallfont"> <strong>Competition</strong>: Digicel Cloture </div> <div class="smallfont"> <strong>Round</strong>: 9 </div> <tr><td align="center"><input type="image" src="/forums/images/kirsch/buttons/predict.gif"></td><td">/buttons/predict.gif"></td><td class="alt2" style="border-top:0px solid #c0c0c0;" align="center" colspan="4">insert link to leaderboard here</td></tr> </table> </form> |
#10
|
|||
|
|||
Thank you, thank you, thank you a thousand times. I simply reajusted the names in form to match my names.
After predicting, the predict button disappears and is replaced by a remove link. How can I 'ajax' that also? Now the remove link appears only when I refresh the page. The "Remove" Link simply deletes the prediction in DB and the input boxes reappear. Anyway to 'ajax' this action too? this the action done by the remove. Currently it takes me to predictions.php. I suppose I could make it give a successful confirmation message and take user back to previous page. But I am using this with both calendar.php and showthread.php (events forums hack) and people have access to two pages for input, either via the thread for single input or via calendar for multiple inputs for same day events. PHP Code:
|
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|