1

Im Trying to connect pageblocktable and plain HTML table in visualforce page but I'm not able to do.

When Im Dragging element from table 1 to table 3. element is not being appended to table 3. Can anyone please correct me where I'm doing wrong?

    <apex:page controller="TheController">
<apex:stylesheet value="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"/>
<apex:includeScript value="//code.jquery.com/jquery-1.10.2.js"/>
<apex:includeScript value="//code.jquery.com/ui/1.11.2/jquery-ui.js"/>

<script>
    $(document).ready(function() {
        $(document.getElementById("{!$Component.theForm.thePageBlock.theTable1}")).find("tbody").addClass('connectedSortable');
        $("#table3").find("tbody").addClass('.connectedSortable');
        $("#table3").find("tbody").sortable({});

        $(document.getElementById("{!$Component.theForm.thePageBlock.theTable1}")).find("tbody")
            .sortable({
                connectWith: ".connectedSortable",
                items: "> tr",
                appendTo: "parent",
                helper: "clone",
                cursor: "move",
                zIndex: 999990,
                   receive: function(event,ui){
                    var targetList = ui.item.html();
                    html = $.parseHTML(targetList);
                    var ss='';
                    $.each( html, function(i,el){
                        ss=$(this).text();
                        return false;
                    });
                    alert('before method call'+(this.id));
                    TheController.updateStatus(ss,this.id,function(result,event){                            
                        alert('event.status'+event.status);
                        if(event.status){
                            location.reload(true);

                        }
                    },{escape: false});
                }
            });

            <apex:form id="theForm">
                <apex:pageBlock id="thePageBlock">
                    <apex:pageBlockTable title="Accounts having Warm Rating" value="{!warmAccounts}" var="account" id="theTable1" styleClass="mytable">

                       <ul> <li>&nbsp;</li>
                       </ul>
                        <apex:column value="{!account.Id}"/>
                        <!--<apex:column value="{!account.Name}"/>
                        <apex:column value="{!account.AccountNumber}"/>
                        <apex:column value="{!account.rating}"/>
                        <apex:column value="{!account.Phone}"/>
                        <apex:column value="{!account.Fax}"/>-->
                </apex:pageBlockTable><br/><br/>
          </apex:pageBlock>
    </apex:form>

<div>
<table id="table3" border="3">
    <tbody>
        <tr>
            <td>{!con.Id}</td>                
        </tr>
        <tr>
            <td>{!con.name}</td>                
        </tr>
    </tbody>
</table>
</div>

0

As i have checked the code, You didn't put the </apex:pageBlock> after the </apex:pageBlockTable>

Try with below code:

<apex:page controller="TheController">
    <apex:stylesheet value="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <apex:includeScript value="//code.jquery.com/jquery-1.10.2.js" />
    <apex:includeScript value="//code.jquery.com/ui/1.11.2/jquery-ui.js" />

    <script>
    $(document).ready(function() {
        $(document.getElementById("{!$Component.theForm.thePageBlock.theTable1}")).find("tbody").addClass('connectedSortable');
        $("#table3").find("tbody").addClass('.connectedSortable');
        $("#table3").find("tbody").sortable({});
        $(document.getElementById("{!$Component.theForm.thePageBlock.theTable1}")).find("tbody")
        .sortable({
            connectWith: ".connectedSortable",
            items: "> tr",
            appendTo: "parent",
            helper: "clone",
            cursor: "move",
            zIndex: 999990,
            receive: function(event, ui) {
                var targetList = ui.item.html();
                html = $.parseHTML(targetList);
                var ss = '';
                $.each(html, function(i, el) {
                    ss = $(this).text();
                    return false;
                });
                alert('before method call' + (this.id));
                TheController.updateStatus(ss, this.id, function(result, event) {
                    alert('event.status' + event.status);
                    if (event.status) {
                        location.reload(true);
                    }
                }, {
                    escape: false
                });
            }
        }); 
        </script>
    <apex:form id = "theForm">
        <apex:pageBlock id = "thePageBlock">
            <apex:pageBlockTable title="Accounts having Warm Rating" Value="{!warmAccounts}" var="account" id="theTable1" styleClass="mytable">
                <ul>
                    <li>&nbsp;</li> 
                </ul>
                <apex:column value="{!account.Id}"/>
                <apex:column value="{!account.Name}"/>
                <!--<apex:column value = "{!account.AccountNumber}"/>
                <apex:column value="{!account.rating}"/>
                <apex:column value="{!account.Phone}"/>
                <apex:column value="{!account.Fax}"/>-->
            </apex:pageBlockTable><br/><br/>
        </apex:pageBlock>
    </apex:form>
    <div>
        <table id="table3" border="3">
            <tbody>
                <tr>
                    <td>{!con.Id} </td>
                </tr> 
                <tr>
                    <td>{!con.name}</td>
                </tr>
            </tbody></table></div>
</apex:page>

Hope this helps...

  • Hi subash, I kept end tag in original code. Its not the issue. – SFDC Learner May 27 '16 at 5:21
  • If the Problem with jQuery means, then try to upload the JQUERY and CSS in Static Resource and Try to use the URLFOR in apex:includeScript – Subhash May 27 '16 at 5:26
  • Im able to drag and drop row from below table to above table. But I'm not able to do vice versa. When i"m dragging element from above table to below table, row is not being appended to below table. – SFDC Learner May 27 '16 at 6:01
0

You don't need the period(.) here. Add class takes the class name, not the selector.

 $("#table3").find("tbody").addClass('.connectedSortable');

This is should be this:

$("#table3").find("tbody").addClass('connectedSortable');

Also, you don't need find. You can just do this.

$("#table3 tbody").addClass("connectedSortable");

But don't bother and just add it directly.

<tbody class="connectedSortable">

If you're using jQuery anyhow you can get the pageBlockTable tbody this way.

$("table[id$=theTable1] tbody");

Sortable connect With takes the selector, so this part is correct.

connectWith: ".connectedSortable"
  • Hi Andrew, I have tested with 2 pageblock tables and able to drag and drop in both pagetables. but not able to drag an element from pageblock table to html table. – SFDC Learner May 27 '16 at 7:02
  • Sorry, misread that at first. You may want to try using apex:repeat to create the tables instead of the pageBlockTables. Page block tables add a lot of extra junk where if you use apex repeat, you can define the table exactly how your html is setup. I'm guessing something may be conflicting. I was able to get it to work that way. – Andrew L. May 27 '16 at 8:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.