Develop Reference

CHALLENGE: Load Gravity Forms via AJAX - Change working PHP solution to Gutenberg code

I had the need to load a Gravity Form through Ajax on a push of a button (in PHP/Wordpress), and thanks to Steven Henty, I've found his solution to fix my issue. Modified it at little to open my form in a modal (lity modal), and it works!
However.... Now I started to migrate my site to the new Gutenberg editor in Wordpress. So I need a system that can do the same from a Gutenberg block (javascript) code.
I can code some, but I am not hardcore, so would love if anyone could tell me how to implement this former (PHP based) 'system', for instance to a (javascript based) Gutenberg Button-block, that implements this code. Here is the code for the current (working) button:
button.php
// Hook up the AJAX ajctions
add_action('wp_ajax_nopriv_gf_button_get_form', 'gf_button_ajax_get_form');
add_action('wp_ajax_gf_button_get_form', 'gf_button_ajax_get_form');
// Add the "button" action to the gravityforms shortcode
// e.g. [gravityforms action="button" id=1 text="button text"]
add_filter('gform_shortcode_button', 'gf_button_shortcode', 10, 3);
function gf_button_shortcode($shortcode_string, $attributes, $content)
{
$a = shortcode_atts(array(
'id' => 0,
'text' => 'Open',
'button_class' => '',
'button_style' => ''
), $attributes);
$form_id = absint($a['id']);
$curr_lang = ICL_LANGUAGE_CODE;
if ($form_id < 1) {
return '<div>Missing the ID attribute.</div>';
}
gravity_form_enqueue_scripts($form_id, true);
$ajax_url = admin_url('admin-ajax.php');
$html = sprintf('<button id="gf_button_get_form_%d" class="gf_button_get_form %s" style="%s"><div class="gf_button_get_form-label">%s</div></button>', $form_id, $a['button_class'], $a['button_style'], $form_id, $a['text']);
$html .= "<script>
(function (SHFormLoader, $) {
$('#gf_button_get_form_{$form_id}').click(function(){
$.ajaxSetup({
beforeSend: function() {
$('.spinner_{$form_id}').addClass('active');
},
complete: function() {
$('.spinner_{$form_id}').removeClass('active');
var fieldsWithHiddenLabels = $('.gfield.hidden-label');
if (fieldsWithHiddenLabels.length) {
fieldsWithHiddenLabels.each(function(){
if($(this).hasClass('gfield_contains_required')){
$(this).find('.ginput_container label').prepend('<span class=\"gfield_required\">*</span>');
}
});
}
}
});
$.get('{$ajax_url}?lang={$curr_lang}&action=gf_button_get_form&form_id={$form_id}',function(response){
lity(response);
if(window['gformInitDatepicker']) {gformInitDatepicker();}
});
});
}(window.SHFormLoader = window.SHFormLoader || {}, jQuery));
</script>";
return $html;
}
function gf_button_ajax_get_form() {
$form_id = isset($_GET['form_id']) ? absint($_GET['form_id']) : 0;
gravity_form($form_id, true, false, false, false, true);
die();
}
I am using the excellent create-guten-blocks as boilerplate, and my template block file looks like this:
form-button.js
import './style.scss';
import './editor.scss';
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
registerBlockType( 'my-blocks/form-button', {
title: __( 'Form Button' ),
icon: heart,
category: 'common',
keywords: [
__( 'my-blocks — Form Button' )
],
edit: function( props ) {
return (
<div className={ props.className }>
<p>— Hello from the backend.</p>
<p>
CGB BLOCK: <code>configit-blocks</code> is a new Gutenberg block
</p>
<p>
It was created via{ ' ' }
<code>
<a href="https://github.com/ahmadawais/create-guten-block">
create-guten-block
</a>
</code>.
</p>
</div>
);
},
save: function( props ) {
return (
<div>
<p>— Hello from the frontend.</p>
<p>
CGB BLOCK: <code>configit-blocks</code> is a new Gutenberg block.
</p>
<p>
It was created via{ ' ' }
<code>
<a href="https://github.com/ahmadawais/create-guten-block">
create-guten-block
</a>
</code>.
</p>
</div>
);
},
} );
Hope this makes sense. This is my second post on Stackoverflow, so please let me know if you need more details ... Really hope one of you skilled people can handle this. Thanks!

