back button callback function failing, or not firing, under particular condition - javascript

I'm trying to manipulate the anchor element (#backButton), so that it fires a JS function on click. It works as it should except in the instance of clicking through the following element chain: #openShow > #openDetailsFromShow > #backButton > #backButton
On this final #backButton click the expected JS function ( closeShowProvider() ) does not fire, but instead #backButton reverts to its default behaviour.
I've tried searching for a solution to this, but I'm afraid my understanding of the issue is limiting my ability to resolve it. I suspect it may have something to do with closures, but I could be very wrong...
JSFiddle of the (not quite) working code https://jsfiddle.net/timothyvictor/u1dv83a1/2/
I'm really stuck on this and would very grateful for any help and/or pointers. Many thanks in advance,
TV
HTML:
<div class="container">
<a id="backButton" href="#link">Back Button</a>
<input type="text" id="link">
<br>
<button onclick="openShowProvider('id', 'searchProviders.php')" id="openShow">Open Show Provider</button>
<br>
<button onclick="openProviderDetails('NEW', 'searchProviders.php')" id="openDetailsDirect">Open Provider Details Direct</button>
<br>
<button onclick="openProviderDetails('NEW', 'showProvider.php')" style="display:none" id="openDetailsFromShow"> Open Provider Details from Show Provider</button>
<br>
<div id="showProvider" style="display: none;">
<h1 class="text-center">Show Provider is OPEN!!!!</h1>
</div>
<div class="alert alert-success" id="providerDetails" style="display: none;">
<h1 class="text-center">Provider Details is OPEN!!!!</h1>
</div>
Here is the JS:
function backButton (backFunc, param) {
$('#backButton').unbind().click(function(e){ //using unblind to clear backFunc before binding new event?
e.preventDefault();
backFunc(param);
$(this).unbind('click');
});
}
function openShowProvider(id, return_page){
if (return_page === 'searchProviders.php') {
$('#showProvider, #openDetailsFromShow').show();
$('#openShow, #openDetailsDirect').hide();
}
backButton(closeShowProvider, return_page);
}
function openProviderDetails(id, return_page) {
if (return_page === 'searchProviders.php') {
$('#openShow, #openDetailsDirect').hide();
}
if (return_page === 'showProvider.php') {
$('#showProvider, #openDetailsFromShow').hide();
}
$('#providerDetails').show();
backButton(closeProviderDetails, return_page);
}
function closeShowProvider(return_page){
if (return_page === 'searchProviders.php' || return_page === 'providerDetails.php'){
$('#showProvider, #openDetailsFromShow').hide();
$('#openShow, #openDetailsDirect').show();
}
}
function closeProviderDetails(return_page) {
$('#providerDetails').hide();
if (return_page === 'searchProviders.php'){
$('#openShow, #openDetailsDirect').show();
}
if (return_page === 'showProvider.php') {
$('#showProvider, #openDetailsFromShow').show();
backButton(closeShowProvider, 'providerDetails.php');
}
}

Hi Hope it will solve your problem, there was some error while attaching and removing the click event
jsfiddle.net/u1dv83a1/3/
In this i have used the same code what you have used, but just changed the backButton pressed function in that

Related

Javascript removeAttribute style not working properly

I have a simple code in order to hide objects inside a div until a button is pressed.
The code works, but after execute the alert, the code roll back.
I understand there are several options to do the same, but same behavior occurs for others I have attempt (such as https://www.w3schools.com/jsref/prop_style_visibility.asp).
So I have attempt the removeAttribute style because it's easier to watch on Console.
I have attempt to put the script before the form, and after form, but same behavior occurs.
I have add some snapshots from Console in order to demonstrate it, please see below.
I am not sure what am I doing wrong. Tested on Chrome (89.0.4389.114) and Edge (89.0.774.75).
Any help is highly appreciated!
Thank you in advance.
PS. It is running inside a php code (using echo) due it has conditional values.
**PS. It works fine outside a form**
<body>
<form ...
(...)
<div class="field" id="pwdDIV" style="visibility: hidden">
..somocode..
</div>
<button class="button" onclick="showPwd()">Show Password</button>
</form>
<script>
function showPwd() {
var z = document.getElementById('pwdDIV');
alert("Get Style: "+z.style.visibility);
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
alert("Change to Style: "+"visible");
} else {
(...)
}
}
</script>
</body>
Before Press Show Password button
After press Show Password button - executing alert parameter
After execute Javascript code
Outside form sample (works fine outside forms)
<html>
<head>
<script type="text/javascript">
function showPwd() {
var z = document.getElementById('pwdDIV');
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
} else {
z.setAttribute("style", "visibility: hidden");
}
}
</script>
</head>
<body>
<button onclick="showPwd()">Show Password</button>
<div id="pwdDIV" style="visibility: hidden">
<input type="password" id="pwd1" name="pwd1">
</div>
</body>
</html>

