I have a radio button, to which I need to add the class "validate-one-required-by-name" using Prototype, but only if the current URL contains the text "/checkout/"
Here's the code for my radio button:
<input id="cm1" name="adj[delivery_comment]" value="Mañana - 10am a 12pm" title="Mañana" class="input-text delivery-comment" type="radio"> <strong>Mañana</strong> (10am a 12pm)</input>
I am very new to prototype, and I've been searchng for days, but I can't find a solution.
Any ideas are welcome.
Thanks!
Make sure you do this after the DOM has loaded inside
document.observe('dom:loaded',function(){
//after DOM loaded you can manipulate it
if(window.location.href.include('/checkout/'))
{
//If its one that one radio button you can do it like this
$('cm1').addClassName('validate-one-required-by-name');
//lets say its any element with the 'delivery-comment' class
$$('.delivery-comment').invoke('addClassName','validate-one-required-by-name');
//or all of the radio buttons in the DOM
$$('input[type="radio"]').invoke('addClassName','validate-one-required-by-name');
}
});
Related
So I've a custom widget which renders a custom component.
conversion.for('editingDowncast').elementToElement({
model: 'modelName',
view: (modelElement, viewWriter) => {
const modelName = modelElement.getAttribute('modelName');
const modelNameView = viewWriter.createContainerElement('span', {
class: 'modelName',
'data-modelName': modelName,
});
const reactWrapper = viewWriter.createUIElement(
'span',
{
class: 'modelName__react-wrapper',
},
function (this, domDocument) {
const domElement = this.toDomElement(domDocument);
rendermodelName(modelName, domElement);
return domElement;
},
);
viewWriter.insert(
viewWriter.createPositionAt(modelNameView, 0),
reactWrapper,
);
return toWidgetEditable(modelNameView, viewWriter);
},
});
Where rendermodelName will give back a React component with a simple input box as
return (
<div>
<input type="text" />
</div>
);
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html.
But the problem is, whenever I tried to add some content inside the input, the focus is lost from the field and automatically moved to the surrounding editor. What am I missing. Tried creating a focushandler and adding the modelNameView to it.
Should I go with the new createRawElement? My current CK5 is 20.0.0 So I don't want any breaking changes coming now.
EDIT:
I researched a little bit more. seems like createRawElement may not work here. I think this doesn't have a simple solution. I tried with allowContentOf: '$block' which also not letting me focus. But these values are explicitly for normal CK widget, not for a react component.
I had the same issue and solved it by adding this tag to the parent div that wraps my Vue component.
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/widget-internals.html#exclude-dom-events-from-default-handlers
Adding from CKE Docs:
Sometimes it can be useful to prevent processing of events by default handlers, for example using React component inside an UIElement in the widget where, by default, widget itself wants to control everything. To make it possible the only thing to do is to add a data-cke-ignore-events attribute to an element or to its ancestor and then all events triggered by any of children from that element will be ignored in default handlers.
Let’s see it in an short example:
<div data-cke-ignore-events="true">
<button>Click!</button>
</div>
In the above template events dispatched from the button, which is placed inside containing data-cke-ignore-events attribute, will be ignored by default event handlers.
I faced the similar issue.
CKEditor will takes all the events on React component which you hosted on Widget.
The work around is to stop propagation of events to CKEditor which are fired from your DOM element(domElement) where your React component hosted.
Here is the sample code:
https://github.com/ckeditor/ckeditor5-core/compare/proto/input-widget#diff-44ca1561ce575490eac0d660407d5144R239
You should stop all required events. Also you can't paste any content inside the input field of React component. That will also listened by clipboardInput event of CKEditor.
I have a prefab which contains some buttons and I want to get the buttons and add specific onClick functions to them via script. I cant find the right way to get the buttons.
What I am trying is:
tempGo = Instantiate(prefabs[0]);
tempGo.transform.SetParent(transform, false);
tempGo.transform.localScale = Vector3.one;
tempGo.transform.localPosition = Vector3.zero;
Transform t = tempGo.GetComponentInChildren<Transform>().Find("AddGoals");
"AddGoals" Is my Buttons(Tag name)
So after this point how can I code it to add a specific function when the button gets clicked?
Any help would be appreciated thank you!
Get button component and add listener to it. Listener will call the function when that button is clicked. TaskOnClick is an example function that will be called when the button is clicked.
t.GetComponent<Button>().onClick.AddListener(TaskOnClick);
void TaskOnClick()
{
Debug.Log("You have clicked the button!");
}
Using .Find(""), you are looking for a gameobject with that name, not its tag. What you can do is after instantiating the object, use GameObject.FindGameObjectsWithTag("AddGoals"). This will return an array of all of the objects with that tag. Then with Linq you can do something like:
var items = GameObject.FindGameObjectsWithTag("AddGoals"); //This gives gameobject array
var itemTansforms = items.Select(x=>x.transfrom).ToList(); //gives you a list of the object tansforms
As for adding an event, you would need to grab the button component of the object and then add the onclick event.
items.ForEach(x=>x.GetComponent<Button>().AddListener(delegate {Debug.Log($"{x.name} has been clicked")}));
You would have to make sure it is actually a button, or the code will fail. This of course can be modified and is just an example. I hope this helps!
I don't even know if this is possible but here is an example:
<div id="register">
//bunch of markup including inputs
</div>
Via AJAX I replace the register div, but if there is a focus on a text box inside of the register div, it loses focus when replaces happens. Is there a way to maintain focus?
here is the javascript:
$("#cart_contents input").change(function()
{
$(this.form).ajaxSubmit({target: "#register_container", success: function()
{
}
});
});
I have lots of inputs inside this form, how can I figure out how to refocus
If you get an ID handle for the text box, e.g. textbox, when AJAX is complete, call:
$('#textbox').focus();
A more generic solution. Given focusable elements have IDs, bookend your AJAX stuff like so:
var focusedId = $(document.activeElement).attr('id');
// .. AJAX, replacement ..
$('#' + focusedId).focus();
Reference focus()jQuery, Using jQuery to test if an input has focus.
If you replace the markups inside the register div,the focus from earlier fields would be removed,use
$("#"+someid).focus();
to focus on the textfields with id if you are using jquery..
I need to create a jQuery App with 30 buttons, from 1 to 30, whereby each one calls the exact same action script via Ajax where the parameter that is passed to the action script is simply the number of the button pressed (1 to 30).
For example, let's say the action script is process.php, if button 3 is pressed, then I need to pull data from process.php?btn=3, and if button 27 is pressed, then I need to pull data from process.php?btn=27.
Which type of button should I use for this: <input> buttons, <a> buttons, <button> buttons, or something else? And why do you suggest that?
Also, how would Ajax get the corresponding value (1-30) of the button pressed with the method you suggest?
Thanks!
I would suggest to use <a/> that way if JavaScript is disabled you can maintain the application's functionality.
Button 3
And the script would simply use the href to post to your page.
$("a.actionButton").click(function(e){
e.preventDefault();
$.post(this.href, {}, function(data){
//do something with the data.
});
});
Update
Since JavaScript is required than my recommendation would depend on your application design. If you want the big buttons to look like buttons simply use <input type="button" value="3"/> As by default they will have hover effect, depressed effect built out of the box.
If your buttons do not look like normal buttons maybe just blocks or some other style a <div/> could also be an option. The one downside to using an <a/> would be you always have to suppress the default behavior of the click()
Each will work fine. But the <a> you can style with an image while <input> and <button> you cannot (the browser decides on the look).
Simply bind the click event on the button. Assuming you have this HTML:
Button 1
Button 2
...
Button 3
Here's the Javascript. The trick is to call the AJAX here, and return false to prevent the Browser from changing page.
$('a').click(function(e) {
$.get($(this).attr('href'), function(result) {
alert('AJAX result = '+result);
});
return false;
});
You could create a custom attribute on each button.
<input type="button" onclick="YourCallbackMethod(this)" buttonNumber="1" value="Button 1" />
In your javascript
function YourCallbackMethod(button)
{
var number = $(button).attr("buttonNumber");
// Call the ajax method with the number value.
}
By doing this you can add additional attributes to extend the data stored in each button and it also makes chaning the AJAX target link very easy since it's centralised, rather than spread around multiple anchor tags.
As an alternative to Marks answer, you could use a <form> element, and have each button a submit button; either a input or button. Set the name of the element to "btn" and the value of the element to the button number.
<form id="foo" action="process.php" method="<!-- POST or GET? -->">
<button type="submit" name="btn" value="1">Button 1</button>
</form>
The jQuery would look something like:
jQuery(document).ready(function ($) {
$('#foo').bind('submit', function (evt) {
jQuery.ajax({
url: this.action,
data: $(this).serialize(),
success: function () {
// whatever
}
});
evt.preventDefault();
});
});
If you want the submission to be a POST request, this would most likely be better. For a GET request however, Marks will probably be easier.
I have a page of products and for each of them, I want to have a form that uses AJAX to update the session. I've done this bit - just providing background.
I use the product's ID to create a different form class and name for each form, so each form is called something like this_form_name_567 and the next would be this_form_name_568 and so on.
There is a submit button per form. I'm having trouble figuring out
Which event is best to use so that the correct form will be identified when a submit button is clicked?
Once clicked, how to then make sure the correct value is taken from a hidden field (unique ID) within the submitted form so that I can populate a line of code such as:
$.post("compare_response.php", {compare_this: $("#compare_this").val()}, function(data){
}
You can use the .closest tree traversal method to get the form in which the button of interest is nested:
$("input[type=submit]").click(function() {
alert($(this).closest("form").attr("id"));
});
or even simpler, just get the element's form property :)
$("input[type=submit]").click(function() {
alert(this.form.id);
});
You can try it out here.
You can get the form you are submitting like this:
$('form').submit(function() {
var yourForm = $(this);
var hiddenValue = $(this).find('input[type=hidden]').val();
});
Of course you can get the hidden value differently, or if you have more than one hidden you'll have to give a little more information about it.