I have one page, that load new elements via jquery. I have page that have event listener like
ipcRenderer.send('getlist');
ipcRenderer.once('return:list', function (e, l, wn) {
console.log('a');
for(let i = 0; i < l.length; i++) {
$('.a').append('<div>'+l[i]+wn[i]'</div>');
}
$('.a').append('<div>End</div>');
});
Code that send data to page:
ipcMain.on('getlist', function (e) {
wn = [];
cfg['a'].forEach(s => {
wn.push(yaml.readSync('charcfg.yaml')['name']);
});
mainWindow.webContents.send('return:list', cfg['a'], wn);
});
And it's works perfectly until I load another page, and again load this page.
This event fires multiple times. Each time I come back to this page, more times it goes.
I tried to use
ipcRenderer.once('someevent', function(e, l){...});
It's works only ONE TIME. On third reload it's starts do listener multiple times again.
Code with this script loads with page!
Sorry for my english.Output
Function that loads page via jquery:
const htmlContent = $('.content');
function setContent(s) {
$('.content').animate({
opacity: 0
}, 200, function () {
setTimeout(function () {
htmlContent.load(s + '.html');
$('.content').animate({
opacity: 1
}, 200);
}, 100);
});
}
Actually there was TWO listeners that go twice.
It's ipcRenderer.on (replaced to .once) and jquery.on('click') that was bound to button that loads page. Fixed this with jquery.unbind().on('click').
Thanks for your help, obermillerk.
Related
Heyo,
I was wondering if there would be a way to set a min-time to an onload function so that the div is shown min 2sec. Basicly the same as with min-width or min-height. If the site is taking longer than 2sec to load, the div will still be shown untill the site is fully loaded but when the site takes less than 2sec to load the div will still be displayed for a minimum of 2sec.
Here is my current code:
$(window).on('load', function() {
$('.preloader').delay(350).fadeOut('slow');
});
Try this:
$(window).on('load', function() {
setTimeout( function(){
$('.preloader').fadeOut('slow');
}, 2000 )
});
So I take it you want a function to be run when either: the page loads or after 2 seconds, whatever comes later.
First, define a function to be called:
function load_func() {
$('.preloader').delay(350).fadeOut('slow');
}
Then, let's define a way to call the function in either situation:
var pageLoaded = false;
var timeoutElapsed = false;
$(window).on('load', function() {
pageLoaded = true;
if (timeoutElapsed) {
load_func();
}
});
setTimeout(function() {
timeoutElapsed = true;
if (pageLoaded) {
load_func();
}
}, 2000);
This way, if the page loads before 2 seconds, it will wait the timeout to call the function.
Otherwise, if the page loads after 2 seconds, it will call it whenever that load event happened.
I've downloaded this Drupal 8 template and the site is at www.plotujeme.sk. It has an responsive navigation with this .js script:
function sidebar_menu() {
var windowsize = jQuerywindow.width(),
jQuerynav = jQuery("nav"),
slide = {
clear: function () {
jQuerybody.removeClass('toggled');
jQuery('.overlay').hide();
jQuery('.easy-sidebar-toggle').prependTo("header");
//jQuery('#search').prependTo("body");
jQuery('.navbar.easy-sidebar').removeClass('toggled');
jQuery('#navbar').removeAttr("style");
},
start: function () {
jQuery('.overlay').show();
jQuerybody.addClass('toggled');
jQueryhtml.addClass('easy-sidebar-active');
jQuerynav.addClass('easy-sidebar');
jQuery('.easy-sidebar-toggle').prependTo(".easy-sidebar");
//jQuery('#search').prependTo("#navbar");
jQuery('#navbar').height(jQuerywindow.height()).css({
"padding-top": "60px"
});
},
remove: function () {
jQuerynav.removeClass('easy-sidebar');
}
};
if (windowsize < 1003) {
jQuerynav.addClass('easy-sidebar');
jQuery('.easy-sidebar-toggle').on("click", function (e) {
e.preventDefault();
if (jQuerybody.hasClass('toggled')) {
slide.clear();
} else {
slide.start();
}
});
/*
jQueryhtml.on('swiperight', function () {
slide.start();
});
jQueryhtml.on('swipeleft', function () {
slide.clear();
}); */
} else {
slide.clear();
slide.remove();
}
}
and:
jQuery(document).ready(function () {
"use strict";
sidebar_menu();
jQuery(window).resize(function () {
sidebar_menu();
});
});
Problem is, that if I open responsive navigation by clicking on hamburger button, it works several times and then it stops working, the page and a browser freezes or is unresponsive for a long time. I also noticed that (even in template preview) sometimes it does not work at all and nothing happens after clicking hamburger icon. When I resize window multiple times sometimes it works sometimes not.
Do you see any error in the script that could possibly cause this problem?
Update: I also tried to use jQuery('.easy-sidebar-toggle').off("click"); just before jQuery('.easy-sidebar-toggle').on("click", function() {...}); but got the same results.
jQuery(window).resize(function () {
sidebar_menu();
});
As a result, whenever sidebar_menu function changes the window size, this function is called again and again, like a recursion, hence the freezing
I think the reason might be the following lines in the resize handler:
jQuerynav.addClass('easy-sidebar');
jQuery('.easy-sidebar-toggle').on("click", ...
They are run every time the window is resized by even one pixel, so a few dozen times a second if you drag the window border. Not sure about the first line, whether it adds the class over and over, but the second line certainly adds an event handler multiple times and fills up the stack. That's the reason your browser freezes. It just can't process the hundreds of registered events.
Just a guess, though.
I am using ajaxComplete to run some functions after dynamic content is loaded to the DOM. I have two separate functions inside ajaxComplete which uses getJSON.
Running any of the functions once works fine
Running any of them a second time causes a loop cause they are using getJSON.
How do I get around this?
I'm attaching a small part of the code. If the user has voted, clicking the comments button will cause the comments box to open and close immediately.
$(document).ajaxComplete(function() {
// Lets user votes on a match
$('.btn-vote').click(function() {
......
$.getJSON(path + 'includes/ajax/update_votes.php', { id: gameID, vote: btnID }, function(data) {
......
});
});
// Connects a match with a disqus thread
$('.btn-comment').click(function() {
var parent = $(this).parents('.main-table-drop'), comments = parent.next(".main-table-comment");
if (comments.is(':hidden')) {
comments.fadeIn();
} else {
comments.fadeOut();
}
});
});
Solved the problem by checking the DOM loading ajax request URL
$(document).ajaxComplete(event,xhr,settings) {
var url = settings.url, checkAjax = 'list_matches';
if (url.indexOf(checkAjax) >= 0) { ... }
}
I am creating a chat, everything works perfectly, it scrolls down when i click the "Send" button, but I want it to scroll all the way down when the document is ready. I have done this by adding the scrolling function to setInterval, but the problem with that is that the user basically cant scroll up to see previous chat messages because he gets scrolled down every 0.1 seconds. My code is:
$(function () {
//$("#messages").scrollTop($("#messages").prop("scrollHeight")); Doesnt work at all
function updateChat(){
$("#messages").load('chat/ajaxLoad.php');
//$("#messages").scrollTop($("#messages").prop("scrollHeight")); This works but the user cannot scroll up anymore
}
setInterval(function () {
updateChat();
}, 100);
$("#post").submit(function(){
$.post("chat/ajaxPost.php", $('#post').serialize(), function (data) {
$("#messages").append('<div>'+data+'</div>');
$("#messages").scrollTop($("#messages").prop("scrollHeight")); // This works but only when the user presses the send button
$("#text").val("");
});
return false;
});
});
Add this to your code.
var chat = $("#messages").html();
setInterval(function () {
updateChat();
if(chat !== $("#messages").html()){
$("#messages").scrollTop($("#messages").prop("scrollHeight"));
chat = $("#messages").html();
}
}, 2000);
I think this should work (didnt test), but there are some better ways you can optimise this like not saving the whole .html() into a variable.
The idea here is that it checks if the content is changed every 2 seconds. If it is, it scrolls down.
I see what's your problem and I have 2 ideas for you :
You scroll down only when a new message is post, for example with an Ajax request you could check if number of messages is > in compare with the last 0.1s, if yes you scroll if not you ignore.
You scroll down every 1-2s only if the scroll is at the maximum bottom position. If the scroll is not at the maximum you do not scroll. I feel this solution is better.
You need to seperate the actions on your application,
also you missed many checks that can make the application work properly and will
make it easy to maintain.
How i suggestion the code will look:
$(function () {
function updateMessages(){
var messages_before_update = $("#messages").html();
$("#messages").load('chat/ajaxLoad.php');
var message_after_update = $("#messages").html();
if(messages_before_update !== message_after_update){
scrollToBottom();
}
}
function scrollToBottom(){
var scroll_height = $("#messages").prop("scrollHeight");
var scroll_top = $("#messages").scrollTop();
if(scroll_height !== scroll_top){
$("#messages").scrollTop($("#messages").prop("scrollHeight"));
}
}
function addMessage(message){
$("#messages").append('<div>' + message + '</div>');
}
setInterval(updateMessages, 100);
$("#post").submit(function () {
$.post("chat/ajaxPost.php", $('#post').serialize(), function (data) {
addMessage(data);
scrollToBottom();
$("#text").val("");
});
return false;
});
});
After returning to main content by ajax load, function onload didn't run.
I can understand why, but how can I make it run in that condition?
<script type="text/javascript">
onload = function() {
if (!document.getElementsByTagName || !document.createTextNode) return;
var rows = document.getElementById('chat').getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
rows[i].onclick = function() {
$("#chat_main").load("chat", {
m: this.id,
ajax: 1 //here we are loading another page
});
}
}
}
</script>
<script>
function return_to_main() {
$("#chat_main").load("chat", {
ajax: 1 //here we trying to load back main page
});
}
</script>
P.S. return_to_main() is binded on input type="button"
You are binding to the window.onload call. It does not magically get called every time the page content is updated. It is only called once. You need to call a function every time you want the code to run. So when the Ajax call is complete, you would been to trigger it.
BUT You are using jQuery so use it.
There is no reason why you would need to bind to every row on the table. Use event delegation. Now when the content changes, you will still have the events bound.
$( function () { //document ready
var chatMain = $("#chat_main");
chatMain.on("click", "table tbody tr", function () { //listen for clicks on table row
chatMain.load("chat",
{
m: this.id,
ajax: 1 //here we are loading another page
}
);
});
});
Call your function after the request:
$("#chat_main").load("chat", {
ajax: 1 //here we trying to load back main page
}).done(onload); // <--
If .load does not produce a promise use:
$("#chat_main").load("chat", {
ajax: 1 //here we trying to load back main page
}, onload); // <--