this.$ or this.$$ to select all elements with same id or class name - Polymer

I have 3 paper-toggle-buttons that I would like to have disabled until I click an "edit" button (makes sense to do that).
I have cobbled this together in a long-winded form, however I wanted to know if there was a way in PolymerJS that you could use either the this.$.ID-NAME or the this.$$('CLASS-NAME') to select all of the paper-toggle-buttons, assuming that I gave them all the same ID and CLASS names (bad practise to duplicate ID's I know).
Any help is appreciated. I know that it's currently working, but I just want to know if there's an easier way.
I am currently working with the following (the toggle will occur when clicking a button with on-click event "editMode"):
HTML
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Active User</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isActive}}" disabled></paper-toggle-button>
</div>
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Operator</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isOperator}}" disabled></paper-toggle-button>
</div>
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Manager</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isManager}}" disabled></paper-toggle-button>
</div>
PolymerJS
editMode : function() {
toggle1 = this.$.toggle1;
toggle2 = this.$.toggle2;
toggle3 = this.$.toggle3;
if( EditDiv.style['display'] == 'none' )
{
toggle1.toggleAttribute('disabled');
toggle2.toggleAttribute('disabled');
toggle3.toggleAttribute('disabled');
}
else
{
toggle1.toggleAttribute('disabled');
toggle2.toggleAttribute('disabled');
toggle3.toggleAttribute('disabled');
}
}
You could take a look to Polymer DOM API, there're a lof of functions to interact with the DOM. I think you're looking for Polymer.dom(this.root).querySelectorAll('.toggle')
$$ returns the first node in the local DOM that matches selector.
you can do
Array
.from(Polymer.dom(this.root).querySelectorAll('.foo'))
.forEach($0 => /* do something */)
;
Then, just a note, your snippet doesn't make much sense because you are performing the same operation in if and else statements:
if(expression) {
toggle1.toggleAttribute('disabled')
} else {
toggle1.toggleAttribute('disabled')
}
// is equal to:
toggle1.toggleAttribute('disabled')
your code could definitely look like:
{
editMode() {
return [
this.$.toggle1,
this.$.toggle2,
this.$.toggle3
]
.forEach($0 => $0.toggleAttribute('disabled'))
}
}

Apply onclick rule on div with exceptions

