How do I hook an event on jform joomla user field?
Field:
<field name="jid" type="user"
label="COM_XYZ_JID"/>
Listening to change event has no effect:
jQuery(document).ready(function () {
jQuery(document).on("change","#jform_jid", function () {
console.log("Hi");
})
});
Have you tried to use onchange or onkeyup attribute? Like this:
<field name="jid" type="user" label="COM_XYZ_JID" onkeyup="console.log('key up');" onchange="console.log('value change');" />
It might be due to how you're importing your script. To import it to the <head>, you can do it like so:
$doc = JFactory::getDocument();
$doc->addScriptDeclaration('
jQuery(document).ready(function () {
jQuery(document).on("change","#jform_jid", function () {
console.log("Hi");
})
});
');
Do also ensure you have jQuery being loaded too.
Hope this helps
Related
Here is MyCompnent
props: ['visible']
methods: {
update () {
this.$emit('update:visible')
}
}
I use this component in jsx:
<MyComponent visible={this.visible} {...{['on-update:visible']: console.log}} />
but can not bind the event.
so how to bind this event in jsx.
I have find the answer from the example https://github.com/vuejs/babel-plugin-transform-vue-jsx/blob/master/example/example.js
It cant write like this:
<MyComponent visible={this.visible} {...{on:{'update:visible': console.log}} />
I would like to add an event listener in in <some-component> that reacts to the button.
<some-component></some-component>
<button class="click">click here</button>
I am sure this is really simple. I am very new to CanJS and working on it.
<can-component tag="some-component">
<style type="less">
<!-- stuff -->
</style>
<template>
<!-- stuff -->
</template>
<script type="view-model">
import $ from 'jquery';
import Map from 'can/map/';
import 'can/map/define/';
export default Map.extend({
define: {
message: {
value: 'This is the side-panels component'
}
}
});
</script>
</can-component>
I tried adding a $('body').on('click', '.click', function() {}); to the component and it didn't seem to work. Been reading a lot of documentation, but I am still missing some fundamental understanding.
UPDATE
I tried this:
<some-component-main>
<some-component></some-component>
<button class="click">click here</button>
</some-component-main>
with the event listener in some-component-main
events: {
".click click": function(){
console.log("here I am");
}
},
But that also didn't work.
<some-component-main>
<some-component></some-component>
<button class="click">click here</button>
</some-component-main>
with the event listener in some-component-main
events: {
".click click": function(){
console.log("here I am");
}
},
This did work once I realized that components ending with a number causes other issues that was preventing it.
You can make things inside your component available to the parent scope using the {^property-name} or {^#method-name} syntax. Read about it here: https://canjs.com/docs/can.view.bindings.toParent.html
Here's a fiddle: http://jsbin.com/badukipogu/1/edit?html,js,output
In the following example, <my-compontent> implements a doSomething method and we the button to call that method when clicked. We expose the method as "doFooBar".
<my-component {^#do-something}="doFooBar" />
<button ($click)="doFooBar">Button</button>
and the code:
can.Component.extend({
tag: "my-component",
template: can.view('my-component-template'),
viewModel: can.Map.extend({
doSomething: function () {
alert('We did something');
}
})
});
But why does the example use ^#do-something="..." instead of ^#doSomething="..."??
DOM node attributes are case insensitive, so there's no way to tell the difference between doSomething="", DoSomEthiNg="", or DOSOMETHING="" - all three are equivalent. CanJS is following the way browsers work by converting attributes with dashes to camelCase and vice versa.
Consider native data attributes - if you do something like <div data-my-foo="my bar">, then the value is accessible via JavaScript by doing [div].dataset.myFoo (notice the camelCasing). The same applies to css properties where css uses "background-color" but javascript uses backgroundColor. CanJS is following this convention.
I have the following anchor tag in a td in my table:
edit
I would like to find the parents of this td within my editAccount() function, doing the following:
function editAccount(){ console.log($(this).parent().parent()); }
However, I keep getting null in my console
You need pass the element under question
<a onclick="editAccount(this)" class="edit">edit</a>
and
function editAccount(elem){ console.log($(elem).parent().parent()); }
or using function.call.
<a onclick="editAccount.call(this)" class="edit">edit</a>
and
function editAccount(){ console.log($(this).parent().parent()); }
Using Jquery to bind the event.
<a class="edit" href="#">edit</a>
and
$(function(){
$('.edit').click(function(e){
e.preventDefault();
console.log($(this).parent().parent());
});
});
Fiddle
this does not refer to anything in that function.
Just add an actual event to the anchor:
$('.edit').on('click', function(){
console.log($(this).parent().parent());
return false;
});
Instead of using href="javascript:editAccount(), bind editAccount using standard event registration via jQuery:
$(".edit").on("click", editAccount);
You can also use an anonymous function instead of defining editAccount separately.
In case the .edit links are added dynamically, you can use event delegation:
$(document).on("click", ".edit", function (e) {
//prevent following the link if you want
e.preventDefault();
console.log($(this).closest("td"));
});
I have to write a simple plugin for ajax load.
Page code. (result by razor)
<a ajaxLoad="page" href="/Brand">Brand List</a>
<div id="plc1">
some content
</div>
<script type="text/javascript">
$(function () {
$("#plc1").ajaxPageLoad();
});
</script>
In js code.
jQuery.fn.ajaxPageLoad =
function () {
$('a[ajaxLoad*="page"]').click(function () {
$(this).empty();
$(this).load(this.href);
return false;
});
}
in page without this implementation empty() work properly but plug-in there is no effect.
what is wrong?
Thanks.
Seems that you're hoping this will refer to both the div and the a at the same time.
If I understand your code, you want to empty the element on which your plugin was called when the <a> element is clicked.
Currently, in the click() handler, this is the <a> element. You need to retain a reference to the <div> against which your plugin was called outside the handler.
jQuery.fn.ajaxPageLoad = function() {
// reference the <div> container (or whatever it ends up being)
var container = this;
$('a[ajaxLoad*="page"]').click(function() {
container.empty(); // empty the container
container.load( this.href ); // load into the container from the href
return false; // of the <a> that was clicked
});
};
$(function() {
$("#plc1").ajaxPageLoad();
});
I have a need to disable validation on certain fields when certain events occur, so based on the suggestion in this thread: jQuery disable rule validation on a single field
I tried this:
$("form").validate({
ignore: ".ignore"
})
But I am finding that it disables all validation on all fields, not just those with class="ignore".
Am I doing something wrong with this?
How about trying:
$('#CompaniesGridform').validate({
ignore: ":disabled"
});
I'm currently doing it something like this
<button id="Submit" type="submit">Submit</button>
<script type="text/javascript">
$("#Submit").on("click", function () {
var validator = $("form").data('validator');
validator.settings.ignore = ".ignore";
});
</script>
Switch out .ignore for any jQuery selector or chain them up like ".ignore, input[type=hidden]"