Jquery UI Autocomplete in codeigniter using table oracle

views.php
<div class="input-group">
<input class="form-control" id="nomor_cari" maxlength="16" placeholder="No. CM / No. KTP">
script autocomplete
$('#nomor_cari').autocomplete({
source: get_no,
dataType: 'JSON'
});
function get_no
<?php
function get_no($q)
{
$this->db->select('NO_MEDREC');
$this->db->like('NO_MEDREC', $q);
$query = $this->db->get('PASIEN_IRJ');
if($query->num_rows > 0)
{
foreach ($query->result_array() as $row)
{
$row_set[] = htmlentities(ucfirst($row['NO_MEDREC']));
}
$this->output
->set_content_type('application/json')
->set_output(json_encode($row_set));
}
echo $query->row();
}?>
but autocomplete didn't show anything.
if i use local variable , autocomplete works like it should be.
<script> var availableNumber = [
"0000000002",
"0000000020",
"0000000200",
"0000002000"
];
/<script>
and changes autocomplete to
$('#nomor_cari').autocomplete({
source: availableNumber,
dataType: 'JSON'
});
what did i missed? (im sure .js are loaded because when using local var , it works like charm)
just in case needed , here's my autoload
$autoload['libraries'] = array('database', 'email', 'session');
$autoload['helper'] = array('url', 'template', 'message', 'misc');

I think issue is in "source". Please try to use json like this
$('#nomor_cari').autocomplete({
source: function (request, response) {
$.getJSON("ful_url/get_no?term=" + request.term, function (data) {
response($.map(data.dealers, function (value, key) {
return {
label: value,
value: key
};
}));
});
},
});

Cannot get jquery.multiple.select.js to validate and pass to php the boxes checked

I am using jquery.multiple.select.js v1.1.0 and cannot get this to validate and pass the output to my php mailer. My objective is for the visitor to my site to select from multiple options requesting a quote. So far, I'm able to receive the email with all other fields validated but in the email, I receive"quote for: array" but no selections. Also related, I'm not getting the success or error message on the page even though the email is going out. Can anyone steer me in the right direction? I'll include the page in question here, http://cptest.info/h2contact375.html
here's the validation js
var Contact = {
initialized: false,
initialize: function() {
if (this.initialized) return;
this.initialized = true;
this.build();
this.events();
},
build: function() {
this.validations();
},
events: function() {
},
validations: function() {
$("#contactForm").validate({
submitHandler: function(form) {
$.ajax({
type: "POST",
url: "js/contact-form.php",
data: {
"name": $("#contactForm #name").val(),
"email": $("#contactForm #email").val(),
"telephone": $("#contactForm #telephone").val(),
"message": $("#contactForm #message").val(),
"ms": $("#contactForm #ms").val()
},
dataType: "json",
success: function (data) {
if (data.response == "success") {
$("#contactSuccess").removeClass("hidden");
$("#contactError").addClass("hidden");
$("#contactForm #name, #contactForm #email, #contactForm #telephone, #contactForm #message, #contactForm #ms")
.val("")
.blur()
.closest(".control-group")
.removeClass("success")
.removeClass("error");
if(($("#contactSuccess").position().top - 80) < $(window).scrollTop()){
$("html, body").animate({
scrollTop: $("#contactSuccess").offset().top - 80
}, 300);
}
} else {
$("#contactError").removeClass("hidden");
$("#contactSuccess").addClass("hidden");
if(($("#contactError").position().top - 80) < $(window).scrollTop()){
$("html, body").animate({
scrollTop: $("#contactError").offset().top - 80
}, 300);
}
}
}
});
},
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
telephone: {
required: true
},
message: {
required: true
},
ms:{
required: true,
message: 'Please select at least one'
},
},
highlight: function (element) {
$(element)
.closest(".control-group")
.removeClass("success")
.addClass("error");
},
success: function (element) {
$(element)
.closest(".control-group")
.removeClass("error")
.addClass("success");
}
});
}
};
Contact.initialize();
here's the php
<?php
// check if fields passed are empty
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message'])||
empty($_POST['telephone'])||
empty($_POST['ms']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!"; return false;
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];
$telephone = $_POST['telephone'];
$ms = $_POST['ms'];
// create email body and send it
$to = "myemail#gmail.com";
// put your email
$email_subject = "Contact form submitted by: $name"; $email_body = "You have received a new message. \n\n".
" Here are the details:\n \nName: $name \n ".
"Telephone: $telephone \n" .
"Quote For: $ms \n" .
"Email: $email_address\n Message: \n $message";
//$headers = "From: me#youremail.com\n";
//$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers); return true;
?>

