Display temporary data client-side within table

Question

Please refer to this image, so I can explain the issue better. I have Master/Detail form (Bill of Materials in this case), which stores data in 2 database tables.

The top of the form (Product,Quantity) is stored in the Master table, and with the inserted id(as FK), the Details table is populated with as many components and quantity entered below.

But, until the final SAVE(submit) is pressed, I'm storing the component ID (value from the dropdown) and the quantity (from the input field) into JavaScript object within array:

var products = [];
        $("#add").click(function(){

            var prodname_fk = $("select").val();
            var prodname = $("select option:selected").text();
            var quantity = $("#quantity").val();

                //Checks if the product or quantity has not been selected
                if (quantity == '' || prodname_fk == '')
                {
                    alert("Please select product and quantity!");
                    return false;
                }
            //Pushes the Objects(products [id,quantity,prodname,uom]) into the Array    
            products.push({id:prodname_fk,prodname:prodname,quantity:quantity});

                //Test Purpose CONSOLE output
                var i = 0;
                $.each(products, function(){
                        console.log(products[i].id + " --> " + products[i].prodname + " --> " + products[i].quantity);
                        i++;

                });

            //Emptys the product and quantity
            $("select").val("");
            $("#quantity").val(""); 
        });

I also get the product name (text from the dropbox) for displaying purposes in the table below.

So, my question is:

How can I output the Component and Quantity in the table where it says "No Records!", after each ADD is pressed? (ADD does not submit or refresh the page)
How can I add "delete" function in the same table for each object from the array?
How can I check if a component exists already in the array, and just add up the quantity?

This is my form: enter image description here

Thank you very much in advance!

p.s. I'm trying to achieve something like this: How to store temporary data at the client-side and then send it to the server

Thats ok so you could give the url of the PHP file that will process the data and insert to the dataabase table and then you could return the table to display from the PHP page... — Sangeet Menon, Apr 14 '11 at 05:48

Sangeet Menon · Answer 1 · 2011-04-14T05:47:10.153

Since you tagged it with Ajax here is how you make a ajax call and return the processed data

You need to make an XML Http request to the Servlet for that you need to make a XML Http object in the javascript in your HTML page

var myxmlhttpobj=new GetXmlHttpObject();
function GetXmlHttpObject()
    {
        if (window.XMLHttpRequest)
        {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            return new XMLHttpRequest();
        }
        if (window.ActiveXObject)
        {
            // code for IE6, IE5
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
        return null;
    }

Now you need to make a request to the Server from the javascript

var url="urlofPHPpage";
var para="parmeter1=prodname_fk&parameter2=prodname&parameter3=quantity;
myxmlhttpobj.open("POST",url,true);
myxmlhttpobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myxmlhttpobj.setRequestHeader("Content-length", para.length);
myxmlhttpobj.setRequestHeader("Connection", "close");
myxmlhttpobj.onreadystatechange=ajaxComplete;
myxmlhttpobj.send(para);

At the server you need to process the result and sent it back as string:

Process the input and prepare the table of contents added and sent it back

Write the out put in form of string

When the request comes back the myxmlhttpobj.onreadystatechange=ajaxComplete; will be called

function ajaxComplete(){


    if(myxmlhttpobj.readyState==4){

      ///Display the result on the HTML Page 

    }
}

That should help...

Also have a look at jQuery Ajax API.

score 1 · Answer 2 · answered Apr 13 '11 at 17:53

one possible way is to put your temp data in hidden fields beside the normal visible fields, like that you can get these hidden fields values easily using javascript and send to the server, and also because hidden fields are input tags, if you submit a form you can get the values from the server side as any other input tag.

Muhammad Adeel Zahid · Answer 3 · 2011-04-13T19:53:40.887

1

assuming you want to display this in html table with thead and tbody components you can write something like this inside click event of your add method

$('<tr>').append($('<td>').text(prodname))
             .append($('<td>').text(quantity))
             .append($('<td>').append($('<button>').text('Delete').addClass('Delete').attr('id', CurrentIDHere)))
             .appendTo('tbody');

you can place this code inside click event of add button after your validation logic. you can add a click handler for delete class where you get id of the detail section and delete corresponding entry from your array. code is untested though

edited Apr 13 '11 at 19:53

answered Apr 13 '11 at 18:12

Muhammad Adeel Zahid

17,474
14
90
155

`.append()` returns the original jQuery object, not a reference to the newly created object. http://jsfiddle.net/gilly3/FYdCC/. You'll need to refactor a little to make that work. – gilly3 Apr 13 '11 at 18:17
yeah i m just testing it. will update the answer after a while – Muhammad Adeel Zahid Apr 13 '11 at 18:21
try like this: `.append($('').text(prodname))` – gilly3 Apr 13 '11 at 18:23

score 1 · Accepted Answer · answered Apr 13 '11 at 18:14

To add the values to your table, look at $.append() and $.appendTo(). Create your new row via $("<tr />") and append it to your table with $.appendTo():

var newRow = $("<tr />").appendTo("#myTable");

You now have a reference to the new row, so you can now append the cells:

var newRow = $("<tr productId=\"" + prodname_fk  + "\" />")
    .appendTo("#myTable")
    .append("<td class=\"code\" />")
    .append("<td class=\"component\">" + prodname + "</td>")
    .append("<td class=\"quantity\">" + quantity + "</td>")
    .append("<td class=\"uom\" />")
    .append("<td><span class="deleteButton">delete</span></td>");

Delete the row like this:

$("#myTable .deleteButton").click(function(e) {
    $(this).closest("tr").remove();
});

To handle storing the data I'd use an object rather than an array:

var products = {};
$("#add").click(function() {

    ...

    if (prodname_fk in products) {
        products[prodname_fk].quantity += quantity;
        $("#myTable tr[productId='" + prodname_fk + "'] .quantity").text(products[prodname_fk].quantity)
    }
    else {
        products[prodname_fk] = { prodname:prodname, quantity:quantity };
        var newRow = $("<tr productId=\"" + prodname_fk  + "\" />")
            ... // append to table and append cells
        $(".delete", newRow).click(function(e) {
            delete products[$(this).closest("tr").attr("productId")];
            $(this).closest("tr").remove();
        });
    }

    ...

});

Untested, so please forgive typos. The concepts are correct.

Display temporary data client-side within table

4 Answers4