Javascript accessing new window's element - javascript

I am creating a new html tab that among other things will show a table. I leave the table empty because i will fill it after with a Dynatable JS (filles a table with a given JSON). Code:
var html_ticket = '<!doctype html>' +
'<html dir="ltr" lang="en" class="no-js">' +
'<head> ' +
(...)
'</head> ' +
'<body> ' +
(...)
' <table id="ticket_table" > ' +
' <thead> ' +
' <th>Timestamp</th> ' +
' <th>Amount</th> ' +
' </thead> ' +
' <tbody> ' +
' </tbody> ' +
' </table> ' +
(...)
'</body> ' +
'</html> ';
Then i open that html code in a new tab like this:
var newWindow = window.open();
newWindow.document.write(html_ticket);
Ok the next thing i need to do is to fill the table with the info. I am using a JS that fills the table with a given JSON. I've used it several times and worked perfect, but this time the table is not filled, keeps empty. Code:
var table = newWindow.document.getElementById('ticket_table');
table.dynatable({
features: {
paginate: true,
sort: false,
pushState: false,
search: false,
recordCount: true,
perPageSelect: false
},
dataset: {
records: getInfoJSON()
}
});
I am suspecting that I am not accessing the new windows's element properly.. could this be the issue?

Related

Declaring an empty element before insertAdjacentHTML

Hi I have a simple question, do I need to specify lblWelcomeUserMessage.innerHTML = ""; ( see below in code ) in the following function before insertAdjacentHTML on it ? It actually works as it is without declaring it, but I want to know what is the optimal approach ?
// Dynamic HTML / user interface for ALL users
function showWelcomeMessage() {
//lblWelcomeUserMessage.innerHTML = "";
var sWelcomeUserMessage = '<h3>' + 'Welcome:' + ' ' + sessionStorage.getItem( 'name' ) +
' ' + sessionStorage.getItem( 'lastname' ) + ' ' + sessionStorage.getItem( 'role' ) + ' </h3>';
var iUserImage = '<img src=" ' + sessionStorage.getItem( 'image' ) + ' " width="50px">';
lblWelcomeUserMessage.insertAdjacentHTML( 'beforeend', sWelcomeUserMessage + iUserImage );
}
It depends on what you want to do.
If you are calling showWelcomeMessage function more than once then
you need to set it to empty lblWelcomeUserMessage.innerHTML = ""
function showWelcomeMessage() {
lblWelcomeUserMessage.innerHTML = "";
var sWelcomeUserMessage = '<h3>' + 'Welcome:' + ' ' + sessionStorage.getItem( 'name' ) +
' ' + sessionStorage.getItem( 'lastname' ) + ' ' + sessionStorage.getItem( 'role' ) + ' </h3>';
var iUserImage = '<img src=" ' + sessionStorage.getItem( 'image' ) + ' " width="50px">';
lblWelcomeUserMessage.insertAdjacentHTML( 'beforeend', sWelcomeUserMessage + iUserImage );
}
setInterval(showWelcomeMessage,4000);
OR
Otherwise you can remove lblWelcomeUserMessage.innerHTML = ""; from
above code
insertAdjacentHTML inserts some HTML around a node (lblWelcomeUserMessage, which you should have get before with something like lblWelcomeUserMessage = document.getElementById('welcome_tag')).
Setting it's inner content to an empty string is not really necessary, unless you want to clear it. It's rather a design issue than a programmatic one.
Optimal approach for what?
By the way based on MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
insertAdjacentHTML() parses the specified text as HTML or XML and
inserts the resulting nodes into the DOM tree at a specified position.
It does not reparse the element it is being used on and thus it does
not corrupt the existing elements inside that element. This avoids the
extra step of serialization, making it much faster than direct
innerHTML manipulation.
So it's basically depends on your needs. If you want to replace previous message you just add the lblWelcomeUserMessage.innerHTML = ""; , if you want to show all previous message just comment that code.

EXTJS: Scrolling of the page is very slow in windows XP

EXTJS: When I update data in XTemplate for every second in a tab panel, scrolling of the page became slow as data is continuously rendering into the template in windows XP
I have a tab panel with nearly 10 tabs. In each tab I am rendering data every second into some tables which are created using XTemplates.
I am not facing any issue with windows 7 and 10.
Could anyone please provide your suggestions.
Please find the below panel:
Ext.define('View.components.TestDataPanel', {
extend: 'Ext.Panel',
alias: 'widget.components-testDataPanel',
requires: [],
initComponent: function () {
Ext.apply(this, {
tpl: this.panelTemplate(),
data: {}
});
this.callParent(arguments);
},
panelTemplate: function () {
return new Ext.XTemplate('<div>'
+ '<h2>Test1</h2>'
+ '<table>'
+ '<tpl for="List">'
+ '<tr>'
+ '<td>{Content1}</td>'
+ '<td>{Content2}</td>'
+ '<td>{Content3}</td>'
+ '</tr>'
+ '</tpl>'
+ '</table>'
+ '</div>'
+ '<div>'
+ '<h2>Test2</h2>'
+ '<table>'
+ '<tr><th>Header1</th><th>Code</th><th>Header2</th><th>Header3</th></tr>'
+ '<tpl for="List2">'
+ '<tr>'
+ '<td>{Content1}</td>'
+ '<td>{Content2}</td>'
+ '<td>{Content3}</td>'
+ '</tr>'
+ '</tpl>'
+ '</table>'
+ '</div>',{
disableFormats: true
});
}
});
In controller :
OnData : function (data) {
var testPanel = this.getTestDataPanel();
if(testPanel && data) {
testPanel.update(data)
}
}
In each tab in the tabpanel we have these type of panels and are updated with the data every second.
The code is working fine and giving the expected results except the performance of scrollbar. Also switching between the tabs is very slow if the data is rendering continuously. Windows 7 and 10 is perfectly working as expected also no performance issues with them.