give name to your field called ms otherwise it will not go to php because it identifies name not id and based on your condition checking it will always show No arguments Provided!.
<select id="ms" multiple="multiple" name="ms">
Try Using $_REQUEST in your PHP if $_POST is not providing the data to check.
NOTE: there is no styling added just expect it to send data to your php nothing else.
<?php
// check if fields passed are empty
print_r($_REQUEST);//it should display the send data
//rest of the code with request
DEMO

You can use the following code to validate so validation plugin will not ignore the hidden <select> element.
The magic happens in this line:
ignore: ':hidden:not("#ms")',
add it to validation script
//AjaxCall Code
},
ignore: ':hidden:not("#ms")',
rules: {
//Rules and messages onwards
Above will fix the issue of validation,
And about data not posting, there is no name="" in <select> tag so add it one, and after validation, <select> value will be posted along with other inputs in <form>
<select style="display: none;" name="ms" id="ms" multiple="multiple" >

Ajax with select box in codeigniter

i have a form with two select box. one is for the city and the other one for the area.
My requirement. When some one selects a city,The areas in the city must be captured from database and displayed in another select box.
i tried but, i have problem with my ajax. here is my code below.
view
<div class="location-group">
<label class="-label" for="city">
Location
</label>
<div class="">
<select id="city_select">
<option value="0"> select</option>
<?php foreach ($city as $cty) : ?>
<option value="<?php echo $cty->city_id; ?>"><?php echo $cty->name; ?></option>
<?php endforeach ?>
</select>
</div>
</div>
<div class="location control-group" id="area_section">
<label class="control-label" for="area">
Area
</label>
<div class="controls">
<select id="area_select">
<option value=""> Any</option>
<?php foreach ($area as $ara) : ?>
<option value="<?php echo $ara->ara_id; ?>"><?php echo $ara->name; ?></option>
<?php endforeach ?>
</select>
</div><!-- /.controls -->
</div><!-- /.control-group -->
controller
function __construct() {
parent::__construct();
//session, url, satabase is set in auto load in the config
$this->load->model('Home_model', 'home');
$this->load->library('pagination');
}
function index(){
$data['city'] = $this->home->get_city_list();
$data['type'] = $this->home->get_property_type_list();
$this->load->view('home', $data);
}
function get_area(){
$area_id = $this->uri->segment(3);
$areas = $this->home->get_area_list($area_id);
echo json_encode($areas);
}
Model
function get_area_list($id){
$array = array('city_id' => $id, 'status' => 1);
$this->db->select('area_id, city_id, name');
$this->db->where($array);
$this->db->order_by("name", "asc");
$this->db->from('area');
$query = $this->db->get();
$result = $query->result();
return $result;
}
Ajax
<script type="text/javascript">
$('#area_section').hide();
$('#city_select').on('change', function() {
// alert( this.value ); // or $(this).val()
if (this.value == 0) {
$('#area_section').hide(600);
}else{
//$("#area_select").html(data);
$.ajax({
type:"POST",
dataType: 'json',
url:"<?php echo base_url('index.php?/home/get_area/') ?>",
data: {area:data},
success: function(data) {
$('select#area_select').html('');
$.each(data, function(item) {
$("<option />").val(item.area_id)
.text(item.name)
.appendTo($('select#area_select'));
});
}
});
$('#area_section').show(600);
};
});
</script>
once i select a city, it must get all the areas in the city from database and display it in the area_select select box.
can any one please help me. Thanks.

Try to change this way.
Your ajax code
//keep rest of the code
$.ajax({
type:"POST",
dataType: 'json',
url:"<?php echo base_url('index.php?/home/get_area/') ?>",
data: {area:$(this).val()},//send the selected area value
Also show the area_section inside ajax success function
Your controller function
function get_area()
{
$area_id = $this->input->post('area');
$areas = $this->home->get_area_list($area_id);
echo json_encode($areas);
}
Hope it will solve your problem
Update
Try using your ajax update function like this
success: function(data) {
$('select#area_select').html('');
for(var i=0;i<data.length;i++)
{
$("<option />").val(data[i].area_id)
.text(data[i].name)
.appendTo($('select#area_select'));
}
}

Simple way to do that follow the instruction on this page
https://itsolutionstuff.com/post/codeigniter-dynamic-dependent-dropdown-using-jquery-ajax-exampleexample.html
demo_state table:
CREATE TABLE `demo_state` (
`id` int(11) NOT NULL,
`name` varchar(155) NOT NULL,
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
`updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
demo_cities table:
CREATE TABLE `demo_cities` (
`id` int(11) NOT NULL,
`state_id` int(12) NOT NULL,
`name` varchar(155) NOT NULL,
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
`updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
After create database and table successfully, we have to configuration of database in our Codeigniter 3 application, so open database.php file and add your database name, username and password.
application/config/database.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$active_group = 'default';
$query_builder = TRUE;
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => 'root',
'database' => 'test',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
Read Also: How to make simple dependent dropdown using jquery ajax in Laravel 5?
Step 3: Add Route
In this step you have to add two new routes in our route file. We will manage layout and another route for ajax, so let's put route as bellow code:
application/config/routes.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
$route['myform'] = 'HomeController';
$route['myform/ajax/(:any)'] = 'HomeController/myformAjax/$1';
Step 4: Create Controller
Ok, now first we have to create one new controller HomeController with index method. so create HomeController.php file in this path application/controllers/HomeController.php and put bellow code in this file:
application/controllers/HomeController.php
<?php
class HomeController extends CI_Controller {
/**
* Manage __construct
*
* #return Response
*/
public function __construct() {
parent::__construct();
$this->load->database();
}
/**
* Manage index
*
* #return Response
*/
public function index() {
$states = $this->db->get("demo_state")->result();
$this->load->view('myform', array('states' => $states ));
}
/**
* Manage uploadImage
*
* #return Response
*/
public function myformAjax($id) {
$result = $this->db->where("state_id",$id)->get("demo_cities")->result();
echo json_encode($result);
}
}
?>
Step 5: Create View Files
In this step, we will create myform.php view and here we will create form with two dropdown select box. We also write ajax code here:
application/views/myform.php
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter Dependent Dropdown Example with demo</title>
<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Select State and get bellow Related City</div>
<div class="panel-body">
<div class="form-group">
<label for="title">Select State:</label>
<select name="state" class="form-control" style="width:350px">
<option value="">--- Select State ---</option>
<?php
foreach ($states as $key => $value) {
echo "<option value='".$value->id."'>".$value->name."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label for="title">Select City:</label>
<select name="city" class="form-control" style="width:350px">
</select>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('select[name="state"]').on('change', function() {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url:"<?php echo base_url('index.php/Diplome/myformAjax/') ?>"+ stateID,
//url: '/myform/ajax/'+stateID,
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="city"]').empty();
$.each(data, function(key, value) {
$('select[name="city"]').append('<option value="'+ value.id +'">'+ value.name +'</option>');
});
}
});
}else{
$('select[name="city"]').empty();
}
});
});
</script>
</body>
</html>

