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

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, ...

Related

VueJs doesn't show component`s source code

I started working with the vueJS2 relatively recently, now I'm studying the components and I had a question for the experts.
As far as I know, the VueJS processes the HTML using JavaScript, and it is because of this that the rest of the HTML code is not visible.
Please correct me if I'm wrong.
view in Chrome browser
view in IDE
view in Chrome Source Code
You can see there is no <button> tag in Chrome source code
How can I make it so that when I use the components, I want to display the HTML completely FULL, as an example here:
source code of my jQuery DataTable
Another question related to the topic. Does it matter that the components reduce the whole HTML to 'one line ' for a search in the browsers?
You can't see the HTML within the source code because the compilation takes place after the source code has already been generated.
What you can do however is right clicking your component and selecting Inspect within Chrome. This works because the elements tab shows a live representation of your code, so therefore it also shows the compiled component markup.
If you want further debugging tools you can check out the Vue devtools Chrome extension.
This does not work like jQuery for the reason that Vue takes a data-driven approach. Your data is in charge of what you markup is going to look like. jQuery usually enhances the HTML that is already there.

IE11 missing DOM elements

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

jQuery Datatables slow initialization in IE8

I have been working with DataTables for the last months and have already implemented server side processing with success. However the last requirement I was given was to have a search input in order to filter across all columns (like the predefault search for client side processing(CSP)).
As I antecipated that implementing that filter in server side processing (SSP) would result in a really slow query I switched my focus to CSP. Everything is working fine...except the usual suspect IE8 (requirement). The sort, paging and filtering all work really well in IE, however the initial loading is really slow and filled with "A script on this page is causing Internet Explorer to run slowly" dialogs. I spent the day reading the Datatables forum and SO looking for solutions, and did some experiments but nothing works (if I return more than ~2000 I get the damned dialog - I am testing with ~4000 rows):
-Using rows.add() in chunks of the returned JSON object (adapted the solution provided here DataTables Forum IE fix to work for version 1.10.3)
-Using deferRender = true
Notes:
1- I have some columns(4-5) that must use the render function in order to display custom data
2- I have some hidden columns (read somewhere that IE had some problems with hidden columns/table placeholder).
If someone has some more options I could try, I would be grateful!
Thank you in advance
EDIT: Couple of things I have already tried:
-Removed all the render functions;
-Made all columns not sortable;
-I have a bunch of click handlers that I was assigning in the DataTable's drawCallBack option: I switched it to delegate handlers and assigned them before initializing the table.
I still have the slow dialog...I am running my application in a VM with IE8, does the hardware have any impact? Given that the dialog is caused by the number of Javascript statements ran I doubt it, but I am not certain.

Micro Javascript templates not rendering correct in IE, but works fine without javascript?

This is a bit of an odd issue I'm having. I've been using John Resig' micro-templates for a meeting minutes application, and it seemed to work well, but lately I've been having an issue.
Basically the application fetches some JSON from an ajax call, and then uses the templating engine to generate a table with various actions like so:
This works fine, its a little slow in IE (javascript rendering) but it works. However randomly I'll get a stuff up in the display:
notice the gap there, its pushed it out wide, also, its made the rest of the rows squish up. I've tried every CSS/HTML trick I can think of to try and get IE to render it properly, but I'm out of ideas (any suggestions would be great!) . I'm using JQuery Sortable so you can drag each of those rows around, I noticed that when you drag it and place it again, it displays correctly. It's as if it thinks theres an extra TD there, when there isn't.
So I opened the IE developer tools and copied the inner HTML of the HTML element. Pasted this into a HTML file and put it on the server, turned off the JS so it wouldn't reload the elements and ran the page. It displays perfectly, just as in my first image.
So I'm confused as to why IE will render the page fine if the HTML is present from the start, but the templating engine causes odd stuff ups.
I'll probably look at rendering that part of the HTML on the server, and only use the templating where I need to. But has anyone come across this sort of issue before? is there any trick I can do to make it render it as it should?
we had similar problem in our company and our designer solved it. Solution was in concatenating tags one after another without spaces and/or without new line. Code is not looking great after that but still solves problem.
Thanks,
Nikola

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