I have a component which works fine using AJAX and mootools. Currently the view.raw.php only has one function in it which is display. I've been trying to create other functions within the component to use from AJAX but I can't make it work.
I thought that the ajax call is:
url: 'index.php?option=com_optical_database&view=gender&task=hello&format=raw',
with a public function within the component called hello:
public function hello(){
but it ignores this and goes to the display function every time. Is there a way of avoiding this?
Look at the place where the GET parameter task is used.
In Joomla there is usually a switch statement for this, and when you want to define a new task, you first need to add a new case in this switch.
Related
We are migrating old JavaScript projects into Angular 10.
There are many JavaScript functions calling from body onload. What is the best way to call such functions in Angular 10? Please help.
In Angular 10 you can call a javascript function on body load using ngOnInit() function
call the the function inside the ngOnInit() function .
like this
export class DashboardComponent implements OnInit {
constructor() {}
ngOnInit(): void {
this.checkNotifiactionToken(); //this is your custom function which is you want to call on body load
}
}
There should be a specific approach, when you are migrating old js body onload function. And you have multiple functions as well.
To keep it in mind angular component solution, I would suggest 1st to find which are the function required for which components.
let's suppose you have five function are in body onload.
One function required before even loading the app to get some configuration, move it to app initializer, you need to setup APP_INITIALIZER in angular.
Other two function required to load the 1st paint or home page. Move them to their respective components or you can use route resolver, if you have routing or ngOninit
The key point here to for better performance, in Angular we have multiple way to do it. You need to find that match where things required and fit.
I have a category dropdown(in parent js) whose subcategory fills on parent page load as well on dropdown change . subcategory will fill from child js method .I have to create child js instance twice . on page load and on dropdown down change.
I dont want to create object in document.ready or as global variable
where should i create child class object exactly so that it can be used all over ?
problem is that jquery not letting me call
$.getScript('../Reports/assets/js/BookingReports.js'
twice as it send error that child class name(BookingReports) identifier as already created .
class ReportsInterface extends ReportBase {
constructor() {
super();
this.fillSubCategory;
}
init() {
this.Categories();
}
Categories() {
//fill category
this.FillSubCategory();
}
FillSubCategory() {
if(!this.fillSubCategory) {
$.getScript(
'../Reports/assets/js/BookingReports.js',
function() {
this.fillSubCategory=new FillSubCategory("1");
obj.GetSubCategory();
}
)
}
}
}
$(document).ready(function() {
$("#ddlcategory").on('change', function() {
(new ReportsInterface()).showReportBooking();
})
})
i also tried to save object in parent class property but .cannot use it as object later on. how can I call child class method twice without creating any global variable ?
If you are using ES6, I would recommend not using JQuery to import separate files but rather using the ES6 import/export syntax.
I imagine the issue is that since $.getScript makes an http request to redownload the script file, it is actually running the script file twice (one for each download); in the second download, it will run into the naming conflict. ES6 import/exports would solve this issue for you, preventing BookingReport from being redefined.
You should be aware of a couple of things however:
(1) Using your JQuery setup, you get the benefit of lazy loading. To get the same in ES6, you'd have to use the slightly more complicated dynamic imports (see that same link above) -- for this app, however, it doesn't really look like you'd need that.
(2) You might want to familiarize yourself with a bundler like Webpack as this will do ahead-of-time importing and leave you with a single file to download rather than having to ping-pong back and forth from the server as you try to download all of the modularized files.
I have an external library (http://support.video.limelight.com/support/docs/player_api/) that calls the function limelightPlayerCallback() every time something with the player changes.
I want to be able to trigger actions in my Angular controller every time the library calls that function. When I declare the function in my HTML, everything works as expected.
function limelightPlayerCallback (playerId, eventName, data){
console.log(playerId);
console.log(eventName);
console.log(data);
}
Gets me
player1
onPlayerLoad
null
And also allows me to access the LimelightPlayer object and run queries and commands on it like.
LimelightPlayer.doGetPlayheadPositionInMilliseconds()
LimelightPlayer.doLoadMedia()
But once I start trying to declare the limelightPlayerCallback() function in my controller, or access the LimelightPlayer object, the function is never called so I am not able to interact with the player at all.
What is the best way to go about interfacing with a library that works like this in Angular?
I am using marionette in my application. I am showing ItemView through regions like in the following.
var productInfoViewObj=new productInfoView.ProductInfoView({model:tagInformationModel.tagInformationModelObj});
exports.MyApp.bodyContainer.show(productInfoViewObj);
This is the code, I written inside view.
exports.ProductInfoView=Backbone.Marionette.ItemView.extend({
domInfo:{
mainTemplateId:"tagProductListTpl",
tableTemplateId:"taginfoViewTpl",
tableContentDiv:"taginfoViewDiv",
//tad Info
tagInfoTabId:"tagInfoBtn",
productInfoTabId:"productInfoBtn"
},
template:function(){
return commonFunctions.templateCompilation("tagProductListTpl","");
},
onRender:function(){
console.log(document.getElementById("productInfoBtn"));
}
});
I am passing templateId and data as arguments to commonFunctions.templateCompilation. It will compile and return compiled string. That compiled result passing to template.
As per my assumption, after completion of template, onRender function will trigger. What I mean before onRender, dom will available whatever we are templating using template.
But I am getting null inside onRender function.
I want a callback, it should trigger after template available in dom. so I can access elements whatever I templated using template.
I can do one thing, whatever I written inside onRender, I can setup time like in the following way.
onRender:function(){
setTimeout(function(){console.log(document.getElementById("productInfoBtn"));},1000);
}
If I set time, working fine but it's not correct way to implement.
can anyone help me.
Thanks.
It's resolved, I have to use onShow instead of onRender function. Now it's working fine.
i am trying add internationalization-abilities to my website.
I have written my own I18n.js which uses translation-objects out of the DS.store instead of its own (so there is a translation model and Ember preloads it on Application-start).
To get my translations into the Templates i have written this handlebars-helper
Ember.Handlebars.registerHelper('i18n', function(key) {
return Application.I18n.t(key);
});
so i could easily use it like:
{{i18n example_key}}
So far, everything works just perfect.
But the translations visible on screen are not bind to its translation-models.
If i change a translation in the administration-page which is places there too, i have to reload the page.
is it possible to add bindings between the helper and the translation model the helper have to display?
Thanks
Use registerBoundHelper instead of registerHelper. I don't even think registerHelper is part of the public API.
What does Application.I18n look like exactly? In order to make the {{i18n}} helper refresh its content when something changes, it needs to observe something that is observable.
Ember.Handlebars.helper is useful if you pass an object with observable properties (see http://emberjs.com/guides/templates/writing-helpers/#toc_dependencies). But if you only pass a key as a string, you'll have to set up the binding yourself in some way.