How can i insert Multiple html into the modal through Javascript

Actually My question is after onclick My Modal is appear and i can insert multiple things into the Modal and i can do this through
(.html("abc");)
But the above syntax is insert only one string if i append multiple String it's shows error
Here is my Code:
echo "<script>
function myFunction(order){
$('.modal-body').html(order.order_id);
$('#myModal').modal({backdrop: false}); /#myModal is the body of the Modal
}
</script>";
Now i find out the soloution we can use this:
$('.modal-body').html('<b>Order Number</b>: '+order.order_id +
'<br>'+'<b>Order Date:</b>' + ' ' +order.created_date+ '<br>'+'<b>Table Number:</b>' + ' ' +order.uid + '<br>'+'<b>Status:</b> ' + ' ' +order.status+ '<br>'+'<b>Title:</b>' + ' ' +order.title + '<br>'+'<b>Quantity:</b>' + ' ' +order.quantity+ '<br>'+'<b>Personalization:</b>' + ' ' +order.personalization);

Error in line of javascript 'missing ) after argument list"

I am trying to pass variables to a javascript function but i have the Javascript Error: 'missing ) after argument list"
html = html + '' + 'Lugar: ' +name.name +' Coordenadas: Lat '+ name.lat +' Lng'+ name.lng+ '<br>';
It doesn't look like I am missing any ')'s.
I see you have found your solution, but here's an alternative anyway, which reduces your string concatenation a little. There's still a far better way of achieving this, but this may help you start to see the benefit of moving away from building HMTL via string concatenation.
<meta charset="UTF-8">
<span id="spanTest"></span>
<script>
// Or whatever your initMap2 function does...
function initMap2(lat, lng, name) {
console.log('Lat: ' + lat);
console.log('Lng: ' + lng);
console.log('Name: ' + name);
}
var spanTest = document.getElementById('spanTest');
var worldLocation = { name:"test", lat:98.5, lng:-88.45 };
var anchor = document.createElement('a');
anchor.href = 'javascript:initMap2(' + worldLocation.lat +', ' + worldLocation.lng + ', \'' + worldLocation.name + '\');';
anchor.innerHTML = 'Name: ' + worldLocation.name + ', Lat: ' + worldLocation.lat + ' Lng: ' + worldLocation.lng;
spanTest.appendChild(anchor);
</script>
I'm assuming your last argument is expected to be a string, but it's resolved to look like a variable. Try this instead:
html = html + '<a href="javascript:initMap2(' + name.lat +','+ name.lng +',\''+ name.name +'\');">' // etc.
When name.name resolves to a string, it'll be wrapped in single quotes as expected. It'll look something like javascript:initMap2(1, 2, 'someString').

ERROR - unexpected token when getting bigger JSON file

I have a textbox that takes user input, sends it to WS, where it searches for anything matching said data and returns all that it finds as JSON. Then I take said json and fill a table. If the user input is quite specific I get the data and table is created with no problems, if the user input is not specific I get quite a lot of data in my JSON, BUT I also get ERROR - unexpected token, and the table stays empty.
My js
$('#btnFilter').click(function () {
var filter = $('#txtFilter').val();
var sqlCall = ""
callJsonWs("EXECUTE procedure", "loadPageFilter");
});
function loadPageFilter(dataJSON) {
var data
try {
data = JSON.parse(dataJSON)
}
catch (err) {
alert("ERROR - " + err.message)
}
document.getElementById("tableFilterPopup").innerHTML = ''
$.each(data.filter, function (index, value) {
document.getElementById("tableFilterPopup").innerHTML += '<tr onclick="newLocation(\'' + value.pageView + '\')">'
+ '<td>' + value.jobCode + '</td>'
+ '<td>' + value.jobCustomerName + '</td>'
+ '<td>' + value.jobPhoneNumber + '</td>'
+ '<td>' + value.jobModel + '</td>'
+ '</tr>';
})
}
As Gregg Duncan has mentioned, the problem was with invalid JSON format that broke off hence I was getting an incomplete JSON string.

Categories

Resources