I want to trigger some JavaScript when a relate field is populated
I was hoping to find a way of Jquery monitoring the hidden field contact_id and when it changes calling the Javascript function but I'm not sure this is possible
At the moment I changed editviewdefs so that the event triggers onblur
Code:
array (
'name' => 'contact_name',
'label' => 'LBL_CONTACT_NAME',
'customLabel' => '{$MOD.LBL_CONTACT_NAME}: <span class="required">*</span>',
'displayParams' =>
array (
'initial_filter' => '&account_name_advanced={$fields.account_name.value}&status_advanced=Live',
'field' =>
array (
'onchange' => 'getOpenCases()',
),
'javascript' =>
array (
'btn' => ' onblur="getOpenCases()" ',
'btn_clear' => ' onblur="getOpenCases()" ',
),
),
'tabindex' => '11',
),
But this means the user has to click away from the field before the event is triggered
I want it to happen as soon as contact_id is populated
Is this possible? If so how do I achieve it?
I have a rather convoluted method to check for a change in the hidden input.
I trigger a setInterval function when someone either clicks the button or starts typing into the text field. I then use jQuery data() to check for any change in the hidden input. When I change is noticed I run my custom js and then I clear the interval.
All the code is in an external js file.
// watch for a change in account ID
$('#btn_account_name').click(function(){
checkAccountIdChange();
});
$('#account_name').blur(function(){
checkAccountIdChange();
});
function checkAccountIdChange() {
var theInterval = setInterval(function(){
var oldId = $('#account_id').data('oldId');
var newId = $('#account_id').val();
if (oldId != newId && newId != '') {
getAccountData(newId, theInterval);
$('#account_id').data('oldId', newId);
}
}, 500);
}
function getAccountData(id, theInterval) {
// do your custom js
clearInterval(theInterval);
}
This isn't particularly clean or glamorous but does work. I'd be keen to see how others get around this.
Related
Is there any way how to trigger the event in every 3 seconds in laravel vuejs, but I've been using Jquery in my script.The problem is when I search and input any string, since I've been using keyup on input type it will trigger the event every characters I've type. All I want, It will trigger when you stop typing for at least 3 seconds, else if you continued typing it will not trigger the event, is there any way to achieve this? it will very helpful for me.
Currently I've been tried settimeout but every time I've type will get multiple results after setting the time.
<input type="text" class="form-control required-field" name="driver_fullname" placeholder="Enter fullname" v-model="formFields.fullname" v-on:keyup="typehead"/>
script
typehead(){
let vm = this;
let driveInfo = vm.formFields.fullname;
setTimeout(() => {
axios.put(BASE_URL + '/transportation/driver/autoComplete/' + driveInfo).then(response => {
console.log(response.data);
});
}, 500);
},
Sounds like what you really want is to debounce the user input to prevent an API call on every keystroke.
Check out https://www.npmjs.com/package/debounce
If you really want to delay by three seconds after the user stops typing, one way would be to use clearTimeout().
Add typeaheadTimeout: null to your component data.
Then:
typehead() {
let driveInfo = this.formFields.fullname;
if (this.typeaheadTimeout) {
clearTimeout(this.typeaheadTimeout);
}
this.typeaheadTimeout = setTimeout(() => {
axios.put(BASE_URL + '/transportation/driver/autoComplete/' + driveInfo).then(response => {
console.log(response.data);
});
}, 3000);
},
I have the following code where I am only enabling a button if relevant data exists.
I am trying to test this by faking a change in the input field so that the relevant data is available.
But my simulation does not seem to work thus the data remains empty which in turn means my button remains disabled. Can I please get some help on what I am doing wrong please? Thank you.
Note that following code works where events fires as expected and updates. Just issue in writing test.
const [code1, setCode1] = useState('');
const cannotPress = () => !(code1);
const handleFieldChange = (event, updater) => {
updater(event.target.value);
};
// in test, trying to simulate a value entered in this input so that the event fires and
// updates code1's value thus making cannotPress=false. This would enable the button and pass test.
<input id="code1" value={code1} onChange={event => handleFieldChange(event, setCode1)} />
<button id='btn type="submit" disabled={cannotPress()} onClick={() => doSomething()}>Submit</button>
Test
describe('tests', () => {
const wrapper = shallow(<MyApp info={info} />);
it('simple test', () => {
const btn = wrapper.find('button#btn'); // able to find button
const input = wrapper.find('input#code1'); // able to find input (tested by placing in default values)
console.log(input.props().value); // prints nothing as expected
input.instance().props.onChange(({ target: { value: 'some fake data' } })); // expecting the event to trigger and change value for code1.
console.log(input.props().value); // ISSUE: expected to print 'some fake data' but still empty.
expect(btn.prop('disabled')).toBe(false); // fails cos input has no value thus disabled is still true
});
});
I think you will need to simulate the event (using enzyme) rather then trying to manipulate the onChange() property directly.
Seems like a similar issue to:
https://stackoverflow.com/a/37452043/10610784
Try the suggested solution
input.simulate('change', { target: { value: 'Hello' } })
I'd like to listen to the focus event in CKEditor 5.
I thought something like this would work but the callback is never called:
document.querySelector("#editable");
ClassicEditor.create(el).then(editor => {
editor.on('focus', () => {
console.log("Focused");
});
});
The editor is successfully created but the callback is not called.
Any ideas?
The editor comes with a FocusTracker (and the observable #isFocused property) for that purpose:
editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, value ) => {
console.log( 'isFocused = ', value );
} );
Note that editor.ui.focusTracker.isFocused is true as long as any UI has focus, which includes the editable but also the toolbar, floating panels, etc.
To determine the focus of the editable, i.e. when the caret is blinking and typing is possible, use this listener instead:
editor.editing.view.document.on( 'change:isFocused', ( evt, name, value ) => {
console.log( 'editable isFocused =', value );
} );
Place one listener next to the other and play with the editor and the UI to see the difference.
Using Magento 1.9 ->addFieldDependencemethod, my related field value is changed dynamically therefore the magento field dependence method is not triggered.
I tried jquery $j("#meter_type_code").trigger("change"); to force the onchange event and trigger the Magento dependence function to no avail.
Relevant excerpt of my code:
<script>
var metertype = <?php echo $meter_type; ?>; //$metertype is an array
</script>
$fieldset->addField('meter_type_code', 'text', array( //set to text for testing will be hidden
'name' => 'machine.meter_type_code',
$fieldset->addField('meter_type', 'select', array(
'label' => 'Meter Type',
'class' => 'required-entry',
'required' => true,
'name' => 'machine.meter_type',
'onchange' => 'changeFieldValue(metertype[this.value]);trigger();',
'values' => Mage::getModel('machinemanager/machine_metertype')->getMeterTypes($attributeSetName),
'disabled' => false,
'readonly' => false,
'after_element_html' => '</br><small>Time in service</small>',
'tabindex' => 1
))
->setAfterElementHtml('
<script>
function changeFieldValue(value) {
document.getElementById("meter_type_code").value = value;
}
function trigger(value) {
//this is where I tried various methods to trigger the event none of which had effect to fire the Magento field dependence
}
</script>
');
$this->setChild('form_after', $this->getLayout()
->createBlock('adminhtml/widget_form_element_dependence')
->addFieldMap('meter_type_code','meter_type_code')
->addFieldMap('meter_type','meter_type')
->addFieldMap('time', 'time')
->addFieldMap('time_adjust', 'time_adjust')
->addFieldMap('cycles', 'cycles')
->addFieldMap('cycles_adjust', 'cycles_adjust')
->addFieldDependence('time', 'meter_type_code', array('t','tc'))
->addFieldDependence('time_adjust', 'meter_type_code', array('t','tc'))
->addFieldDependence('cycles', 'meter_type_code', array('c','tc'))
->addFieldDependence('cycles_adjust', 'meter_type_code', array('c','tc'))
);
When I successfully forced the onchange event using jquery, nothing happened until I actually retyped the value of meter_type_code and caused a real keyboard action. That triggered the magento javascript to make the dependent fields appear and disappear perfectly.
Can anyone tell me how to cause the addFieldDependence to trigger when the target field of the dependency is dynamically updated from another field?
Thank you.
Problem solved! Thanks to Mirasvit Extensions
This trigger works:
function trigger(value) {
// $j("#meter_type_code").trigger("change");
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
document.getElementById("meter_type_code").dispatchEvent(evt);
}
I commented out the JQuery method that did trigger a change event, but did not cause the Magento dependency method to work. I'd be interested in any comments why the JQuery trigger would not work in this case.
I've just started to use CKEditor and I can't manage to understand the API well enough to accomplish what I am aiming for.
Essentially, I have a few instances of the editor on the page. However, for the editor by the name of htmlInput, I want to collect the names of the form elements that are added to the editor. The closest I've gotten is to have an alert pop up when the appropriate dialogs are opened, but I haven't been able to extract the value of the name field of these boxes.
Here's what I have so far.
CKEDITOR.on('dialogDefinition', function (e) {
var dialogName = e.data.name;
var dialog = e.data.definition.dialog;
if(e.editor.name == 'htmlInput' && (dialogName=='checkbox' || dialogName=='radio' || dialogName=='textfield' || dialogName == 'textarea' || dialogName == 'select'))
{
dialog.on('show', function (ev) {
alert('here');
});
}
});
What you're trying to do is very unsafe. Imagine what if someone pasted such form element or used editor.insertHtml() method. They won't be collected. The better approach is as follows:
var form = {};
CKEDITOR.instances.editor1.dataProcessor.htmlFilter.addRules({
elements: {
$: function( element ) {
if ( element.name in { 'input' : 1, 'textarea': 1, 'button' : 1 } ) {
if ( !form[ element.name ] )
form[ element.name ] = [];
form[ element.name ].push( element );
}
}
}
});
Now when you can basically do the following:
CKEDITOR.instances.editor1.getData();
console.log( form );
Then you'll retrieve all the form elements (or elements of any kind) that belong to the document. Just make sure your form object is empty when serializing forms since i.e. htmlFilter is also executed when switching between souce mode <-> wysiwyg and it will continuously populate your list.
You can also basically use the following to retrieve elements by tag name (simple way IMO):
CKEDITOR.instances.editor1.document.getElementsByTag( 'input' );