Member Avatar for Srilina

function addRow(id)

        {   

    var row = $("#rows").val(); 

    var rows=parseInt(row)+1;

        var sendString = "rows="+rows;

        $("#rows").val(rows);   
        $.ajax({
            type: "POST",
            url: "addrow.htm",
            data: sendString,
            success: function(msg){

                    $("#tr_"+row).after(msg);  
                    loadDatePicker();
            }
        });     
}


function deleteRow(id)
{   

    /* var space_number_arr = id.split("_"); */
    var number = id;
    var deletedRows=$("#deletedRows").val();
    deletedRows=deletedRows+number+",";

    document.getElementById("tr_"+number).style.display='none';

    $("#deletedRows").val(deletedRows);
  • 2 Contributors
  • 4 Replies
  • 137 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

This code pair is doing two simple things: adding a new row by asking the server for an HTML fragment, and marking an existing row as deleted client-side. found the functions and already walked through the lines — the important behaviors to confirm are (1) a counter stored in the #rows input is incremented and sent to addrow.htm, and the server response is inserted into the DOM; and (2) deleteRow hides tr_<number> and appends that number (with a trailing comma) to a hidden deletedRows field for server-side processing.

Key pitfalls and things to check

  • The id parameter to addRow is not used — either remove it or use it to choose where the new row is inserted. The commented split("_") in deleteRow suggests callers sometimes pass an id like tr_3; confirm whether deleteRow expects a plain number or a prefixed id.
  • Always validate the numeric counter: use parseInt(value, 10) or Number(value) and guard against NaN so you don't get off-by-one bugs. See the MDN docs for parseInt for the radix note.
  • Verify the server actually returns the HTML snippet you expect (IDs/classes must match the selector used for after()), and that loadDatePicker() exists and re-initializes any dynamic inputs.

Recommended improvements

  • Keep deleted IDs in a JavaScript array and serialize once on submit (no trailing comma hacks). Using JSON.stringify is robust and easier to parse server-side.
  • Prefer returning structured data (JSON) from the server and rendering the new row client-side with a template, rather than injecting HTML returned from the server — this reduces XSS risk.
  • Use event delegation for handlers on dynamic rows, and consider removing DOM nodes (.remove()) if you do not need to preserve them.

Quick debug checklist

  • Open DevTools Network tab and confirm the POST body and response from addrow.htm.
  • console.log the rows/row values before the request to see the actual numbers.
  • Add an error handler to your AJAX call to catch server errors (see jQuery.ajax docs).

These checks will show whether the bug is a selector/ID mismatch, an off-by-one counter, a missing server response, or a payload-format issue.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

What is your question? If you need help, you need to provide more information and clarity in what the issue is and what you are trying to do.

Member Avatar for Srilina

Hi Jorge,
I got hold of these two functions while doing my project. I dont kno this language well, so I need help to crack this. Will u help me to understand this ?

Member Avatar for JorgeM

Ok, so lets see if we can disect this a bit...

function addRow(id){   
    var row = $("#rows").val(); 
    var rows=parseInt(row)+1;
        var sendString = "rows="+rows;
        $("#rows").val(rows);   
        $.ajax({
            type: "POST",
            url: "addrow.htm",
            data: sendString,
            success: function(msg){
                    $("#tr_"+row).after(msg);  
                    loadDatePicker();
            }
        });     
}

function deleteRow(id)
{   
    /* var space_number_arr = id.split("_"); */
    var number = id;
    var deletedRows=$("#deletedRows").val();
    deletedRows=deletedRows+number+",";
    document.getElementById("tr_"+number).style.display='none';
    $("#deletedRows").val(deletedRows);
}
Member Avatar for JorgeM

lines 1-15 is the function for addRow(id). This function accepts one parameter, I assume the ID of the element. However, this parameter doesnt seem to be used in this function anywhere.

line 2, you are assinging the value (should be an element of type input) to the variable called row.

line 3, you are trying to parse an integer value out of the variable row.

line 4, you are creating a variable and assigning a string value to it appending the value stored in the variable called rows.

line 5, you are updating the value of the element with an ID of "rows". The value you are setting is that stored in the variable called rows.

line 6 -14, you are using the jQuery ajax method to send the value stored in "sendString" to the page called addrow.htm. If the process is succesful, you are accepting some data back from that page (I dont know how it would since its an HTML page, but OK) in the form of a variable called "msg". You are using that msg value and leveraging the jQuery method after(), then executing a method called loadDatePicker(), assuming to show a calendar.

lines 17-25 is for another function called deleteRow and it accepts a parameter.

line 19 is commented out so its not used.

line 20 is a variable that accepts the value of the parameter you accepted
in the function.

line 21, you are creating a variable called deletedRows and using jQuery to get the value of the element with an ID of "deletedRows". I assume thats an input element.

line 22, just assigning a value to this variable.

line 23, changing the style of an element that matches that ID (using variable value)

line 24, using jQuery, updating the value of the element with an ID of "deletedRows".

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.