I've been trying to add a tooltip to a button that only shown when certain conditions are met. I'm using uikit#3.0.0-beta.35. According to the documentation, I should return false on beforeshow event.
UIkit.tooltip($element, { pos: 'top' });
$element.on('beforeshow', function(){
return false;
});
if(condition){
UIkit.tooltip($element).show();
}
The problem is that the beforeshow function never fires for some reason. I even tried this syntax mentioned in UIkit documentation:
UIkit.util.on($element, 'beforeshow', function () {
return false;
});
Unfortunately, none of these methods worked for me.
the docs has some mistake, switcher has the same problem. the event is triggered on document not the target. you can use this syntax like this:
UIkit.util.on(document, 'event', '#target-id', callback)
the docs confused me a long time :(
The problem with your code is, that you're trying to listen to an event directly on the element, while the event is triggered on the document - there is an error in the documentation, as they say it's triggered on the element, but it's not.
There is also a fresh false bug report regarding this
var $element = $('#hoverButton');
var $check = $('#tooltipToggle');
UIkit.tooltip($element);
$(document).on('beforeshow', $element, function() {
if (!$check.prop('checked')) return false;
});
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />
<!-- UIkit JS & jQuery (not required by UIKit anymore) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>
<div class="uk-position-center">
<label>show tooltip <input id="tooltipToggle" class="uk-checkbox" type="checkbox"></label><br><br>
<button id="hoverButton" class="uk-button uk-button-default" title="Hello World">Hover</button>
</div>
For Switcher:
$(document).on('show', $('#switcherId'), function(){
console.log('fired');
});
I may need this answer in the future too...
Related
Hello I would like to disable the woocommmerce register page button after one click to avoid multiple clicks.
I have searched the forums and found a bunch of solutions for custom forms and I've tried the following JS code but had no luck. I have a feeling I am setting the wrong selector because I cannot for the life of me figure out what the correct selector for the default register button is.
<script>
function disableButton() {
var btn = document.getElementById('woocommerce-register-nonce');
btn.disabled = true;
btn.innerText = 'Posting...'
}
</script>
I've also tried :
<script>
jQuery('woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').live('click', function (e) {
var self = this;
$(this).attr("disabled", "disabled");
do_something();
setTimeout(function () {
$(self).removeAttr('disabled');
}, 10000);
});
</script>
Some guidance would be very much appreciated.
Update!
Based on Onboardmass's suggestion I have corrected the selector and got it partially working using jquery.
<script>
jQuery('.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').click(function(){
jQuery(this).attr("disabled", "disabled");
});
</script>
The button now gets disabled on click however the issue I'm facing now is that the form does not get submitted.
The issue you're facing is because the selector is incorrect. It should be .woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit.
For anyone else who may need this I was able to figure this one out by reading through the suggestions and other threads I found. Thank you Onboardmass & Martin for the guidance!
The time out function is required for the click to register.
<script>
$(document).ready(function () {
$(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").prop('disabled', true);
}
});
</script>
I can't find any documented way to reload the new "Sign in With Google" button in JavaScript.
I have to remove the script tag and the "button" div then re-add them both.
Does anyone know of a better way to do this?
Have you looked at the JS renderButton method ?
Assuming you have something like this to initialize the library and display the button in JS, you might be able to update locale in the second parameter to renderButton and call the method again to switch languages.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large", locale: "the new locale" }
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</div>
</body>
</html>
Obviously, you'd call renderButton a second time from outside of the window.onload example above, I didn't go as far as showing that in the code sample though.
I have a SPA built on React JS stack. I'm using react-router to navigate through pages and i need to implement Google AdWords on my website.
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = 333333;
w.google_conversion_label = "33333";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
I embed this code in body and i run goog_report_conversion when i click on button which navigates me to another page. Which is unwanted behaviour for SPA.
<Link
className="btn btn-primary"
to="/settings"
onClick={() => goog_report_conversion('site.name/settings')}
>Go to settings</Link>
The problem is that once I do it, it fully reloads my webpage.
I know that this line causes the problem
window.location = url;
But without it script doesn't work.
I also tried to create this event in Google Tag Manager and follow advices given here Google Tag Manager causes full page reload in SPA - React but it didn't help me.
Have anyone faced same problem implementing AdWords in SPA? How did you solve it?
I feel that the implementation example for the asynchronous Remarketing/Conversion snippet is needlessly complex. Here's something that we used in a similar scenario.
First we define a little helper function that we can reuse:
<script type="text/javascript">
function triggerConversion(conversionID, conversionLabel) {
if (typeof(window.google_trackConversion) === "function") {
window.google_trackConversion({
google_conversion_id: conversionID,
google_conversion_label: conversionLabel,
google_remarketing_only: false
});
}
}
</script>
then we include Google's async conversion script (ideally somewhere where it doesn't block rendering):
<script type="text/javascript"
src="http://www.googleadservices.com/pagead/conversion_async.js"
charset="utf-8">
</script>
And now you can track conversions on any element, like so, to adapt your example:
<Link
className="btn btn-primary"
onClick={() => triggerConversion(333333, "33333")}
>Go to settings</Link>
I know this is completely simple, but it's also completely is stumping me on why it isn't working. This gets to the point of rendering the html and showing Hello World with a message below "Welcome to chat" and a button "say hello back" but what it ISN'T doing is then change the message to "work".
I have a .js file which is:
if (Meteor.isClient) {
var message="welcome to chat";
function template(message){
Template.hello.greeting = function () {
return message;
};};
template(message);
Template.hello.events({
'click input' : function () {
template("work ");
}
});
}
and a html follow as shown:
<head>
<title>chat</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<button value="Click">Say Hello Back!</button>
</template>
And it's embarrassingly simple but I just can't figure out what I'm doing wrong. I know I shouldn't re render the page because the whole point of using meteor is for it's live html so what do I do have to do?
I figured out the main problem!
For my html I was using a button class but I should've been using a input type="button" instead!
To make it "reactive" you should use Session that meteor provides. You can simplify your code to make it easier to read and understand.
Session provides a global object on the client that you can use to
store an arbitrary set of key-value pairs. Use it to store things like
the currently selected item in a list.
You set the session variable to "welcome to chat" first. In your click event you would set the Session variable to "work". Then you would set the template to return the value of the Session variable when it changes. Your javascript could look something like this.
if (Meteor.isClient) {
Session.set("message", "welcome to chat");
Template.hello.greeting = function () {
return Session.get("message");
}
Template.hello.events({
'click input' : function () {
Session.set("message", "work");
}
});
}
This is untested but give it a try.
i am not quite sure about what do you mean by "not working". But i am sure you will have to do following.
List item you need to prevent calling default event by the browser.
ex:-
Template.hello.events({
'click input' : function () {
//your code here
return false;
}
});
2 . use meteor methods instead of having template()
There is a bug in jQuery 1.4.2 that makes change event on select-element getting fired twice when using both DOM-event and a jQuery event, and this only on IE7/8.
Here is the test code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".myDropDown").change(function() {
});
});
</script>
</head>
<body>
<select class="myDropDown" onchange="alert('hello');">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
Update:
Another view of the problem, actually this is the real problem we have with our application. Binding a live change event on a selector that isn't even touching the select-element with DOM-event also causes double firing.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".someSelectThatDoesNotExist").live("change", function() {
});
});
</script>
</head>
<body>
<select class="myDropDown" onchange="alert('hello');">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
Ticket to actual bug: http://dev.jquery.com/ticket/6593
This causes alot of trouble for us in our application cause we use both ASP.NET-events mixed with jQuery and once you hook up a change event on any element every select (dropdown) gets this double firing problem.
Is there anyone who knows a way around this in the meantime until this issue is fixed?
I hate to raise this question from the dead but jquery finally fixed this bug in version 1.7 which was recently released.
I had a play around with the bug and there doesn't appear to be any obvious workaround. In my testing I found that the second change event is triggered by jQuery, so I managed to knock together a quick solution that involves removing the DOM 0 event handler and applying it again on a timer that executes immediately when the thread completes:
jQuery(".myDropDown").change(function() {
if ($.browser.msie) {
var dd = $(this)[0],
oc = dd.onchange;
dd.onchange = null;
window.setTimeout(function () {
dd.onchange = oc;
}, 0);
}
});
This works fine for me in IE8, just one "hello" alert appears, although you might want to add an IE check in there. Or not, it probably won't make a difference It definitely needs that check and I've added it to the sample. Here's my fiddle.
The only other solution would be to remove the DOM 0 handler and use the jQuery handler only.
Clone the control and add the clone immediately after the intended one and assign the event, then remove the control:
if ($.browser.msie && (parseInt($.browser.version, 10) == 8 || parseInt($.browser.version, 10) == 7)) {
var btn2 = $(btn).clone();
$(btn).after(btn2);
$(btn).remove();
$(btn2).bind("click", function () {
//your function here
});
}
something like this?
jQuery(".myDropDown").removeAttr('onchange').change(function() {
alert(0);
});
We actually solve the problem another way, since this is specific to IE, ASP.NET and select element, we use the following code:
$(function () {
if ($.browser.msie) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function() {
$('select[onchange]:not(.iefixed)')
.addClass('iefixed')
.each(function () {
var self = $(this), dd = self[0], action = self.attr('onchange');
self.removeAttr('onchange').change(action);
dd.onpropertychange = function() { dd.blur(); };
});
});
}
});
This make sure that the fix is only applied to the select element that has autopostback set to true (onchange) once.
Basically we rely on jQuery to fire the change event for us, but in order for IE to do that, we need to trigger element blur event when onpropertychange happens.