I'm trying to use YUI to validate a radio button group on form submit and then do action x.
I’m new to YUI and its hard to find any examples.
Appreciate any advice, cheers.
EDIT: YUI 2.0
It would help to know which version of YUI you're using, since the APIs are wildly different. In YUI3, you could do something like this:
YUI().use('node', function(Y) {
var form = Y.one('form');
form.on('submit', function(evt) {
var radioButtons = form.all('input[type=radio]');
// do some validation
if(!valid) {
evt.preventDefault(); // prevents the form from submitting
// show error messages
}
});
});
Doing this in YUI2 is a little more verbose, as YUI2 is a little closer to the metal.
Here's a jsfiddle example on how to capture form submission and perform validation.
Hope that helps!
For YUI 1 (first version) you can use
evt.halt();
Related
Good day
I was wondering if it's possible to hook a Javascript onto a PXAction button. normally you can use the ClientEvents Property but with a button, these are not exposed.
The problem I am is every now and then there is a delay between the client and the server and the client will click the button a second time. I have server-side code to help stop this by disabling the button but I want to add a javascript to see if I can prevent it completely.
The code I want to add:
<script type="text/javascript">
var submit = 0;
function CheckDouble() {
if (++submit > 1) {
alert('This sometimes takes a few seconds - please be patient.');
return false;
}
}
</script>
Any ideas or workaround I can maybe try?
I believe the PXJavaScript control is what you are after.
I used this link to help get my head wrapped around how to use the control. We had a need to trigger something off with Java Script and the PXJavaScript control got us to the end result we needed.
Dynamically Change Button Color
Let me know if this helps?
Robert
i'm using color picker from http://jscolor.com/
i'm trying to attach it to some dynamic inputs, but to no avail. dynamic inputs in terms of, on page load the input doesn't exist, only after the user click on something the input will become available. for example, I have a rows of data, and each row has different background color. this row of data are loaded using ajax. at the end of each row, there's an edit button. by clicking the edit button, it will display an input text box for the clicked row. I want to call the jscolor picker when the user clicks on the input text box. how can I do this?
thanks
For some reason jscolor.init() did not work for me, and looking at the code I called
jscolor.installByClassName("jscolor");
function.
So...
$(document).ready(function() {
jscolor.installByClassName("jscolor");
});
Hope it helps
I just had this problem too but luckily it's easy to fix. You need to (re)init jscolor after you have dynamically created your inputs:
jscolor.init()
This helped me
<script>
$(document).on('click', '#myPickerId', function () {
var obj = $(this)[0];
if (!obj.hasPicker) {
var picker = new jscolor.color(obj, {}); //
obj.hasPicker = true;
picker.showPicker();
}
});
</script>
In my case, the picker control was dynamic because it is inside Knockout.js 'with' statement which hides and recreates the picker when it needs.
Got the same problem upon adding input fields dynamically
Managed to make it work by calling
jscolor.install();
PS: jscolor v2.4.5
As of 2020, the original problem should be solvable by dynamically creating an input element, and then calling new jscolor(input). Using JQuery (you could use vanilla JS as well):
var color_input = $('<input class="jscolor" spellcheck="false">');
new jscolor(color_input[0]);
This will make the popup picker appear on click, and everything appears to work just fine. However, you cannot manipulate it programmatically. To set the color using the objects above, you would normally use a method like: color_input[0].jscolor.fromString("#B7B7B7"). But that will fail for dynamically created objects, as color_input[0].jscolor is undefined. I believe this is a bug in Jscolor (and probably very easily solvable), as the missing object is actually available with color_input[0]._jscLinkedInstance. So you can just set the object yourself on instantiation with:
var color_input = $('<input class="jscolor" spellcheck="false">');
color_input[0].jscolor = new jscolor(color_input[0]);
And then everything looks to be working as expected. Hopefully this helps someone else that comes across this answer page as I did.
I built this function to find People Pickers by Field Title. Since the picker does not provide and TagName and Tile type of information and custom pages can have multiple people pickers, I used the NOBR tag which displays the title for each picker. This works flawlessly, but I think it can be sped up abit.
Please share your thoughts. Thanks you!!
function resetPickerInput(title){
var result="";
var tags=document.getElementsByTagName("NOBR");
var len=tags.length;
for(var i=0;i<len;i++){
if(tags[i].innerHTML.indexOf(title)>-1){
var div=tags[i].parentNode.parentNode.parentNode.getElementsByTagName("DIV");
var divLen=div.length;
for(var j=0;j<divLen;j++){
if(div[j].name=='upLevelDiv'){
result=div[j];
break;
}
}
}
}
return result;
}
Yes, you are doing it more complicated than you should.
This jQuery example looks very promising (Get Value of People Picker in Sharepoint):
var User = $("textarea[title='People Picker']").val().split("\\");
How do I get text from people picker textarea using javascript only
uses this: $(".ms-inputuserfield #content").each(function(){...
Another example: Hide People Picker control in SharePoint List Forms
Set a People Picker’s Value on a Form – Revisited with jQuery
$(this).find("div[Title='People Picker']").html(userName)
Since you didn't state your version: Retrieve Email Address from sharepoint people picker using javascript a solution for SP2007.
How do I add a YUI keyup listener? This is very simple with jQuery but I don't understand how to do it with YUI. There appears to be a YAHOO.util.KeyListener but it looks like that only listens for specific keys. I also tried to use YAHOO.util.Event.addListener but I couldn't get it to work with keyup. I'm not sure if addListener can use a keyup event since the YUI documentation is god awful.
Is there a way to create a listener for a key up even using YUI (aka the satanic framework)?
YUI 2.x:
YAHOO.util.Event.on('elId', 'keyup', function (e) {
/* Your code here */
});
YUI 3.x:
Y.one('#elId').on('keyup', function (e) {
/* Your code here */
});
There is no magic involved in hooking up the events. If you're having trouble, it may be related to the keyCodes or charCodes you're looking to react to. There are browser quirks with the key events. More detail or a code reduction would be helpful to get you up and running. There's also the #yui IRC channel on freenode.
I'm a Java programmer, but not a JavaScript programmer. I have just discovered YUI, and am trying to get started using it. What I'd like to try and do is have the query form at the top of the page, the user press Submit and the results show up in a YUI DataTable below the query form.
Normally, of course, on a HTML form the user presses Submit, the request gets sent to the server, and I use Struts to process it and then forward the request to a JSP and HTML gets sent back to the browser. That's what I do on a daily basis. With Ajax, I understand it's different in that I should return XML instead. Not a problem. Easy to do.
The questions I have deal with the YUI side of things. When the Submit button is pressed, what happens? Not normal form submission, right? Do I implement an onSubmit() JavaScript function which then triggers some YUI DataSource to go fetch the data? How do the request params get passed? Hopefully I don't have to construct the request manually. I'm guessing that I use a YAHOO.util.XHRDataSource and that's the DataSource for the DataTable.
I've managed to get the YUI DataTable to work using an HTML table element. Now I just need to switch it over to real data. Curiously, the YUI documentation seems a bit weak here, unless I'm missing something. Maybe this is just basic Ajax that the YUI docs don't cover?
First of all, when working with Ajax you don't need to return XML from the server, you could return plain text, XML, JSON strings, literally any form of textual data that you want. One example of populating a Datatable with JSON data is provided here:
http://developer.yahoo.com/yui/examples/datatable/dt_xhrjson.html
An example of how to send a post request using Ajax and YUI is provided here.
http://developer.yahoo.com/yui/examples/connection/post.html
That should get you started, now just link both of them together.
To connect to the server you can use the Yahoo.util.Connect.asyncRequest method which takes in the following parameters:
static object asyncRequest ( method , uri , callback , postData );
See an example here, this one uses "GET" so you can use either "GET" or "POST" just make sure you pass in your parameters
http://developer.yahoo.com/yui/examples/json/json_connect.html
Once your function returns on your "onSuccess" do the following to parse the response text to JSON
try {
jsonData = YAHOO.lang.JSON.parse(o.responseText);
}
catch (x) {
alert("JSON Parse failed!");
return;
}
The "jsonData" object now contains your data, so now you can follow this example:
http://developer.yahoo.com/yui/examples/datatable/dt_basic.html
It shows you how to initialize a datatable with a local object holding the datasource. basically it would be something like this
var myColumnDefs = [
{key:"Column1Data", label:"Column1 Header" sortable:true, resizeable:true},
{key:"Column2Data", label:"Column2 Header" sortable:true, resizeable:true}
];
var myDataSource = new YAHOO.util.DataSource(jsonData);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: ["Column1Data","Column2Data"]
};
var myDataTable = new YAHOO.widget.DataTable("basic",
myColumnDefs, myDataSource, {caption:"DataTable Caption"});
For this to work, you have to have a "div" container in the HTML code with an id of "basic" note this matches the first parameter on the DataTable
Hope this helps