I updated my ionic3 to ionic4 and hyperlinks aren't working anymore. So I tried to set a new ClickEvent for them. Unfortunately the click event doesn't work. The content of my event is never reached even If I click some link. I don't get why it's not working.
ngAfterViewChecked() {
if (!this._element) return;
let arrUrls = this._element.nativeElement.querySelectorAll('a');
console.log("arrUrls.length:", arrUrls.length); // Reached and correct
console.log("arrUrls:", arrUrls); // Reached and correct
this.setEventListener(arrUrls);
}
private setEventListener(arrUrls)
{
arrUrls.forEach((objUrl) =>
{
console.log('5412212112121212'); // Reached
console.log(objUrl); // Reached and correct
// Listen for a click event on each hyperlink found
objUrl.addEventListener('click', (event) =>
{
//NOT REACHED
event.preventDefault();
alert('7213983728912798312231'); // Isn't reached
//this._link = event.target.href;
}, false);
});
}
You don't really need to get so detailed and write this all yourself.
Other people have already solved the problem such as the LinkifyJS project.
There is an angular compatible wrapper for it:
https://www.npmjs.com/package/ngx-linkifyjs
Which, once you have done the standard setup process you can use it as either a pipe:
<span [innerHTML]="'Linkify the following URL: https://github.com/anthonynahas/ngx-linkifyjs and share it <3' | linkify"></span>
Or as a service:
import {NgxLinkifyjsService, Link, LinkType, NgxLinkifyOptions} from 'ngx-linkifyjs';
constructor(public linkifyService: NgxLinkifyjsService) {
const options: NgxLinkifyOptions =
{
className: 'linkifiedYES',
target : {
url : '_self'
}
};
this.linkifyService.linkify('For help with GitHub.com, please email support#github.com');
// result 1 --> see below
this.linkifyService.linkify('For help with GitHub.com, please email support#github.com', options);
// result 2 --> see below
}
}
Related
I am adding some custom html to a resource timeline if there are no events for that week. It works on initial page load, but when next or prev buttons are clicked, it needs to be initiated again. I have found the proper way to do this in version 6, is to use datesSet.
However, I can't figure out how to call resourceLandDidMount whenever datesSet is fired. Here is the function I need to run with dateSet:
resourceLaneDidMount : function(arg){
if(arg.el.classList.contains('fc-timeline-lane')){
var theElement = arg.el.querySelectorAll('.fc-timeline-lane-frame > .fc-timeline-events')[0]
setTimeout(function(){
if(theElement.querySelectorAll('.fc-timeline-event-harness').length > 0) {
console.log('has event harness class');
} else {
console.log('has no event harness class');
}
})
}
},
I'm trying to add some functions in the POS buttons, specifically the button that shows up like "Validate". To test if the guide in this link https://odoo-development.readthedocs.io/en/latest/dev/pos/gui.html works, I'm just adding a console.log like the following:
odoo.define('my_module.js_file', function (require) {
"use strict";
var screens = require('point_of_sale.screens');
screens.PaymentScreenWidget.include({
init: function(parent, options) {
this._super(parent, options);
//My console log message
console.log('Hello world!')
this.pos.on('updateDebtHistory', function(partner_ids){
this.update_debt_history(partner_ids);
}, this);
},
});
But the message only shows up once when the POS ends loading the data and not when I push the button. What am I doing wrong here?
To add your code to the Validate button you will need to modify the payment screen widget via the include method (You already did that).
If you inspect the button from the browser you will find that it has a class next which is used to bind an event handler to the click JavaScript event.
Example:
var screens = require('point_of_sale.screens');
var PaymentScreenWidget = screens.PaymentScreenWidget;
PaymentScreenWidget.include({
validate_order: function(force_validation) {
console.log('Hello world!');
this._super(force_validation);
},
});
Ok, so I need some insight into working with History.js and jQuery.
I have it set up and working (just not quite as you'd expect).
What I have is as follows:
$(function() {
var History = window.History;
if ( !History.enabled ) {
return false;
}
// Capture all the links to push their url to the history stack and trigger the StateChange Event
$('.ajax-link').click(function(e) {
e.preventDefault();
var url = this.href; //Tells us which page to load
var id = $(this).data('passid'); //Pass ID -- the ID in which to save in our state object
e.preventDefault();
console.log('url: '+url+' id:'+id);
History.pushState({ 'passid' : id }, $(this).text(), url);
});
History.Adapter.bind(window, 'statechange', function() {
console.log('state changed');
var State = History.getState(),
id = State.data.editid; //the ID passed, if available
$.get(State.url,
{ id: State.data.passid },
function(response) {
$('#subContent').fadeOut(200, function(){
var newContent = $(response).find('#subContent').html();
$('#subContent').html(newContent);
var scripts = $('script');
scripts.each(function(i) {
jQuery.globalEval($(this).text());
});
$('#subContent').fadeIn(200);
});
});
});
}); //end dom ready
It works as you'd expect as far as changing the url, passing the ID, changing the content. My question is this:
If I press back/forward on my browser a couple times the subContent section will basically fadeIn/fadeOut multiple times.
Any insight is appreciated. Thanks
===================================================
Edit: The problem was in my calling all of my <script> and Eval them on each statechange. By adding a class="no-reload" to the history controlling script tag I was able to do:
var scripts = $('script').not('.no-reload');
This got rid of the problem and it now works as intended. Figure I will leave this here in case anyone else runs into the same issue as I did.
The problem was in my calling of all of my <script> and Eval them on each statechange. By adding a class="no-reload" to the history controlling script tag I was able to do:
var scripts = $('script').not('.no-reload');
This got rid of the problem and it now works as intended. Figure I will leave this here in case anyone else runs into the same issue as I did.
I'm having an issue where I want to call GET on an endpoint, and based on the result of that, either render a modal or follow a link.
Currently, when I get the click event, I disable the default behavior of the anchor tag (I don't want to redirect before I check the result.).
I do a GET on the endpoint and throw an event from the callback if one of the return parameters is true. This event has a listener on it that
will trigger rendering and displaying the modal.
The issue with this methodology is: The GET callback doesn't allow me to redirect to the link unless I disable popup blockers and I would like my
users to have a good user experience.
I'm debating between a polling strategy (non-performant, not always accurate) or having the click event open a window that will either follow the anchor tag
or render the modal.
Would appreciate any other ideas or suggestions. Thanks!
Template is defined as follows:
var template = _.template('\
<a href="<%-linkUrl%>?fromHome=true" draggable="false" data-type="app-button" data-se="app-button" target="_blank" \
class="app-button">\
<img draggable="false" src="<%-logoUrl%>" class="logo">\
<span data-action="show-settings" class="icon-button <%-showIcon%>">\
<span class="icon icon-settings-dark"></span>\
</span>\
</a>\
<p class="app-button-name" data-se="app-button-name"><%-label%></p>\
');
Events are defined as follows:
events: function () {
var events = {};
events['click [data-type=app-button]'] = '_firstLoginSettings';
return events;
},
Now here's the function itself being called.
_firstLoginSettings: function (e) {
if (this.model.get('__notVerified__')) {
this.state.trigger(Events.SHOW_CONFIRMATION, this.model);
} else {
e.preventDefault();
e.stopPropagation();
this.state.trigger(Events.CHECK_VPN_DIALOG, this.model);
}
},
I have a listener on my main router.
this.listenTo(this.state, Events.CHECK_VPN_DIALOG, this._checkVpnDialog);
And here's the rest of the router code:
_checkVpnDialog: function (appLink, appLinkSettings) {
var self = this;
var vpnSettings = new VpnSettings({
appLink: appLink,
'__appInstanceId__' : appLink.get('__appInstanceId__')
});
vpnSettings.fetch({}).done(_.bind(function(vpnSettings) {
if (vpnSettings.checkVpn) {
self.state.trigger(Events.SHOW_VPN_DIALOG, appLink);
} else {
appLink._firstLoginSettings();
//This doesn't work because it's not associated with a user action, so it won't let me open this window. This isn't part of the click event loop any more.
var linkUrlTemplate = _.template('<%-linkUrl%>?fromHome=true');
window.open(linkUrlTemplate({linkUrl: appLink.get('__linkUrl__')}));
}
}));
},
_showVpnDialog: function (appLink, appLinkSettings) {
this.credsDialog && this.credsDialog.remove();
if (!appLinkSettings) {
appLinkSettings = new AppLinkSettings({
id: appLink.get('id'),
'__tab__': appLink.get('__tab__')
});
appLinkSettings.fetch().done(_.bind(this._renderVpnDialog, this, appLink, appLinkSettings));
} else {
this._renderVpnDialog(appLink, appLinkSettings);
}
},
_renderVpnDialog: function (appLink, appLinkSettings) {
if (appLink.get('__needsVpn__')) {
this.vpnDialog = new VpnDialog({
model: appLink,
appLink: appLink,
settings: this.settings,
state: this.state
});
this.vpnDialog.render();
}
},
So what I did instead was to open a new window with the click, and then change the location of the window so it would either go to the new location or close itself. Kind of a hacky solution, but it works!
I want an Action event (on="") to trigger when there is a transition to a new Route.
I've seen the list of Action event handlers and closest I could find is attaching the action to the largest HTML element on the page and triggering it with 'Mousemove". This is a terribly flawed away of going about what I want to do.
So just to draw it out.
<div {{action 'displayEitherHtml1or2'}} class="largestDOMelement">
{{#if showHtml1}}
// html 1 inside
{{/if}}
{{#if showHtml2}}
// html 2 inside
{{/if}}
</div>
'/objects' is a list of objects and clicking one leads to 'object/somenumber'. The action should automatically trigger when I enter the 'object/somenumber' page.
UPDATE: I've taken the contents from the previous update and dumped them into my DocRoute, but nothing it being triggered when I transition to 'doc' through {{#link-to 'doc' this.docID}} {{docTitle}}{{/link-to}}
VpcYeoman.DocRoute = Ember.Route.extend(VpcYeoman.Authenticated,{
toggleLetterSwitch: false,
togglePermitSwitch: false,
activate: function () {
var docTemplateID = this.get('docTemplateID');
if ( docTemplateID == 2) {
this.set('toggleLetterSwitch', true);
this.set('togglePermitSwitch', false);
console.log('docTemplateID equals 2');
} else {
this.set('toggleLetterSwitch', false);
this.set('togglePermitSwitch', true);
}
}
});
UPDATE DOS: setDocID is set in the DocsController to 1. Here's the whole thing.
VpcYeoman.DocsController = Ember.ArrayController.extend({
tempDocId: 1,
actions: {
addDoc: function (params) {
var docTitle = this.get('docTitle');
var docTemplateID = 1;
var docTemplateID = this.get('tempDocId');
console.log(this.get('tempDocId'));
var store = this.store;
var current_object = this;
var doc = current_object.store.createRecord('doc', {
docTitle:docTitle,
docTemplateID:docTemplateID
});
doc.save();
return true;
},
setDocId: function (param) {
this.set('tempDocId', param);
console.log(this.get('tempDocId'))
},
}
});
As #fanta commented, it seems like you're looking for the activate hook within your Route. This gets called when you enter the route where you define it. If you want to call it on every transition, you might consider defining a base route for your application and extending that instead of Em.Route:
App.BaseRoute = Em.Route.extend(
activate: function () {
// Do your thing
}
);
App.YourRoutes = App.BaseRoute.extend()
It's possible that there's a more appropriate place/time to do this, but without knowing quite what your action does, this is probably the best guess.
ETA: Looking at your edit, you won't want all your routes to extend App.BaseRoute the way I did it above; you should probably just include that activate hook explicitly in the routes which need it.