Anyone knows a way to listen for clicks on magento tabs with javascript on the backend, say you want to do something everytime someone clicks a tab on the edit customer page. adminhtml/tabs.js has this:
tabMouseClick : function(event) {
var tab = Event.findElement(event, 'a');
// go directly to specified url or switch tab
if ((tab.href.indexOf('#') != tab.href.length-1)
&& !(Element.hasClassName(tab, 'ajax'))
) {
location.href = tab.href;
}
else {
this.showTabContent(tab);
}
Event.stop(event);
},
But no use, anyone has any idea? I also tried using standard prototype js observer:
Event.observe("product_info_tabs", "click", function ()
{ alert(1);
});
Did not do anything either. The solution should not modify the core, since this would add many problems with upgrades and maybe future magento versions.
To listen for clicks on Magento tabs (varienTabs) in the backend, you only need to add your custom observers to the existing ones. Using your example ("edit customer page" in backend) this would be:
var myTabs = $$("#customer_info_tabs li a.tab-item-link");
for (var i = 0; i < myTabs.length; i++) {
Event.observe(myTabs[i], "click", function (event) {
var tab = Event.findElement(event, "a");
// insert your custom code here
alert(tab.id);
Event.stop(event);
});
}
To implement custom observers without changing the core files (breaking upgradability), you could override the appropriate admin controller action.
For example, override Mage_Adminhtml_CustomerController::editAction():
<!-- app/code/local/My/Adminhtml/etc/config.xml -->
<config>
<modules>
<My_Adminhtml>
<version>0.1.0</version>
</My_Adminhtml>
</modules>
<admin>
<routers>
<adminhtml>
<args>
<modules>
<My_Adminhtml before="Mage_Adminhtml">My_Adminhtml</My_Adminhtml>
</modules>
</args>
</adminhtml>
</routers>
</admin>
</config>
Next, define your custom admin controller:
// app/code/local/My/Adminhtml/controllers/CustomerController.php
require 'Mage/Adminhtml/controllers/CustomerController.php';
class My_Adminhtml_CustomerController extends Mage_Adminhtml_CustomerController
{
public editAction()
{
// copy of Mage_Adminhtml_CustomerController::editAction() code here
}
}
Finally, in the overridden action, create an additional text block containing your custom observer script and append that block to the layout. For example at the end of editAction insert something like this:
:
$this->loadLayout();
$oBlock = $this->getLayout()->createBlock('core/text')->setText('
<script type="text/javascript">
var myTabs = $$("#customer_info_tabs li a.tab-item-link");
for (var i = 0; i < myTabs.length; i++) {
Event.observe(myTabs[i], "click", function (event) {
var tab = Event.findElement(event, "a");
alert(tab.id);
Event.stop(event);
});
}
</script>
');
$this->getLayout()->getBlock('left')->append($oBlock);
$this->renderLayout();
:
Old answer, but since I am here:
Magento internals fire an event when teh tab is shown.
You can simply hook into that event.
varienGlobalEvents.attachEventHandler('showTab', function(arg){
console.log(arg.tab);
});
Also not needed to inject via overriding controller.
Just add in yoru own custom layout directive, and load js accordingly.
Related
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);
},
});
i would like do a simple fireEvent("Refresh","")
from javascript outside of consumeEvent function.
as i want to be able to do a setinterval that would fireEvent "Refresh"
and put the event name inside a table 'do refresh query' in the web reporting
so eventually the table will refresh itself every 1 minute for example.
(i want to be able to refresh every table i have in the dashboard separately with different time interval)
the problem is that i'm able to do fireEvent only from the consumeEvent function
and then use context.fireEvent("Refresh","") but this can happen every time i have a different event occurring from the dashboard and it's not good enough
Event could be thrown anywhere with context's event manager instance:
<script type="text/javascript">
context.eventMgr().fireExternalEvent("eventName", eventValue)
</script>
Also you can fire events if you have access to ic3Reporting instance:
for example:
var ic3Application = ic3.startReport(options);
In that case you can fire app events in such way :
<script type="text/javascript">
//get ic3application instance
var ic3Application = ic3.startReport(options);
setInterval(function(){
ic3Application.fireEvent('table1-refresh', {})
},60000)
setInterval(function(){
ic3Application.fireEvent('table2-refresh', {})
},120000)
</script>
Then just set event names to "do Refresh Query" tables' event.
UPDATE
Version of script inside ic3report.html
<script type="text/javascript">
var ic3root = "../"
var ic3rootLocal = "../"
var options = {
root: ic3root,
rootLocal: ic3rootLocal,
callback: function () {
$('#intro').remove();
var options = {
<!-- ic3-start-report-options (DO NOT REMOVE - USED TO GENERATE FILES) -->
};
var ic3Application = ic3.startReport(options);
setInterval(function () {
ic3Application.fireEvent('ic3-table', {})
},20000)
};
ic3ready(options);
</script>
UPDATE
Here is a report with an example.
I'm injecting all my js code to front page, but it needs pictures for ui and stuff, that can be imported only with the help of chrome.extension.getUrl and can be called only from content-script, so I've found tons of advices how to pass data to content page, and nothing of about how pass data back, is it possible at all?
My code now looks like this:
my js code, that will be injected with other code:
var Content = {};
$(document).contentReady = function(content) {
Content = content;
$(document).ready(function () {/*cool stuff here, that require content*/});
}
var event = new CustomEvent('LoadContent');
window.dispatchEvent(event);
content-script:
document.querySelector('head').appendChild(jsCode);
window.addEventListener("LoadContent", function(evt) {
var content =
{
data: "url(" + chrome.extension.getURL('content.smth') + ")"
};
document.contentReady(content);
}, false);
And, obviously, I get document.contentReady is not a function
But declaring function in document was the only(!) advice of about how to pass data back from content-script after about 2 hours of googling.
Nothing stops you from making the CustomEvent-based communication bi-directional, and it can pass data with detail property:
// Page script
window.addEventListener('RecieveContent', function(evt) {
// do something cool with evt.detail
});
var event = new CustomEvent('LoadContent');
window.dispatchEvent(event);
// Content script
window.addEventListener('LoadContent', function(evt) {
content = /* ... */
var event = new CustomEvent('RecieveContent', {detail: content});
window.dispatchEvent(event);
});
A more in-depth answer can be found here.
However, you should ask yourself whether you even need the page-level script to query for data, since you fully control when it's injected. You can use uni-directional approach after you make sure the code has executed:
// Page script
window.addEventListener('RecieveContent', function(evt) {
// do something cool with evt.detail
});
// Content script
jsCode.onload = function() {
// This fires after the page script finishes executing
content = /* ... */
var event = new CustomEvent('RecieveContent', {detail: content});
window.dispatchEvent(event);
}
document.querySelector('head').appendChild(jsCode);
You can pass JS data to the page by creating a new script tag. For example:
function injectScript(code) {
var body = document.getElementsByTagName('body')[0];
var s = document.createElement('script');
s.innerHTML = code;
body.appendChild(s);
}
injectScript('var foo = 2;');
So for your particular example, you should be able to do:
injectScript('document.contentReady({data: url(' + blahblah + '})');
Not pretty (what is when you're working with overwriting content scripts?) but it works.
Content Scripts do not share window object with normal scripts on the page. Both of them work on different context.
In your case, you are registering an event listener on window and listening for the event on other context (window). Hence, your event listener will never be called.
However, there is one alternative approach I can see to communicate between content script and normal script is by using MutationObserver.
Idea
Define a node with some Id under which you will create subnodes corresponding to an event.
Register Mustation Observer in your script.
From content script, add the nodes with data as data-* api.
Implementation Example
Content Script
var submitEvent = function(category, action, label) {
var eventObserverPlaceholder = document.getElementById('events-observer-placeholder'),
$eventEl = $('<span></span>').attr({
'data-category': category,
'data-action': action,
'data-label': label
});
eventObserverPlaceholder.appendChild($eventEl.get(0));
};
Normal Script for registering Mutation Observer:
RQ.Methods.addObserverForEvents = function(targetNode) {
var observer = new MutationObserver(RQ.Methods.handleMutationList);
// Notify me when a new child is added
var observerConfig = {
attributes: false,
childList: true,
characterData: false
};
observer.observe(targetNode, observerConfig);
return observer;
};
RQ.mutationObserver = RQ.Methods.addObserverForEvents(document.getElementById('events-observer-placeholder'));
Links
https://davidwalsh.name/mutationobserver-api
https://developer.mozilla.org/en/docs/Web/API/MutationObserver
Working Example:
I have used the same approach in Requestly Chrome Extension for submitting events to Google Analytics.
Content Script: https://github.com/requestly/chrome-extension/blob/master/src/Shared/utils.js#L26
Normal Script: https://github.com/requestly/web/blob/gh-pages/js/scripts/tracker.js#L35
I'm using a plugin which is called Sidr to create a Facebook like sidebar. It intialized with:
$('#menu_trigger').sidr({
name: 'sidr-right',
side: 'right'
});
Problem is, that I only want to have this effect at a specific viewport size. I know that many jQuery plugins come with a something like a destroy argument to unload the script. But this plugin does not.
Does anyone know how I could unbind this function off #menu_trigger when a specific browsersize is triggered.
Like:
enquire.register("screen and (max-width:560px)", {
$('#menu_trigger').sidr({
// unload, unbind
});
}
Thanks
http://jsbin.com/bemimu/8/edit
You can use unbind and pass in the plugin reference to the selected elements, then check the window size in JavaScript. $.sidr('close', 'sidr-right');
JS:
function clickForSidr() {
var ww = document.body.clientWidth;
if(ww < 560){
if(sidrIsOpen){
$.sidr('close', 'sidr-right');
}else {
$.sidr('open', 'sidr-right');
}
sidrIsOpen = !sidrIsOpen;
}
};
var sidrIsOpen = false;
$('.unbindme').on('click',function(){
clickForSidr();
});
MARKUP:
<div class="unbindme" >unbindme</div>
i have some links in a web page ,what i want to do :
Trigger click event on every link
When the page of every link is loaded , do something with page's DOM(fillProducts here)
What i have tried :
function start(){
$('.category a').each(function(i){
$.when($(this).trigger('click')).done(function() {
fillProducts() ;
});
})
}
Thanks
What you want to do is much more complicated than you seem to be giving it credit for. If you could scrape webpages, including AJAX content, in 7 lines of js in the console of a web browser you'd put Google out of business.
I'm guessing at what you want a bit, but I think you want to look at using a headless browser, e.g. PhantomJs. You'll then be able to scrape the target pages and write the results to a JSON file (other formats exist) and use that to fillProducts - whatever that does.
Also, are you stealing data from someone else's website? Cause that isn't cool.
Here's a solution that may work for you if they are sending their ajax requests using jQuery. If they aren't you're going to need to get devilishly hacky to accomplish what you're asking (eg overriding the XMLHttpRequest object and creating a global observer queue for ajax requests). As you haven't specified how they're sending the ajax request I hope this approach works for you.
$.ajaxSetup({
complete: function(jQXHR) {
if(interested)
//do your work
}
});
The code below will click a link, wait for the ajax request to be sent and be completed, run you fillProducts function and then click the next link. Adapting it to run all the clicks wouldn't be difficult
function start(){
var links = $('.category a');
var i = 0;
var done = function() {
$.ajaxSetup({
complete: $.noop//remove your handler
});
}
var clickNext = function() {
$(links.get(i++)).click();//click current link then increment i
}
$.ajaxSetup({
complete: function(jQXHR) {
if(i < links.length) {
fillProducts();
clickNext();
} else {
done();
}
}
});
clickNext();
}
If this doesn't work for you try hooking into the other jqXHR events before hacking up the site too much.
Edit here's a more reliable method in case they override the complete setting
(function() {
var $ajax = $.ajax;
var $observer = $({});
//observer pattern from addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjquery
var obs = window.ajaxObserver = {
subscribe: function() {
$observer.on.apply($observer, arguments);
},
unsubscribe: function() {
$observer.off.apply($observer, arguments);
},
once: function() {
$observer.one.apply($observer, arguments);
},
publish: function() {
$observer.trigger.apply($observer, arguments);
}
};
$.ajax = function() {
var $promise = $ajax.apply(null, arguments);
obs.publish("start", $promise);
return $promise;
};
})();
Now you can hook into $.ajax calls via
ajaxObserver.on("start", function($xhr) {//whenever a $.ajax call is started
$xhr.done(function(data) {
//do stuff
})
});
So you can adapt the other snippet like
function start(){
var links = $('.category a');
var i = 0;
var clickNextLink = function() {
ajaxObserver.one("start", function($xhr) {
$xhr.done(function(data) {
if(i < links.length) {
fillProducts();
clickNextLink();
} else {
done();
}
});
})
$(links.get(i++)).click();//click current link then increment i
}
clickNextLink();
}
try this:
function start(){
$('.category a').each(function(i){
$(this).click();
fillProducts() ;
})
}
I get ya now. This is like say:
when facebook loads, I want to remove the adverts by targeting specific class, and then alter the view that i actually see.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
Is a plugin for firefox, this will allow you to create a javascript file, will then allow you to target a specific element or elements within the html rendered content.
IN order to catch the ajax request traffic, you just need to catcher that within your console.
I can not give you a tutorial on greasemonkey, but you can get the greasemonkey script for facebook, and use that as a guide.
http://mashable.com/2008/12/25/facebook-greasemonkey-scripts/
hope this is it