Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › Add a value in Datalist using Jquery

Tagged: , , , , ,

  • Salesforce® Discussions

    Add a value in Datalist using Jquery

    Posted by Satyakam on March 29, 2016 at 3:09 PM

    In a scenario there is a Datalist and there are some Datalist values in that Datalist. When you will click on any Datalist value that value will be invisible from that Datalist and should be shown on vf page with a checkbox and when you will check that checkbox that value will be invisible from page and again should be shown in datalist. I want to solve this problem using JQuery. I have gone through following code but not getting complete solution. Can i get any solution..?

    function checkboxClick(obj){
    var id = $(obj).attr("id");
    if($('#' + id).is(":checked")){
    $(obj).closest("tr").remove();
    }
    }
    $(document).ready(function(){
    var a;
    var idCounter=1;
    $(document).on('click', '#ddlList', function () {
    a = $('#ddlList option:selected').text();
    $('#ddlList option:selected').remove();
    if(a != ''){
    var b = $('#demo').append('

    <tr>

    <td><input type="checkbox" onclick="checkboxClick(this)" id="ck_'+idCounter+'"/></td>

    <td class="newLine">'+a+'</td>

    </tr>

    ');
    idCounter++;
    }
    });
    });

    ----------------------

    <select id="ddlList">
    <option value="0">None</option>
    <option value="1">ASP.NET</option>
    <option value="2">C#</option>
    <option value="3">VB.NET</option>
    <option value="4">HTML</option>
    <option value="5">jQuery</option>
    </select>
    <table id="demo">
    <tbody>
    <tr>
    <td></td>
    </tr>
    </tbody>
    </table>

    • This discussion was modified 10 years ago by  Satyakam.
    • This discussion was modified 10 years ago by  Satyakam.
    • This discussion was modified 10 years ago by  Satyakam.
    • This discussion was modified 9 years, 11 months ago by  Forcetalks.
    • This discussion was modified 9 years, 11 months ago by  Forcetalks.
    • This discussion was modified 9 years, 11 months ago by  Forcetalks.
    • This discussion was modified 9 years, 11 months ago by  Forcetalks.
    • This discussion was modified 9 years, 11 months ago by  Forcetalks.
    • This discussion was modified 9 years, 11 months ago by  Forcetalks.
    • This discussion was modified 9 years, 11 months ago by  Forcetalks.
    • This discussion was modified 9 years, 11 months ago by  Forcetalks.
    • This discussion was modified 8 years, 4 months ago by  Forcetalks.
    Naman replied 10 years ago 2 Members · 1 Reply
  • 1 Reply

  • Naman

    Member
    March 30, 2016 at 7:35 AM

    Hi Satyakam.

    You can use typeahead library of jquery in you VF page that can help you achieve the same functionality. Whenever user would select any value from data list, you can get that using typeahead:selected and remove that value from your datalist by writing custom remove function. As needed, you can use the selected value to display it on another div with checkbox and when user checks the checkbox, you can again add the value into the original datalist by using javascript push() function.

    $('#the-basics .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
    },
    {
    name: 'states',
    source: substringMatcher(states)
    }).bind("typeahead:selected", function(obj, datum) {
    alert('datum '+datum);
    states.remove(datum);
    //document.getElementById("inputTextTypeahead").value = '';

    states2.push(datum);
    alert('states2 '+states2);
    document.getElementById("demo").innerHTML = states2;

    });

    Note: datum is the selected value that user selects from the datalist. States is the data list.

    Following is the remove function that will remove the selected value from the original data list.

    Array.prototype.remove = function() {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
    what = a[--L];
    while ((ax = this.indexOf(what)) !== -1) {
    this.splice(ax, 1);
    }
    }
    return this;
    };

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos