I'm writing a small progam wherein I'm getting data using $.get then display the data so far so good and then there's this part then when I click a certain link it refresh the page but it has this blinking effect. Is there a way on how to reload the content get the new updated content then replace the previously loaded data.
NOTE: I didn't use setInterval or setTimeout function because it slows down the process of my website. any answer that does not include those functions are really appreciated.
Here's the code
function EmployeeIssues(){
$('#initial_left').css({'display' : 'none'});
var table = $('#table_er');
$.get('admin/emp_with_issues', function(result){
var record = $.parseJSON(result);
var data = record.data,
employees = data.employees,
pages = data.pages;
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
for (var i = 0; i < employees.length; i++) {
$('#table_er').fadeIn('slow');
table.append(write_link(employees[i])); // function that displays the data
}
if(pages){
$('#pagination').html(pages);
}
}else{
$('#er_tab_label').html('<b>No employees with issues yet.</b>');
}
});
table.html('');
}
then this part calls the function and display another updated content
$('#refresh_btn').on('click', function(e){
e.preventDefault();
var tab = $('#tab').val();
if(tab == 'er'){
EmployeeIssues();
}
});
What should I do to display the content without any blinking effect?
thanks :-)
This section might be the issue :
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
for (var i = 0; i < employees.length; i++) {
$('#table_er').fadeIn('slow');
table.append(write_link(employees[i])); // function that displays the data
}
if(pages){
$('#pagination').html(pages);
}
} else ...
It seems you're asking table_er to fade in once per run of the loop whereas s there can only be one such table, you only need to do it once ?
first try re-arringing it like this:
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
$('#table_er').hide(); // hide it while we add the html
for (var i = 0; i < employees.length; i++) {
table.append(write_link(employees[i])); // function that displays the data
}
$('#table_er').fadeIn('slow'); // only do this after the table has all its html
if(pages){
$('#pagination').html(pages);
}
} else ....
Another possibility is that you're running through a loop and asking jquery to do stuff while the loop is running. It might be better to work out the whole HTML for the new page data in a string and then get the screen to render it in one line. I cna't do this for you as I don't know what's in write_link etc but something like this ..
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
var sHTML ="";
$('#table_er').hide(); // hide it while we add the html
for (var i = 0; i < employees.length; i++) {
sHTML+=write_link(employees[i]); // maybe this is right ? if write_link returns an HTML string ?
}
table.append(sHTML); // add the HTML from the string in one go - stops the page rendering while the code is running
$('#table_er').fadeIn('slow'); // now show the table.
if(pages){
$('#pagination').html(pages);
}
} else ...
Related
I have written the JavaScript to modify the DOM attribute based on the click and stored the values in local storage. So after the page loaded, it's getting the value from local storage and set the new attribute to DOM. It's working fine and able to achieve my scenario after perfectly page loaded.
ready(function(){
let element = document.querySelector("body");
if(element.classList.contains("path-api-catalog") ){
let name1 = document.querySelectorAll(".tooltip_heading > h6");
for (let i = 0; i < name1.length; i++) {
let title = name1[i].innerText.replace(/[\n\r]+|[\s]{2,}/g, ' ').trim();
let titleURL = name1[i].parentNode.parentNode.querySelector('.btn.primary-btn').href;
if (localStorage.getItem(title) != null){
if(localStorage[title]===titleURL){
let titleDiv = name1[i].parentNode;
titleDiv.querySelector('.bookmark-icon').setAttribute('onclick','RemoveListItem(event)');
}
}else{
let titleDiv = name1[i].parentNode;
titleDiv.querySelector('.bookmark-icon').setAttribute('onclick','SaveListItem(event)');
}
}
}
})
But I have Ajax category filter to filtering the content. Whenever I click the filter, the content loaded through Ajax. After the Ajax, my JavaScript not modify the attribute and not executed correctly. So, how to execute the JavaScript function even after Ajax content loaded.
I have written the JavaScript to modify the DOM attribute based on the click and stored the values in local storage. So after the page loaded, it's getting the value from local storage and set the new attribute to DOM. It's working fine and able to achieve my scenario after perfectly page loaded.
ready(function(){
let element = document.querySelector("body");
if(element.classList.contains("path-api-catalog") ){
let name1 = document.querySelectorAll(".tooltip_heading > h6");
for (let i = 0; i < name1.length; i++) {
let title = name1[i].innerText.replace(/[\n\r]+|[\s]{2,}/g, ' ').trim();
let titleURL = name1[i].parentNode.parentNode.querySelector('.btn.primary-btn').href;
if (localStorage.getItem(title) != null){
if(localStorage[title]===titleURL){
let titleDiv = name1[i].parentNode;
titleDiv.querySelector('.bookmark-icon').setAttribute('onclick','RemoveListItem(event)');
}
}else{
let titleDiv = name1[i].parentNode;
titleDiv.querySelector('.bookmark-icon').setAttribute('onclick','SaveListItem(event)');
}
}
}
})
But I have Ajax category filter to filtering the content. Whenever I click the filter, the content loaded through Ajax. After the Ajax, my JavaScript not modify the attribute and not executed correctly. So, how to execute the JavaScript function even after Ajax content loaded.
I've read similar questions and tried several suggestions nothing had worked - hope you can help
Scenario:
loading my website with initial (static) index.html -- looks great css takes fine
clicking on "next page" button --> retrieves successfully the data from DB and dynamically generates the element's innerHTML section.
Problem: the audio player is the only element which doesn't look the same
Initial state: when loading the site first time
and how it looks after generating the HTML
All other tags like header image and text do apply the css rules.
The audio player has rules in the css file and has also the following script at the end of index.html and I'm suspecting thats the root of my problem not being "fired/called" again for the new generated elements
<script>
document.addEventListener('DOMContentLoaded', function() {
var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length;
for (var i = 0; i < total; i++) {
new MediaElementPlayer(mediaElements[i], {
pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement#4.2.7/build/',
shimScriptAccess: 'always',
success: function () {
var target = document.body.querySelectorAll('.player'), targetTotal = target.length;
for (var j = 0; j < targetTotal; j++) {
target[j].style.visibility = 'visible';
}
}
});
}
});
</script>
If that's the reason how can I invoke this event on demand and how can I do it from the javascript file?
Trying to run the following code, but it works either way I need to:
if(my_condition){
$('body').append("<div id='loaddiv'><div>");
for(var i=1; i<=100; i++){
var dl = 0;
$('#loaddiv').load('/script/?p='+i);
dl = $('#loaddiv .standart-view tr').length;
alert(dl);
}
}
Thus, I have to get the number of tr-elements, which is the parent element with class standart-view, and his parents - div block c id = load214235, for each page, but constantly displays zeros in the Alert :( I tried to upgrade the code, adding all the code in the load-callback function, but still does not work ...
if(my_condition){
$('body').append("<div id='loaddiv'><div>");
for(var i=1; i<=100; i++){
var dl = 0;
$('#loaddiv').load('/folder/?p='+i, function(){
dl = $('#loaddiv .standart-view tr').length;
alert(dl);
});
}
}
+I have yet to load after going condition with break; firebug it just swears that break does not know that close ... How do I get out of the situation? I feel that something with a visibility of variables and data do not have time to load another page, and the script is running on. Jquery is connected, the rest of the code is working, including the functions of jquery, the hierarchy of elements on another page observed (number of tr should be).
First load is an Asynchronous call, you are treating it as synchronous. You are reading the content before the Ajax call is returned. Hence why it is always zero.
Second, when you do hook it up write, the content will end up writing on top of each other. You can not use load() and expect it to work in a loop.
Here is the basic idea:
(function () {
var pageCounter = 1;
var tableRowsTotal = 0;
max pageMax=10;
function loadPage() {
$.get('/folder/?p='+pageCounter, function(data){
var table = $(data).filter(".standart-view");
//or
//var table = $(data).find(".standart-view");
var rows = table.find("tbody tr");
var rowCount = rows.length;
console.log(pageCounter, rowCount);
tableRowsTotal += rowCount;
pageCounter++;
if(pageCounter<pageMax) {
loadPage();
} else {
console.log("done");
}
});
}
loadPage();
}());
i have a Grid which contains more than 100 records at every time.When i am trying to print the data using javascript. It able to print the grid data.But my problem is to be in every page not having the page header and at the sametime the final record data is missing .i need to fix this issue anyone help me to improve
self.print();
i am using this command for initiate print.after that
var gridid = "#grid";
$("#pageheader").show();
$("#pageheader").clone().addClass("clonecopy").appendTo("body");
$(gridid).clone().addClass("clonecopy").appendTo("body");`
By this coding used for print only my Grid in print screen.
and i need to fix this by 15 records per page and headers(for every page)
function printControl(){
var table = document.getElementById("DataList1");
var count = table.rows.length;
for (var i = 0; i < count; i++) {
if ((i % 4 == 0)&&(i!=0)) {
table.rows[i].style.cssText = "page-break-after:always";
}
}
}
and also i am using this code but i cant get the result..
Making a few assumptions here, but it would look similar to below:
var count = 0;
var page = $('<div></div>');
$('#grid').children().each(function(){
if( count == 0 ){
$("#pageheader").clone().addClass("clonecopy").appendTo(page);
}
$(this).clone().addClass("clonecopy").appendTo(page);
count += 1;
if( count == 15 ){
page.appendTo("body");
page = $('<div></div>');
count = 0;
}
});