I'm in a lit-html project and using some of the material design elements from Google. paper-xxx.
I'm struggling to get an event fired from the paper-dropdown-menu. I have implemented it like below:
In render()
<paper-dropdown-menu
label="Change position"
id="changePositionDropdown">
<paper-listbox
slot="dropdown-content"
class="dropdown-content"
selected="${this.positionForVideoInPlaylist-1}">
<paper-item value="1">1</paper-item>
<paper-item value="2">2</paper-item>
</paper-listbox>
</paper-dropdown-menu>
firstUpdated()
const changePositionDropdown = document.getElementById("changePositionDropdown");
changePositionDropdown.addEventListener('iron-select', (e)=>{
console.log("Hello there");
});
I'm not entirely sure if iron-select would be the correct event to listen to, but seems like it according to this:
Applications can listen for the iron-select and iron-deselect events
to react when options are selected and deselected
Source: github line: 63
Would it be correct to use iron-select for listening when the selected item changes? And what am I doing wrong?
This is embarassing, forgot about the shadowroot.
This works
firstUpdated(){
const changePositionDropdown = this.shadowRoot.querySelector('#changePositionDropdown');
changePositionDropdown.addEventListener('iron-select', (e)=>{
console.log("Hello there");
});
}
It's also possible to use the #event: handle-fired-event
<paper-dropdown-menu
label="Endre rekkefølge"
id="changePositionDropdown"
#iron-select="${(e)=>{console.log("surprise")}}"> <!-- using the # to handle the vent-->
<paper-listbox
slot="dropdown-content"
class="dropdown-content"
selected="${this.positionForVideoInPlaylist-1}">
<paper-item>1</paper-item>
</paper-listbox>
</paper-dropdown-menu>
Related
I am working on nuxt 3 and I need re render component after API response.
<template>
<AssetsTab
:form-data="formData.assets"
:loader="loader"
#on-submit="submitForm"
/>
</template>
<script setup>
onMounted( async () => {
await getDetails(); //API call
});
</script>
Here once the API call getDetails() successed. I need to rerender AssetsTab component again.
Use a reactive variable like const isApiRespond = ref(false) and make the variable true in the getDetails function when you get the successful API response. Then in the template use v-if like below,
<AssetsTab
v-if=isApiRespond
:form-data="formData.assets"
:loader="loader"
#on-submit="submitForm"
/>
Now if you again want to Re-Render your component then use a key prop in your component. Whenever your props value update, the component will auto-update.
<AssetsTab
v-if=isApiRespond
:key="rerendervalue"
:form-data="formData.assets"
:loader="loader"
#on-submit="submitForm"
/>
In above code whenever your key value update the whole component will auto update.
Here is a VuePlaygroud Link check it's console you will understand.
I've been searching all over and haven't really found an answer to this seemingly very simply problem.
I have an app that has a default template
Router.configure({
layoutTemplate: 'appLayout',
});
<template name="appLayout">
<div id="container">
{{> yield}}
</div>
</template>
Then I have a new route called 'reservations'
Router.route('/reservations',{
name:'reservations',
onAfterAction: function(){
}
});
What I'd like to do is add a class to the default container that uses css transitions to animate background color from white to black.
What I've tried so far is onAfterAction
Router.route('/reservations',{
name:'reservations',
onAfterAction: function(){
$('#container').addClass('black');
}
});
Does nothing, no errors, no anything. So I've tried
Template.reservations.rendered = function () {
setTimeout(function(){
$('#container').addClass('black');
});
};
Which works, but flashes and creates routing problems. You can see the routing issues at crawfish.meteor.com. How can I simply toggle a class after the template is rendered?
You can use the rendered event:
Template.reservations.rendered = function() {
if( ! this.rendered) {
$('#container').addClass('black');
this.rendered = true;
}
};
Note that we check and set rendered. The Template instance then has a 'rendered' variable that we use to prevent re-triggering on re-render (which can run multiple times)
I've followed the samples. I added a _PjaxLayout:
<title>#ViewBag.Title</title>
#RenderBody()
Modified my _Layout:
<div id="shell">
#RenderBody()
</div>
<script type="text/javascript">
$(function () {
// pjax
$.pjax.defaults.timeout = 5000;
$('a').pjax('#shell');
})
</script>
Updated ViewStart:
#{
if (Request.Headers["X-PJAX"] != null) {
Layout = "~/Views/Shared/_PjaxLayout.cshtml";
} else {
Layout = "~/Views/Shared/_Layout.cshtml";
}
}
Yet every time I click on an 'a' tag, the pjax code doesn't get called. It's as if the selector isn't working when I set up pjax. What am I doing wrong?
UPDATE:
If I do this:
$('document').ready(function () {
$('a').pjax({
container: '#shell',
timeout: 5000
});
});
I see the pjax code getting hit and the Request headers get updated, and the new content loads on the page, but the styling and layout get really messed up and duplicated...
UPDATE:
Inspecting the DOM after this craziness happens reveals that the new page content is getting loaded directly into the anchor that I click, instead of into the element with id #shell. WTF?
You are using a legacy syntax, the new pjax uses the following:
$(document).pjax('a', '#shell', { fragment: '#shell' });
Also I am not familiar with the language you use, but in order to make pjax happen there has to be an HTML element with the id shell in your ViewStart.
As I am not sure about the syntax in that language, try something similar to this for testing:
#{
if (Request.Headers["X-PJAX"] != null) {
echo "<ul id="shell"> pjaaxxx </ul>"; // Would work in php, update syntax
} else {
Layout = "~/Views/Shared/_Layout.cshtml";
}
}
I am not seeing that syntax as valid in the PJax documentation.
Are you sure you didn't mean $(document).pjax('a',{});?
$.pjax immediately executes from what I can tell.
I am trying to integrate Stripe "Pay with Card" checkout into backbone Node environment. On the server side, I am using Stripe Node code - that part works good. However, on the client side, I am unable to capture the event.
I would like to capture the submit event from the Stripe popup to call "paymentcharge" method in the view.
Here is my code:
<!-- Stripe Payments Form Template -->
<form id="stripepaymentform" class="paymentformclass">
<script
src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
data-key="pk_test_xxxxxxxxxxxxx"
data-amount="0299"
data-name="MyDemo"
data-description="charge for something"
data-image="assets\ico\icon-72.png">
</script>
</form>
Backbone View Class
myprog.PaymentPanelView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
$(this.el).html(this.template());
return this;
},
events : {
"submit" : "paymentcharge"
},
paymentcharge : function( event) {
this.model.set({stripeToken: stripeToken});
}
});
Backbone Model Class
var PaymentChargeModel = Backbone.Model.extend({
url: function(){
return '/api/paymentcharge';
},
defaults: {
}
})
Setup/Call the View from header menu event
if (!this.paymentPanelView) {
this.paymentPanelView = new PaymentPanelView({model: new PaymentChargeModel()});
}
$('#content').html(this.paymentPanelView.el);
this.paymentPanelView.delegateEvents();
this.selectMenuItem('payment-menu');
I think the problem has to do with your View's el and the event you are listening for.
You never explicitly define your View's el, which means it gets initialized to a detached <div> element. You then use your template to fill that <div> with the form element from the template. Even though your <div> is detached, you get to see the content, because you add the content of you el to #content using jquery.
I think the problem is that you are listening for a submit event on the <div> in your el, not the contained <form>. Try changing your events hash to this:
events: {
'submit form#stripepaymentform': 'paymentcharge'
}
Basically, listen for events on the contained element like in jquery's .on. You can also go right to a button click, something like this:
'click #mysubmitbutton': 'paymentcharge'
Hope this helps!
Is there a nice Sencha-like jQuery Mobile solution for Alerts and Confirmation dialogs?
Yes, the plugin is nice. However, if you don't need the full functionality, it's still much lighter in weight to roll your own simple dialogs. I use this:
<div data-role="dialog" id="sure" data-title="Are you sure?">
<div data-role="content">
<h3 class="sure-1">???</h3>
<p class="sure-2">???</p>
Yes
No
</div>
</div>
And this:
function areYouSure(text1, text2, button, callback) {
$("#sure .sure-1").text(text1);
$("#sure .sure-2").text(text2);
$("#sure .sure-do").text(button).on("click.sure", function() {
callback();
$(this).off("click.sure");
});
$.mobile.changePage("#sure");
}
You can use these wherever you need the confirmation dialog:
areYouSure("Are you sure?", "---description---", "Exit", function() {
// user has confirmed, do stuff
});
This plugin for jQM will style the confirmation box with jQM styling
http://dev.jtsage.com/jQM-SimpleDialog/
EDIT : This plugin has now been supserseeded by SimpleDialog2 which can be found here:
http://dev.jtsage.com/jQM-SimpleDialog/demos2/
Excellent code # Peter, but not to be generating consecutive events, it might be better to use unbind (), like this:
function areYouSure(text1, text2, button, callback) {
$("#sure .sure-1").text(text1);
$("#sure .sure-2").text(text2);
$("#sure .sure-do").text(button).unbind("click.sure").on("click.sure", function() {
callback(false);
$(this).off("click.sure");
});
$.mobile.changePage("#sure");
}
Thanks!
I had similar problem. I wanted to have easy to use function like standard confirm().
Since dialogs are deprecated in jquery mobile 1.4 (documentation), I decided to create my own fiddle:
function confirmDialog(text, callback) {
var popupDialogId = 'popupDialog';
$('<div data-role="popup" id="' + popupDialogId + '" data-confirmed="no" data-transition="pop" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:500px;"> \
<div data-role="header" data-theme="a">\
<h1>Question</h1>\
</div>\
<div role="main" class="ui-content">\
<h3 class="ui-title">' + text + '</h3>\
Yes\
No\
</div>\
</div>')
.appendTo($.mobile.pageContainer);
var popupDialogObj = $('#' + popupDialogId);
popupDialogObj.trigger('create');
popupDialogObj.popup({
afterclose: function (event, ui) {
popupDialogObj.find(".optionConfirm").first().off('click');
var isConfirmed = popupDialogObj.attr('data-confirmed') === 'yes' ? true : false;
$(event.target).remove();
if (isConfirmed && callback) {
callback();
}
}
});
popupDialogObj.popup('open');
popupDialogObj.find(".optionConfirm").first().on('click', function () {
popupDialogObj.attr('data-confirmed', 'yes');
});
}
I noticed strange behavior, when redirecting/clearing window was done on "Yes" button click. It started working in afterClose event, so that's why it's a bit complicated.
Here is a jsfiddle demo
This plugin
craftpip/jquery-confirm
was designed for mobile initially, is based on the bootstrap3 framework.
Supports alerts, confirms, modals, dialogs, and many options.
Simple to use.
$.alert({
title: 'title here',
content: 'content here',
confirm: function(){
//on confirm
},
cancel: function(){
// on cancel
}
})
Supports ajax loading, CSS3 animations, Responsive, etc.
[EDIT]
Detailed documentation can be found here
Features list:
Themes (android themes included)
Ajax loading content.
CSS3 animations (2D & 3D animations)
Animation Bounce options
Auto close (triggers a action after timeout)
Icons
background dismiss (closes the modal on clicking outside the modal)
Keyboard actions (ENTER/SPACE triggers confirm, ESC triggers cancel)
Detailed API for programmically changing content in modal.
I'm actively developing the plugin, please do suggest improvements and features.
I haven't seen anything with alerts as I think it uses the native look and feel for them. You should be able to customize them through another jQuery plugin and/or CSS.
Here is a jQuery Example
UPDATE:
Well the link is a 404 now and jQM 1.2 is out and offers popups:
http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html
Try,
if (confirm("Are you sure?"))
{
/*code to execute when 'Ok' bttn selected*/
}