We help IT Professionals succeed at work.

Jquery append method issue on the IE browser

469 Views
Last Modified: 2019-03-07
var nestedtablesettings = {
    "iDisplayLength": 20,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": false,
    "drawCallback" : function() {
        var appendDownloadLink = $("table table td .dataTables_filter");
        appendDownloadLink.each(function(i, e) {
            var label = $('label', e);
            $(e).html('<a class="export-circuits" href >Export circuits</a>').append(label);

            $(".export-circuits").on("click", function(e){
                circuit = $(this).closest('tr').prev('tr').children('td').eq(1).text();
                hpath = "exportCircuits?organisationID="+getbusinessID+"&interfaceName="+circuit;
                $(this).attr("href", hpath);
            });
        });
    }
};

Open in new window


I am trying to add an export link on the nested datatable.  When I try to see my result on Chrome and Firefox, it is working perfectly.

The result on chrome and Firefox
<div id="nested-datatable-covertab_0_row_0_tab_0_row_0_tab_0_filter" class="dataTables_filter"><a class="export-circuits" href="">Export circuits</a><label>Search:<input type="search" class="" placeholder="" aria-controls="nested-datatable-covertab_0_row_0_tab_0_row_0_tab_0"></label></div>

Open in new window


On the IE, it removed the data from label elements.
<div id="nested-datatable-covertab_0_row_0_tab_0_row_0_tab_0_filter" class="dataTables_filter"><a class="export-circuits" href="">Export circuits</a>
<label></label>
</div>

Open in new window


From my research, IE has got some issue with jquery append method.

Any helps would be highly appreciated.
Comment
Watch Question

Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Thanks a lot Leakim. Excellent!.

Author

Commented:
Hi LeaKim,

That show the search box on the IE, but it removes the functionality of the search.  
With this implementation search does not work on any browsers now.

Do you have any ideas ?
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
what about :
var nestedtablesettings = {
    "iDisplayLength": 20,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": false,
    "drawCallback" : function() {
        $("table table td .dataTables_filter").prepend('<a class="export-circuits" href >Export circuits</a>');
        $(".export-circuits").on("click", function(e){
            circuit = $(this).closest('tr').prev('tr').children('td').eq(1).text();
            hpath = "exportCircuits?organisationID="+getbusinessID+"&interfaceName="+circuit;
            $(this).attr("href", hpath);
        });
    }
};

Open in new window

Author

Commented:
Thanks for your help again. This solution is creating my previous issue again. When you append element like this, if you you click any links on the last level table, it duplicated the links because of datatable plugins.

<div id="nested-datatable-covertab_0_row_0_tab_0_row_0_tab_0_filter" class="dataTables_filter"><a class="export-circuits" href="">Export circuits</a><a class="export-circuits" href="">Export circuits</a><a class="export-circuits" href="">Export circuits</a><a class="export-circuits" href="">Export circuits</a><label>Search:<input type="search" class="" placeholder="" aria-controls="nested-datatable-covertab_0_row_0_tab_0_row_0_tab_0"></label></div>

Open in new window


That's why we tried like the following;

var label = $('label', e);
$(e).html('<a class="export-circuits" href >Export circuits</a>').append(label);

Open in new window


But, this solution removes the search box from the label.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
it duplicated the links because of datatable plugins.

do you have a link or can reproduce that on jsfiddle ? I do'nt get it

Author

Commented:
jsfiddle

Thanks a lot for your help.

Please see the link on the jsfiddle. When you click on the inner table header, it duplicates the links.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.