I really need to achieve this code javascript+ajax+jquey

hello everybody

im trying to achieve like what this website do http://www.learnhowtobecome.org/graphic-designer/ i mean how to make that comparion tool with google charts as well as, growth job that has drop down menu and changes the picture and the charts and data
you can check the source code of the page and you’ll find out the javascript code, i believe its server side with json database

i really hope to have help here please :frowning:

The select boxes are submitted to server-side code, in this case being PHP code, using an AJAX request. The only reason why AJAX is used is so that the same page can remain being shown. As an example, a request is made with the following information:

http://www.learnhowtobecome.org/wp-content/themes/howtobecome/DatatableAjax.php?sEcho=1&iColumns=4&sColumns=%2C%2C%2C&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSearch_0=&bRegex_0=false&bSearchable_0=true&mDataProp_1=1&sSearch_1=&bRegex_1=false&bSearchable_1=true&mDataProp_2=2&sSearch_2=&bRegex_2=false&bSearchable_2=true&mDataProp_3=3&sSearch_3=&bRegex_3=false&bSearchable_3=true&iSortCol_0=0&sSortDir_0=asc&sSearch=&bRegex=false&FormName=OffLineSearch&school-name=&state=CA&Subject=all&SELECT=Bachelor's&data-term=Graphic+Designer&_=1404967685416

If you make the same request to their PHP page (it would be impolite for me to link there from this post) you will see the following information from their PHP page (formatted to see things better):


{
    "sEcho": 1,
    "iTotalRecords": 28,
    "iTotalDisplayRecords": 28,
    "aaData": [
        ["Academy of Art University", "San Francisco, CA", "Bachelor's", "Graphic Design"],
        ["Art Center College of Design", "Pasadena, CA", "Bachelor's", "Graphic Design"],
        ["Brooks Institute", "Santa Barbara, CA", "Bachelor's", "Graphic Design"],
        ["California College of the Arts", "Oakland, CA", "Bachelor's", "Graphic Design"],
        ["California College-San Diego", "San Diego, CA", "Bachelor's", "Graphic Design"],
        ["California State Polytechnic University-Pomona", "Pomona, CA", "Bachelor's", "Graphic Design"],
        ["California State University-Fresno", "Fresno, CA", "Bachelor's", "Graphic Design"],
        ["California State University-Sacramento", "Sacramento, CA", "Bachelor's", "Graphic Design"],
        ["Chapman University", "Orange, CA", "Bachelor's", "Graphic Design"],
        ["Dominican University of California", "San Rafael, CA", "Bachelor's", "Graphic Design"]
    ]
}

When the above JSON data is received by the page, some JavaScript uses the above JSON data to update the table.

thank you, yes you’re right, this code concerns the datatables part of schools, do you have any idea of how they made that comparision tool at the bottom and the job growth too ?

Yes, it is in the same way. Submit form to server-side PHP, get JSON data, show JSON data on screen.

if i try to have same source code and i make a datatableAjax.php and put inside in that javascript would it work?

{
“sEcho”: 1,
“iTotalRecords”: 28,
“iTotalDisplayRecords”: 28,
“aaData”: [
[“Academy of Art University”, “San Francisco, CA”, “Bachelor’s”, “Graphic Design”],
[“Art Center College of Design”, “Pasadena, CA”, “Bachelor’s”, “Graphic Design”],
[“Brooks Institute”, “Santa Barbara, CA”, “Bachelor’s”, “Graphic Design”],
[“California College of the Arts”, “Oakland, CA”, “Bachelor’s”, “Graphic Design”],
[“California College-San Diego”, “San Diego, CA”, “Bachelor’s”, “Graphic Design”],
[“California State Polytechnic University-Pomona”, “Pomona, CA”, “Bachelor’s”, “Graphic Design”],
[“California State University-Fresno”, “Fresno, CA”, “Bachelor’s”, “Graphic Design”],
[“California State University-Sacramento”, “Sacramento, CA”, “Bachelor’s”, “Graphic Design”],
[“Chapman University”, “Orange, CA”, “Bachelor’s”, “Graphic Design”],
[“Dominican University of California”, “San Rafael, CA”, “Bachelor’s”, “Graphic Design”]
]
}