When i call Gravity Form in my theme's functions.php using ajax the form fields are disabled.
Any solutions will help me a lot.
add_action('wp_head', 'mytheme_fn');
add_action('wp_ajax_mythem_load_gravityform', 'mythem_load_gravityform_call');
function mytheme_fn(){
?>
<script>
jQuery(document).ready(function () {
var data = {
action: 'mythem_load_gravityform'
};
jQuery.post(
ajaxurl,
data
).success(function (data) {
jQuery('.gformholder').html(data);
});
});
</script> <?php }
function mythem_load_gravityform_call(){
gravity_form(1, false, false, false, null,false);
exit;
}
Thank you in advance.
From a Gravity Forms Support Specialist:
"The issue is caused by GF's implementation of the form rendering logic. They check whether is_admin() returns true (and it does when you call ajax on Wordpress) and if so, they render it like you were in admin."
We have made a number of changes in Gravity Forms 1.9 so and is_admin check is no longer performed when loading forms and fields, which means forms and fields can now be loaded via AJAX and they will render correctly.
Gravity Forms 1.9 has just been released: http://www.gravityhelp.com/gravity-forms-v1-9-released/
Regarding the enhanced ui, this is powered by the chosen.js script and when you make change to the underlying select element you will need to trigger an update of the chosen interface: http://harvesthq.github.io/chosen/options.html#triggerable-events
The issue is caused by GF's implementation of the form rendering logic. They check whether is_admin() returns true (and it does when you call ajax on Wordpress) and if so, they render it like you were in admin.
I can think of two solutions here:
1) dummy endpoint
create a dummy page with template file without head or foot, just a plain gravity_form(...);
Then call this url from your js.
2) plugin
create a plugin, which registers custom query var (using query_vars filter), and then process the query variable by showing the gravity_form(...) output.
Related
A client is asking to allow users to register during checkout. The problem is there are some logic about memberships so registering can alter the final price and I can't use the standard Woocommerce way.
So i wrote a couple of validations. First i check if everything is in order, if it is a second validation actually creates the customer account, set all meta fields, login the customer.
Now what I need is to fully realod the checkout page and output a notice telling the customer to press the checkout button again.
I'm using woocommerce_after_checkout_validation but I can't make it work.
I tried a wp_redirect and outputting an ugly in the error notice.
Any ideas on how to do this?
I ended up using Javascript hooks to fire an event after the validation. The error checking is pretty bad, in my case it works but it should be more general.
var error_text = jQuery(".woocommerce-error").find("li").first().text();
if (
error_text.trim() ==
"register_success"
) {
window.setTimeout(function () {
location.reload();
}, 1500);
}
});
I want to extend the existing user roles and capabilities of wordpress. I added custom roles and capabilities. I have also added custom user meta (dob, gender, status, etc...)
Everything is good, except, I want that if a user or the admin tries to update the custom user meta, it should be validated via php, I can do it via JS but I want to add validation to PHP as well.
personal_options_update and edit_user_profile_update action hooks,
using this, I can successfully update the values of the custom user meta, but cannot validate. (I want to display validation errors, just like wordpress does normally).
so I tried this technique from this link:
https://wordpress.stackexchange.com/questions/76419/validating-a-new-user-registration-field
and used the user_profile_update_errors action hook.
It does most of the job, I can add validation and add it to wordpress error notification. and if there are errors prevent update of custom user meta.
however I noticed is that even if the new data is valid and no validation error occured, it doesn't update the custom user meta.
below is a sample of my codes:
call back to the user_profile_update_errors action hook, I intentionally did not check if the $errors object has errors to illustrate the somehow the update_user_meta does not get triggered. also this is a function of a class
public function updateCustomUserMeta($errors,$update,$user){
// Check if user has authority to change this
if(!current_user_can('read',$user->ID)){
$errors->add("permission_denied","You do not have permission to update this page");
}
// Var declaration and default values
$mn = "";
// Validation
if(isset($_POST["alumni-middlename"])){
$mn = trim($_POST["alumni-middlename"]);
if(empty($mn)){
$errors->add("middlename_empty","Middle Name Empty");
}
}else{
$errors->add("middlename_not_passed","Middle Name Field Not Passed");
}
update_user_meta($user->ID,"Middle Name",$_POST["alumni-middlename"]);
}// end updateCustomUserMeta
and this is my plugin in bootstrap code:
add_action( 'user_profile_update_errors',array(AlumniUserRolesAndCapabilities::getInstance(),"validateCustomUserMeta"));
To sum up, I want to be able to validate the custom user meta via php and prevent updating of values if there are errors and display it appropriately normally just like what wordpress does. Also if there are no validation errors, udpate the specified custom user metas.
Thanks.
add_action( 'user_profile_update_errors',array(AlumniUserRolesAndCapabilities::getInstance(),"validateCustomUserMeta"),10,3);
thats the answer, the 10 and 3 are the key, it has something to do with the order of execution.
before without those numbers, $user was not sent to the callback, but when I added those numbers at the end, the $user object was passed.
Hope this helps anyone.
I have created a custom form class and template for my form by following the instructions here.
However I am having trouble with adding DateFields with calendars. Usually I just do something like this:
$dateField = new DateField ('DateRequired', 'Date Required');
$dateField->setConfig ('showcalendar', true);
I have tried the above code in my custom form however the page doesn't include any of the jquery ui scripts or css files for the calendar field.
So my question is how can I get the my custom form to include all the scripts and render the fields with the jquery ui calendars?
actually the change of the template should not be necessary.
$dateField = new DateField('...');
$dateField->setConfig('showcalendar', true);
$dateField->setConfig('showdropdown', true);
$dateField->setConfig('dateformat', 'dd.MM.YYYY');
Ok I have worked it out. The code within the template that calls the fields needs to be changed from:
$dataFieldByName(DateRequired)
to:
$dataFieldByName(DateRequired).FieldHolder
Now all of the javascript is included within the page.
Just implemented the JQuery form plugin on an ASP.NET page, and here is the problem:
I have one Form tag (inherited from the master page)
Form plugin depends entirely on a "form" field being wired up
I tried to wire a simple "div" to the ajaxSubmit but it didnt work since formData looped thru form.elements, so I must pass the form of the page...
So what would save the day and allow me to use the form plugin is a way to pass a context to the plugin that it selects the input forms i tell it to pass
the major reason for that is that i have multiple save buttons (none of them is a submit button actually, just "save" links that appear on request to save part of the form)
var options = {
url: 'template.aspx',
type: 'POST',
dataType: "html",
data: { "iPageId": 1, "iModeId": "save"}, // here is where I want to pass all inputs
success: function (responseText, statusText, xhr, $form) {
// got responseText correctly
},
beforeSubmit: function (formData, jqForm, options) {
// I wish there is a way to tell the plugin not to look outside a specific set of the page
}
};
$myMainForm.ajaxSubmit(options);
hmm, no answers so i will accept my work around, I'll just set "sematic=true" to force a getElementsbyTagName instead of form.elements
PS, i worked around the single form by injecting form tags on runtime via jquery around the elements i want to submit individually
just need tips on how to make forms where request are submitted via AJAX with a loading progress image. I am using update panels with AJAX framework. I would like to know about the recommended approach. Through JQuery or AJAX toolkit ?
Please advice, examples would be an added bonus for me.
1- Prepare a client side div with "display:none" style property. put your loading image inside.
2 - when the user or page submits a request, change that divs display property to "block".
3- Add some kind of "information received" sign to the response and check this response from the client side and then change that divs display property back to "none"
I would like to know about the
recommended approach
Well, that depends on what you are doing, what parts of the form are you updating, how big is the form, what values are you sending to the server.
Generally speaking, if you want to update something simple (dropdownlist, listbox, etc), youd generally use JavaScript (or jQuery) to call an AJAX-enabled web service. This way, you're only sending to the server the data it needs, things like ViewState/cookies are not sent over the wire. You also have full control over the pre/post execution events (so you can add your loading images, call the WS, then clear them).
However, if you want to asynchronously update an entire form (which has a lot of controls), you're probably right in using an UpdatePanel. Things like a GridView are a good case for an UpdatePanel (as you usually need to handle editing, binding and paging all asynchronously).
The progress image is made easy with the following code:
<ProgressTemplate>
<img src="someloadingimage.gif" alt="Loading" />
</ProgressTemplate>
Stick that inside your UpdatePanel, and whenever an AJAX call is made, the loading image will be shown.
HTH
If you use JQuery for AJAX request then you can use the following events -
$.ajax({ url: "test.html",
type: "GET",
beforeSend: function(){
-----load your loader here-----
});,
success: function(){
------remove your loader here -----------
Remaining code
}});
You can also use POST. in above example i have used GET.
For detailed documentation you can refer - http://api.jquery.com/jQuery.ajax/
Create a small plug-in for your loader like so.
$.fn.ShowLoader = function(on){
switch(on)
{
case true:
$(this).show();
break;
default:
$(this).hide();
break;
}
}
then use the following:
$('form').submit(function(){
var Form = $(this);
$('.loader',Form).ShowLoader(true);
//Gather some params
Location = Form.attr('src');
Data = Form.Serialize();
$.post(Location,Data,function(result){
result = result || false;
if(result)
{
$('.loader',Form).ShowLoader(false); //Disable the loader
//Process result
}
});
})
html would just be a regular form, with an image / div inside with the class of loader