I'm updating the user posts via this code:
var auto_refresh = setInterval(function()
{
$('.contenido-publicaciones')
.load("refresh_p.php?search_user="+search_user).fadeIn();
}, 2500 ); //Which is working.
1: <div class="contenido-publicaciones">, all the <div class="this-is-a-post"> div's from refresh.p.php load here every 2,5 seconds.
2: I have a textarea tag inside for each <div class="this-is-a-post"> that refreshes from refresh_p.php.
3: When <div class="contenido-publicaciones"> refreshes, it also refresh the textarea and prevent the user for typing.
4: All of the textareas have the class b_green
I want to clearInterval(auto_refresh) when the user clicks a textarea with the class b_green so another user can send a comment to that post.
I've tried the following:
$(".b_green").click(function(){
clearInterval(auto_refresh);
}); // Didn't work, <div class="contenido-publicaciones"> keep refreshing.
$("textarea").click(function(){
clearInterval(auto_refresh);
}); // Works only when i click a textarea that i have on the top of the page to send posts, but doesn't work when i click a textarea with the class b_green.
$(this).click(function(){
clearInterval(auto_refresh);
}); //This works if i click on b_green textareas, but stop the Interval on every click that the user does on the page, I only want to stop on b_green textareas click.
Is there any error on my code? Any help would be appreciated.
The clicks do not fire because at the time you are binding them there are no textareas or the ones that there are are latter replaced with new ones. These new textareas do not have the onclick handler attached.
You could do either of these:
Add onclick="clearInterval(auto_refresh);" to the code of the textarea that backend sends and get something like:
<textarea onclick="clearInterval(auto_refresh);"></textarea>
Use on to bind the click handler to a higher element that remains on the page like so:
$(".contenido-publicaciones").on('click', 'textarea', function(){
clearInterval(auto_refresh);
});
As I understood your loaded content contains all nodes which you are trying to handle by click.
If so . There is an issue. Because each time you get update you loose click handlers, because DOM has changed. as + you probably have memory leak here from previous "unreachable" handlers
Related
Actually, I am working with ajax to display the dynamic elements.
I am setting up a a div on a button click using javascript, this div contains form elements, after this form gets submitted i need to hide this div, so that it's no longer seen on UI.
The problem I am facing is, once I hide the div, its working fine, but when I reload the page the div is occurring again.
The wanted to make the div hidden permanently once I click on the button.
You will need to store the state of the div being hidden inside of localStorage.
Example:
const divHidden = localStorage.getItem('divHidden') === 'yes';
// if (!divHidden) show div
// Then when the div is being hidden:
localStorage.setItem('divHidden', 'yes');
You can also listen for the storage event on window to update any other tabs of your web application:
window.addEventListener('storage', () => {
if (localStorage.getItem('divHidden') === 'yes') {
// ...
}
});
Problem:
I'm trying to implement a dropdown form from a button. However, I'm having issues with the form not staying visible even after the condition is met. I'm new to javascript and css, so bear with me if it's a silly error. Thanks in advance.
What I want to do:
The form will be hidden by default.
When a user hovers over an image button, the form should be shown and hidden after the mouseleave.
If the user clicks the button, then the form should stay visible so that the user can enter the data and sumbit it.
Observation:
The objectives #1 and #2 from above are working as expected.
As opposed to objective #3, the form automatically hides even after the button click.
Unsuccessful Methods:
Using .show() instead of .css("display","block")
Using form:hover to set display:block.
Using setTimeout(hide_function,500) hides the form after 500ms regardless of the button click.
Code:
Here's the link to my jsfiddle that you can use to test it out.
References:
For button click detection.
For changing display property.
Just change data attr:
$('#dropbtn').click(function() {
$(this).data('clicked', 'yes');
$('#loginForm').css('display', 'block');
});
https://jsfiddle.net/d3h8gvek/3/#run //fixed result
i have modified your code little bit please check with the fiddle
$('#dropbtn').click(function() {
$(this).data('clicked', 'yes');
$('#loginForm').addClass('activate');
});
https://jsfiddle.net/d3h8gvek/7/
I have a page with an empty text input, an empty span and the following code:
$('input').on('input', function(){
$('span').text(this.value);
});
When I type in the input the same text appears in the span. But when I go to another page in the same browser tab and then go back again, the input field is still filled in, but now the span is empty.
How can I make it so that when you go back to the page the span keeps the value of the input?
Thanks!
Edit:
I think I've found the solution.
$('input').on('input', function(){
$('span').text(this.value);
}).not(function(){
return this.value == '';
}).trigger('input');
The behavior you are experiencing is normal if you are returning to the page by hitting the "back" button or browsing from your local hard drive - - you are seeing the cached version of the page in that case. Form fields can cache their values, but a span doesn't have a "value" per se, it has content and that content isn't cached.
If you were to return to the page by clicking a link or typing an address (things that cause an HTTP request), the text field will not show the last value from the previous time, it will show its default value.
In addition to the code you already have, you just need a script that fires off as soon as the page is ready that resets the span to the value of the input.
// You must already have a document.ready event handler, so just add to that:
$(function(){
// This will restore the span's content to the value of the textbox
$('span').text($('input').val());
// This is your original code that wires up the textbox to a click
// event handler
$('input').on('input', function(){
$('span').text(this.value);
});
});
I tend to bind window.popstate();
$(window).on("popstate", function (e) {
//code to refill the span goes here.
});
I use it to deserialize a potentially changed querystring, but you could likely use it here to the same effect.
Im having a problem attaching an event to a dynamically generated button. However after some research most of the solutions claim this error is usually generated from a form control. However in my case the error "invalid form control with name='answer'" is being generated and triggered when a button i have dynamically generated is pressed :
$("#BoxInner").append($("<button id='dynamicButton' class='btn btn-success' onclick='clickEvent()'>"+ "Button"+"</button>"));
I have appended a button to an existing div and call an onclick function that removed this element when it is clicked like this :
function clickEvent()
{
$(this).remove();
}
After running this in chrome this method works only on the first button added. After the first button is removed as expected it begins to generate the error "clickEvent" and adding a number count on each click and after reading many posts here about the error being attributed to a form i remain unsure how to solve the issue as the button is completely unrelated to the form on my HTML document and subsequently setting the form to not require validation does not solve the issue with the "novalidate" property. But note, if i remove the attached onclick event the error is not triggered.
Any help would be appreciated :)
$("#BoxInner").append($("<button id='dynamicButton' class='btn btn-success' onclick='clickEvent(this)'>"+ "Button"+"</button>")); // pass this to clickEvent function
function clickEvent(obj)
{
$(obj).remove(); // remove button like this
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="BoxInner"></div>
This is because the event listener is created on page load.
You should do something like this
$(wrapper_that_always_exists).on('click', the_freshly_added_element, function() {
...
});
So in your example it would be something like
$('#BoxInner').on('click', '#dynamicButton', function() {
...
});
When you do this, the BoxInner element will always listen for all clicks on any element inside, initially created or not, that has the id dynamicButton
I have modal popup with an overlay written in html / js, everything works fine but if a user tabs enough they can get to the underlying form fields / buttons. Is there any good way of preventing this?
This is a rough idea but I'm hoping to inspire ideas rather than tell you exactly how to do it. I'll use a combination of pseudocode and pseudo-jquery-code:
function showMymodaldExample() {
//Show modal dialog (mymodal) code goes here
//
//Then we bind an event
$(document).bind('mymodal.keydown', function(e) {
if ( currently focussed element is not a child of mymodal ) {
set the focus previous element
}
});
}
And then remember to unbind mymodal.keydown when you destroy/hide the dialog