I want to run a javascript function everytime a user clicks anywhere on the page (div "maincontent") EXCEPT on any of the two buttons (div "btnNew" and "btnRegister"). How can I do that? My first approach doesn't work.
<div id="mainContent" class="content" onclick="hidePopUps(document.this)">
[...]
<div id="btnNew" class="btn-welcome" onclick="showRegister()">New user</div>
<div id="btnRegister" class="btn-welcome" onclick="showLogin()">Existing user</div>
[...]
</div>
function hidePopUps(element) {
if(element == $("#mainContent")) {
hideLogin();
hideRegister();
}
}
You can do this with jQuery and the :not() selector:
$(":not(body):not(html):not(#btnNew):not(#btnRegister)").click(function() {
// the :not(body) and :not(html) are to prevent it
// from setting off additional event listeners because
// everything is on top of the html and body tags
// ... handler here
});
This should select everything but those two buttons.
See a working example at JSFiddle.net.
To make things work the way you want I would:
change your onlick events:
a. you don't need hidePopUps(document.this), just hidePopUps(this)
b. in showRegister() and showLogin() put 'event' variable inside brackets to pass it to these functions to avoid bubbling
prevent bubbling when buttons are clicked in called functions
use id to check if container was clicked: should read as if(element.id == 'mainContent') { instead of if(element == $("#mainContent")) {
So your code could look like:
<div id="mainContent" class="content" onclick="hidePopUps(this)">
<div>some content before</div>
<div id="btnNew" class="btn-welcome" onclick="showRegister(event)">New user</div>
<div id="btnRegister" class="btn-welcome" onclick="showLogin(event)">Existing user</div>
<div>some content after</div>
</div>
function showRegister(event) {
event.stopPropagation();
...
}
function showLogin(event) {
event.stopPropagation();
...
}
function hidePopUps(element) {
if(element.id == 'mainContent') {
hideLogin();
hideRegister();
}
}
Check out this fiddle: JSFiddle

OnClick event for div inside lots of container Divs

I have an app I'm developing and I need a onclick() event to be fired when a <div> is clicked.
So in other words,
<div id="panda"></div>
$("#panda").click(function () {
console.log("some text");
});
So this statement works but now lets say I have,
<div id="panda">
<lots of children>
<div id="koala">
</div>
</lots of children>
</div>
$("#koala").click(function () {
console.log("doesnt work");
});
Now you see for the life of me I can't get koala to be clickable. The click event on parents works fine, and click evens for some empty divs I use as buttons work fine, but for some reason I cant get I filled child <div> to be clickable.
Any ideas what the case could be?
I tried this,
$('#panda').click(function(e){
if ($(e.target).is('#koala'))
{
console.log("koala");
}
});
But it just logs every click on the parent.
One option is to listen to the div children for panda.
$("#panda").on('click','div',function() {
console.log($(this).text()+' '+$(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panda">
<div id="koala">
koala
</div>
<div id="bear">
bear
</div>
</div>
Try making the selector '#panda #koala' like this
$("#panda #koala").click(function () {
console.log("koala");
});
Here is an example,
<div id="panda">Panda
<div id="koala">Koala</div>
</div>
$("#panda").on('click', '#koala', function () {
alert("koala!!!");
});
Here is a Fiddle

how to pass multiple jquery objects to a js function?

Actually, I have more than 8-inputs w/ 8 different id's in HTML & i wanted to pass the jquery objects to a onlblur event function so I don't need to create 8-repetitive functions & only make 1 script function.
I've been trying really hard for hours in searching Stack overflow but couldn't find the answer to my questions or perhaps I am just new to jquery. Hope you can help me & thanks in advance...
function fill(t,xx,zz) {
$(xx).val(t);
setTimeout("$(zz).hide();", 200);
}
<input type="text" id="inputString" size="50" value="" onkeyup="lookup(this.value);" onblur="fill(this.value,'#inputString','#suggestions');" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
To give you a better understanding of the code, this it the original one that really works & is only good for 1-input html tag. I'm planning to use only ONE function on 8-input html tags.
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
function lookup(xString) {
if(xString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("db_rpc.php", {queryString: ""+xString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(t) {
$('#inputString').val(t);
setTimeout("$('#suggestions').hide();", 200);
}
Make all your elements share the same class.
<div id="idOne" class="toBlur" />
<div id="idTwo" class="toBlur" />
<div id="idThree" class="toBlur" />
Tell jQuery that you want to apply the same function to each item with the class when the blur event is fired.
$(".toBlur").blur(function() {
// Do whatever.
});
Also, if you're going to use jQuery (it's in your question tags), you shouldn't assign your callbacks in the HTML like you have.
You do that with event handlers and classes:
<input type="text" class="inputString" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
JS
$('.inputString').on({
keyup: function() {
lookup(this.value);
},
blur: function() {
var self = this;
setTimeout(function() {
$(self).next('.suggestionsBox').hide()
},200);
}
});
i made it work used using 1set of function for 8-input tags by passing arguments to both functions. I placed a switch statement to determine the input tag id as seen on function fill. I also added another POST variable on function lookup. Below is my modified code:
function lookup(inputString,nn) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else
{
$.post("db_rpc.php", {queryString: ""+inputString+"",nns: ""+nn+""}, function(data)
{ //nns added a new post variable nns for php mysqli
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
}; // lookup
function fill(xx,n) {
switch(n) {
case 1:
$('#namedetails').val(xx); // input id
break;
case 2:
$('#catdetails').val(xx);
break;
}
setTimeout("$('#suggestions').hide();", 200);
};
<td class="absy"><input name="namedetails" type="text" id="namedetails" size="50" value="" onkeyup="lookup(this.value,1);" onblur="fill(this.value,1);"/>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
I just wanna thank everyone who made the effort of answering my question... Still I learned things from your suggestions. Maybe my question was a bit vague to you guys, probably because im still new to jquery & just cameback coding after a longbreak. thanks again...

Categories

Resources