Play Framework: cannot read value of textfield with javascript

I could not figure out a way to read the current value of the email field. Everytime I read it, for example with a keyup event, nothing is retrieved. This issue just affects this field. I can read the values of the other textfields without a problem.
createFormOnly.scala.html
This is my view containing the form and jquery code to print the value of the text field. Note that the validation of the #fullname field works without any troubles.
#(signupForm: Form[models.Register], loginForm: Form[Application.Login])
#import helper._
#implicitFieldConstructor = #{
FieldConstructor(twitterBootstrapInput.render)
}
<div class="well">
<h3>#Messages("signup.new")</h3>
#if(flash.get("error")!=null) {
<p class="error">
<span class="label label-danger">#Messages(flash.get("error"))</span>
</p>
}
#form(controllers.account.routes.Signup.save(), 'id -> "signupForm") {
<script type="text/javascript">
$( document ).ready(
function()
{
// Setup form validation on the signupForm element
$("#signupForm").validate({
// Specify the validation rules
rules: {
email: {
required: true
},
fullname: {
required: true,
namecheck: true
}
},
// Specify the validation error messages
messages: {
email: "<p class='error'><span class='label label-danger'>Email missing.</span></p>",
fullname: "<p class='error'><span class='label label-danger'>Name is already used.</span></p>"
},
// handler which handles the submit
submitHandler: function(form) {
form.submit();
}
});
jQuery.validator.addMethod("namecheck", function(value) {
var dataString = {
"action" : "namecheck",
"display_name" : value
};
var check_result = false;
jQuery.ajax({
type: "GET",
url: "http://localhost:9000/checkName/"+$( '#fullname' ).val(),
async: false,
data: dataString,
dataType: "json",
success: function(data){
check_result = (data.toString() == "true");
}
});
console.log(check_result);
return check_result;
}, "error message");
$('body').on("keyup",'#email', function(){
console.log('keyed email');
console.log($('body #email').val());
console.log($('#email').val());
console.log($('#email').attr('value'));
});
$('body').on("keyup",'#fullname', function(){
console.log('keyed fullname');
console.log($('body #fullname').val());
console.log($('#fullname').val());
console.log($('#fullname').attr('value'));
});
}
);
</script>
<ul class="list-group">
<li class="list-group-item">
#inputText(
signupForm("email"),
'placeholder -> Messages("accout.register.create.email"),
'_label -> Messages("email"),
'class -> "form-control",
'_showConstraints -> false,
'id -> "email"
)
</li>
<li class="list-group-item">
#inputText(
signupForm("fullname"),
'placeholder -> Messages("accout.register.create.fullname"),
'_label -> Messages("fullname"),
'class -> "form-control",
'_showConstraints -> false,
'id -> "fullname"
)
</li>
<li class="list-group-item">
#inputPassword(
signupForm("inputPassword"),
'_label -> Messages("password"),
'placeholder -> Messages("accout.register.create.password"),
'class -> "form-control",
'_showConstraints -> false
)
</li>
<li class="list-group-item">
<div class="form-actions">
<input type="submit" class="btn btn-primary" value="#Messages("signup.signup")">
</div>
</li>
</ul>
}
</div>
View creating the form create.scala.html
#(signupForm: Form[models.Register], loginForm: Form[Application.Login])
#scripts = {
<script src="#routes.Assets.at("javascripts/password.js")" type="text/javascript"></script>
}
#main(null, scripts) {
#views.html.guestNavBar(loginForm)
#createFormOnly(signupForm, loginForm)
}
Running it in Chrome / Console output
Now i run the application an type values in the the text fields. An 'a' in the fullname textfield and an 'e' into the email textfield. As shown in the console it is empty.
keyed fullname signup:234
a signup:235
a signup:236
signup:237
true signup:222
keyed email signup:77
signup:78
signup:79
signup:80

A clue might be in the jQuery documentation for the 'val()' mathod:
"Get the current value of the first element in the set of matched elements"
So where you have:
console.log($('#email').val());
It could be in fact another element other than your input that's getting its value output.
Check the HTML that gets output to the browser for another element with ID 'email'. 'email' being quite a generic name there might be something else in the page using this ID.