jQuery Forum

I am using JQuery to create dynamic rows to my table in JSP file. I can able to create and assign value to it. But I need a help at the time of deleting the rows. When I delete the last row, it is not a problem . But if I delete an intermediate row, and try to add new row, the value is not getting. Please help me to find a solution for it.

Regards,

Joby Joseph

Hi All.......................

I need a help

In my application, I want to add some data and for that, I have to create a row dynamically. I can add multiple such type of rows in the applcation.

For this, I am using JQuery and the code used is...

// ajax call to get allowances 

    $("#addAllow").click(function() { 

        var paycomp = $('#Paycomp').val(); 

        alert("=== VAL PAYCOMP ==== "+paycomp);

        if(paycomp == null || paycomp == "zz"){

            alert("SELECT A PAYCOMP ");

            return false;

        }else{

          showAllow();

       }

    });

Here showAllow() is an ajax function get the details from DB to display in the JQuery Dialog box. while pressing Submit,

a new row created and selected data will be displayed on the text box. 

function showAllowDet(){

         alert("===== SHOW ALLOW DET FUNCTION ======= ");         

         if(dynaId == 0){

            $("#empAllowHed").show();

         }         

         var num  = $("#divAllow > div").length;

         dynaId  = new Number(num + 1);

         alert("===== dynaId  after num ======= "+dynaId);         

         $("#divAllow").append("<div id='row" + dynaId + "'><tr><td><input type='text' id='allowDesc"+dynaId+"' name='allowDesc"+dynaId+"' size='30'/> <input type='hidden' id='allowCd"+dynaId+"' name='allowCd"+dynaId+"' /> </td><td><input type='text' id='Amount"+dynaId+"' name='Amount"+dynaId+"' size='8'/>  </td><td><textarea id='allowRemrk"+dynaId+"' name='allowRemrk"+dynaId+"' rows='2' cols='60' ></textarea> </td><td><input type='button' id='remAllow" + dynaId + "' value='Remove' onclick='removeAllowField(\"#row" + dynaId + "\"); return false;' /> </td><td><input type='button' id='optAllow" + dynaId + "' value='Add Optional'  onclick='addOptional(\"#row" + dynaId + "\", \"optional\"); return false;'/> </td></tr></div>");

         //alert("======= HTML ===== "+$("#divAllow").html());

         $("#empAllowDet").show();

         var selctedAllow = $("#Allowcd option:selected").text(); 

         alert("======= SELECTED ALLOWANCE ===== "+selctedAllow);

         var selectlAllowCd = $("#Allowcd option:selected").val();         

         $("#allowDesc"+dynaId).val(selctedAllow);

         $("#allowCd"+dynaId).val(selectlAllowCd);

         $("#empAllowDilog").dialog( "close");

    }

Here I ama dding tow buttons on the row . One is for removing the selected row and the next one is for 

creating the same row with another logic.

I want to call ajax function to display the details while clicking on the dynamically created button. 

I tried to place my function here and there, inside document.ready and outside also. I am not able to create a new row.

Can you please suggest any way to do it please

Regards,

Joby Joseph

Hi,

I have an issue with my autocomplete UI.

In my application, I have two text boxes and I want to select values using autocomplete. I want to display the autocomplete details based on the data selected on the previous value. and in that field also, I am using autocomplete.

In the first case, I am selecting all the possible groups from DB as JSON object and set it to request and get it from request on my JSP file. 

There I am doing the following operations....

