IE11 missing DOM elements - javascript

I've written a simple extension for OpenCart platform. The extension generates a table with product options that can be sorted and searched.
The options are inserted in the database and the table is generated at the backend - using PHP.
It looks something like this.
I've tested the extension with Chrome,FF, IE10 and Edge and it works fine.
Here is the problem: when using IE11 the rows of the table are empty. When I examined the DOM I found out that there is no content between the "TR" tags. The rows are generated, but the Table Data is gone.
Given that the content is generated at the backend why does it disappear in IE11?
Live url: http://www.stroyland.ru/index.php?route=product/product&path=57&product_id=198
DOM with Chrome
DOM with IE11

The problem is caused by the pager plugin of the tablesorter plugin.
There is already an open issue on github for this bug:
https://github.com/christianbach/tablesorter/issues/54

Related

jqGrid doe not render correctly in chrome

Its basically same problem as here jqGrid does not render correctly in Chrome/Chrome Frame , bu the same solution does not work for me. I have Chrome 56.0.2924.87 and JqGrid version 4.7.1.
THe $.browser .... lines do not exsist in the jqGrid code anymore. How can I fix this problem now. (And no i can not update my jqGrid version).
This is what it looks like. I blanked out the text on the table. And in firefox this problem does not exsist.
Image with some data rows. As seen filter row is still broken.

Why is there no mark-up yet data is visible (using JSON)

We are using DataTables which is a plug-in for the jQuery Javascript library... > https://datatables.net/
"...it is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table..."
To populate the tables we are pulling data from a JSON file.
Here's my question and hopefully you guys can offer a possible solution....why is it that the data when called is NOT visible in the Source Code? It just isn't there yet the data and the tables are populated? The problem with this is that when the table has been populated with several rows it hides behind my footer - which I am sure is a result of the data not being parsed like 'normal'
Any idea how I can force the data produced by this Jquery plugin to be written and parsed normally?
Thanks for all pointers and things to look for since I am basically totally new to this...
The source code only displays the original HTML received from the server. Any subsequent changes in the DOM won't show. In order to see the current state of the DOM, use the web inspector of your browser, be it Google Chrome, Firefox, Internet Explorer, Safari, Opera, ...

(Foundation CSS) Dropdowns are not working

So dropdowns aren't working when using foundation (not even the code copy-pasted from the foundation docs).
This Html is generated using Play! Framework, and I am viewing it using chrome. This code is running on Localhost, not a foreign server. (Maybe chrome is blocking js on localhost or something?)
The following is the code I'm using. Any help would be appreciated.
JSFiddle: http://jsfiddle.net/U7CZq/
code
There are a couple things that I see here that could be causing problems.
The first major issue is you are not including foundation.topbar.js file, which is needed to implement the dropdowns.
The other issue is you should call $(document).foundation() at the bottom of the page to allow foundations javascript components to manipulate the DOM of the topbar to add the proper elements and classes need for the topbar dropdowns.

Page disappears on load

I have a web application that includes an ExtJS 4.1 grid.
I create the grid(and it is rendered right), but when I load the store, the whole page disappears. I have added a load listener on the store and it seems that the results are received successfully.
This problem occurs only in IE8 - Chrome and FireFox display everything right.
How should I fix this?
I have managed to solve this problem.
The problem was that I was also using PIE(http://css3pie.com/) and had customized the strong tag so that it had a shadow and rounded corners. One of the grid's fields had a few strong tags. It seems that the existence of more than one such tag in one cell makes IE8 crash(or something similar), hence the aforementioned problem.

Problem displaying dynamically generated records with client-side paging using jQuery Templates plugin & Pagination plugin

For a custom requirement to display dynamically generated records with client-side paging, I'm using Microsoft's jQuery Templates plugin alongwith G Birke's jQuery Pagination plugin. I could have managed with just the Pagination plugin but now definitely need the Template plugin to conserve on server side processing involved in generating records with formatting.
I've shared my code sample on JSBin (see source). This sample is an adaption of Stephen Walther's Templates plugin example & a Pagination plugin example by StackOverflow member brianpeiris
$("#flickr").live("click", function() {
var url = "http://api.flickr.com/services/feeds/groups_pool.gne?id=44124373027#N01&lang=en-us&format=json&jsoncallback=?";
// Grab some flickr images of cats
$.getJSON(url, function (data) {
// Format the data using the catTemplate template
$("#catTemplate").tmpl(data.items).appendTo("#hiddenresult");
});
alert("Total flickr records fetched =" + $('#hiddenresult div.result').length);
initPagination();
});
The problems are:
The records show up with paging in Firefox & IE8 only if the alert in the code above is present. The alert probably introduces a delay. How to fix the code so that it works without that alert?
Even if the alert is present, the sample doesn't work in Chrome, Safari & Opera. How to make the solution cross-browser?
I'll appreciate if anyone can help me fix these issues
I thoink you need to move your initPagination() function call into the callback function of the getjson function right underneath where you append the template to the dom.

Categories