javascript open modal window from form

Question

So, I'm very new with Javascript and Jquery and got this terrible old webshop in my lap. It's basic structure is a form and two buttons, each button update's the "action" attribute and then submit the form, like this..

<form id="orderform" name="order" action="javascript:inspect()" method="post">
    ...
    <input type="button" id="btnOrder" value="Order" name="btnOrder">
    <input type="submit" id="btnInspect" value="Inspect" name="submitButtonInspect">
    ...
</form>

With some feeble jquery I set each buttons "click" to call for functions that do some pre-work and then submit the form. My problem is how to get the "Inspect" button to show the returning html in a dialog instead of a window?

function inspect() {
    $("#orderform").attr("target", "_blank");
    $("#orderform").attr("action", "/order/inspectorder.p");
    $("#orderform").submit();
};

Some rapid googling gave me this hint, but I can't manage how to get that puzzle to work. I need to submit the form to the inspectorder.p server-code, who will return correct html, but how to get that one into a modal dialog??

$("#dialog").load('myfunction.p', function() {
$(this).dialog({
    modal: true,
    autoOpen: true, 
    closeOnEscape: true,
    height: 200
});

Any advice is much welcome, I suck on web and javascript :( Regards!

Answer 1

Since you are using jquery already, you can use ajax method for form submission eg

   $.ajax ({
    type: 'POST' ,
    url : '/order/inspectorder.p' , 
    data : $("#orderform").serialize() ,
    success : function (data){
        alert (data) ; // this is the returned data
     }, 
    error : function (jqXhr, status, errorthrown){
        alert(errorthrown); // if an error ocurs 
     }
   })

you can process the returned result in success. If your are using jquery 1.8+ then the callbacks are different but it still works. try this out.