var availableGrps = $("#mainGrpList").val();

      

      availableGrps = availableGrps.replace(/\047/gi, "\"");

      availableGrps = availableGrps.replace(/\\/gi,"");

      availableGrps = availableGrps.replace(/\'/g,"/\""); 

      var aGrps = JSON.parse(availableGrps);

mainGrpList is a hidden type in my JSP

Why I am doing like this is, I am not getting the full string from hidden variable. So, I converted the double cords to single and set it in the hidden variable and taking it in the JQuery.

Then I am replacing all the single cords to double and convert it to JSON array. 

 $("#grpCodeLbl").autocomplete({

        source: aGrps,

        select: function(event, ui) {

            event.preventDefault();

            var grpCd = ui.item.value;            

            $("#grpCodeLbl").val(ui.item.label);

            $('#GroupCode').val(ui.item.value);

            $("#mainDesigLabel").attr('disabled', false);

            populateMainDesigs();

            //return false;

        },

        change: function(event, ui){

            $('#mainDesigLabel').val("");

            $('#MainDesigCode').val("");

        }

      }); 

This is the method used to display autocomplete details on the first text box. In this, I wrote one custom method to take values from DB and set it as a string using AJAX to avoid DB fetching each time.

populateMainDesigs() is that method.

      var retMainGrps;

      function populateMainDesigs(){        

        $.ajax({

            url: "empReqCreateNewReq.do",

            data : { grpChange: true, GroupCode : $('#GroupCode').val(), ajaxCall : true },         

            dataType : 'json',          

            success: function(json) {

              retMainGrps = json;              

              //retJson = JSON.parse(json)

              alert("===   DATA ==== "+json);

              //rePopulateDesigDropdown(json);

            },

            error : function(xhr, status) {

                alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');

            }

          });

      }

I want the result of this method as the source of the next autocomplete text box.

$("#mainDesigLabel").autocomplete({

        source: retMainGrps

      });

While alerting, i am getting correct values but autocomplete function is not working for this text box.

It says "TypeError: this.source is not a function

Source"

Please help me to find a solution for this problem.

Hi,

I have an issue with my autocomplete UI.

In my application, I have two text boxes and I want to select values using autocomplete. I want to display the autocomplete details based on the data selected on the previous value. and in that field also, I am using autocomplete.

 $("#grpCodeLbl").autocomplete({

        source: aGrps,

        select: function(event, ui) {

            event.preventDefault();

            var grpCd = ui.item.value;            

            $("#grpCodeLbl").val(ui.item.label);

            $('#GroupCode').val(ui.item.value);

            $("#mainDesigLabel").attr('disabled', false);

            populateMainDesigs();

            //return false;

        },

        change: function(event, ui){

            $('#mainDesigLabel').val("");

            $('#MainDesigCode').val("");

        }

      }); 

This is the method used to display autocomplete details on the first text box. In this, I wrote one custom method to take values from DB and set it as a string using AJAX to avoid DB fetching each time.

populateMainDesigs() is that method.

      var retMainGrps;

      function populateMainDesigs(){        

        $.ajax({

            url: "empReqCreateNewReq.do",

            data : { grpChange: true, GroupCode : $('#GroupCode').val(), ajaxCall : true },         

            dataType : 'json',          

            success: function(json) {

              retMainGrps = json;              

              //retJson = JSON.parse(json)

              alert("===   DATA ==== "+json);

              //rePopulateDesigDropdown(json);

            },

            error : function(xhr, status) {

                alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');

            }

          });

      }

I want the result of this method as the source of the next autocomplete text box.

$("#mainDesigLabel").autocomplete({

        source: retMainGrps

      });

While alerting, i am getting correct values but autocomplete function is not working for this text box.

It says "TypeError: this.source is not a function

Source"

Please help me to find a solution for this problem.

I am trying to include autocomplete option in my application and I want to get this while loading the page without any AJAX call. So, I am collecting all the details from DB and set it as a JSON string and passing it to my JSP.

In my JSP file, I am trying to get the values directly from that JSON string. But I am not getting the autocomplete option in my text box. 

code to set it to JSON

       request.setAttribute("mainGrpList", JSONValue.toJSONString(dataList));

==========================================

Code in JSP

 It is inside Javascript code

 var availableGrps = $("#mainGrpList").val();

 $("#grpCodeLbl").autocomplete({

        source: availableGrps

      });

Please help me to find out the reason, why it is not coming in the page.

Regards,

            

Joby Joseph