Question

I have a website where I want the following page to function – it currently works fine on a full page refresh (since each div is populated from a database) – but I’m starting to build in AJAX to update the database behind the page without the browser leaving the page. The following image shows what I want to achieve. Refreshing the whole page can be a bit slow due to the header information and item information might have a lot of images etc.

I can get it working OK by having my form submit button write out the results in each div area, however when a user returns to the page I want it to show the latest version of the page. Is there a way to change what my submit button on the form does (i.e. when pressed – refresh the “guess” and “guess_info” div areas of the webpage?

My AJAX/Jquery for the form is:

<script type="text/javascript">
$(document).ready(function(){
    $("#myform").validate({
        debug: false,
        rules: {
            guess: {
                min: 0,
                number: true
            }
        },
        messages: {
            guess: "Please enter a valid guess.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});
</script>

process.php just takes the form inputs (e.g. item_id, user_id, guess), and updates the database for new information.

I’m also having difficulties with the CSS side of things, my header and footer are generated by wordpress, however all the dividers detailed below are my own, (which i put inside the “content” divider.

I have managed to split the “content” into 3 columns, but I’m struggling to split my middle column into the divisions shown..

So my “content” divider is 900px, so I have the “middle” as 500px and each column as 200px.

So now I’m looking to divide up my 500px column into 3 rows (which can be as long as needed), first row one column 500px, second row 2 columns, say 150px (the thumbnail is 100px wide) and 350px, the final row would be split, say 100px, 100px, 300px. Can anyone advise me on this? I’ve tried following a lot of CSS tutorials, but I seem to struggle getting them to sit on top of each other!! 🙁

Answer 1

Regarding the submit button there are some ways of disabling the default of it.

The first one is

<form action="whatever" method="whatever" onsubmit="return myJSFunction();return false;">

Or, for keeping your code cleaner you can do:

<form action="whatever" method="whatever" onsubmit="return myJSFunction();">

For the last one you will need to add in your myJSFunction the following code at the start of it:

if(!event) var event = window.event //to prevent browser problems
event.preventDefault();

Remember that if everything works in your js function you need to return false. If you return true it might trigger the default call of your submit button.
Once you did this you should call your AJAX request and write/override your html in js.

Regarding the css I don’t see why it doesn’t work so I will give you a default solution (the following divs should be placed in your “middle” container):

<div id="item_info" style="width:500px; height:50px;background-color:green"></div>
<div id="description" style="float:right;width:350px;height:100px;background-color:blue"></div>
<div id="thumbnail" style="width:150px;height:100px;background-color:red"></div>
<div id="guess_info" style="float:right;width:300px;height:100px;background-color:black"></div>
<div id="item2" style="float:left;width:100px;height:100px;background-color:yellow"></div>
<div id="guess" style="float:left;width:100px;height:100px;background-color:pink"></div>

I tested this in my editor and it seems to work. Don’t bother the colors I used them to get some visibility.
Sorry for the CSS being inlined but just copy the style attribute and put in in your .css page.

If you want each of your rows (the ones that are splitted) to have the same height as their neighbourgs you’ll need to change the css a little bit and use some different tricks (but you will have to chose which one could have the biggest height).

Hope this helped.