Method for passing JS variable to PHP with Ajax?
Question
I have a codeigniter application plugged into a wordpress site. I need to modify a shortcode in php according to an html selected option value in my view. The shortcode adds a form to my html page. I am thinking that I need to use Ajax to move the data from JS to PHP. I am confused as to how to get this done. This is the basic sequence that must be done (minus the Ajax or whatever other method is needed):
In my View I need to have the following components:
<html>
<select id="select-service">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
//This is where I am putting the short code I made in JS
<?php echo do_shortcode("shortCode GOES HERE"); ?>
</html>
<script>
function getService() {
var serviceItem = $('#select-service option:selected').text();
shortCode = "[wpi_checkout item='" + serviceItem + "']" ;
//AN AJAX SEQUENCE HERE?
var postUrl = GlobalVariables.baseUrl + '/ajax_serviceitem';
$.ajax({
url: postUrl,
method: 'post',
data: shortCode,
success: function(data) {
alert(data);
}
});
}
$(document).ready(getService);
$('select').on('change', getService);
</script>
In my controller I suppose I need a function like this:
public function ajax_serviceitem() {
$shortcode = $_POST('shortCode')
$this->load->view('myview', $shortcode);
//I am lost as to what to do next
}
Am I on the right track or am I over complicating this?
3 answers
solution1
0 2017-12-21 08:59:29
function getService() {
var serviceItem = $('#select-service option:selected').val();
data = {'shortCode':serviceItem};
//AN AJAX SEQUENCE HERE?
var postUrl = GlobalVariables.baseUrl + '/ajax_serviceitem';
$.ajax({
url: postUrl,
type: "POST",
dataType: 'json',
data : data,
success: function(data) {
alert(data);
}
});
}
======================== AND Another fix I seen is ==================
public function ajax_serviceitem() {
$shortcode = $_POST['shortCode']
$this->load->view('myview', $shortcode);
//I am lost as to what to do next
}
solution2
0 2017-12-21 09:13:29
You can try this solution for your problem :
JS :
function getService() {
var serviceItem = $('#select-service option:selected').val();
data = {'shortCode':serviceItem};
//AN AJAX SEQUENCE HERE?
var postUrl = GlobalVariables.baseUrl + '/ajax_serviceitem';
$.ajax({
url: postUrl,
type: "POST",
dataType: 'json',
data : data,
success: function(response) {
if (response.status == 'success') {
console.log("Success Request");
$("#view_selector").html(response.my_view_file);
} else {
console.log("Fail Request");
}
}
});
}
PHP :
public function ajax_serviceitem() {
if ($this->input->is_ajax_request()) {
$shortcode = $this->input->post('shortCode');
if (!empty($shortcode)) {
$my_view_file = $this->load->view('myview', $shortcode, TRUE);
$data['status'] = 'success';
$data['my_view_file'] = $my_view_file;
} else {
$data['status'] = 'error';
$data['my_view_file'] = "";
}
echo json_encode($data);
exit;
} else {
redirect('login/logout'); // Logout URL here
}
}
I hope it will help.
solution3
0 ACCPTED 2018-01-03 16:08:22
The problem here is that although the php work is done on the server the variable passed back is in JS so it will not work. I solved my problem by adding some php to my view to collect options from the view and build short codes from them:
//First: In css I hid all the elements that the short code produces
//This select box is built by a foreach routine in my controller.
<html>
<select id="select-service">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
//This is where I am putting the short code. I am grabbing $service['id'] from my database in my controller and sending it to the view. I am building a bunch of divs that reflect the values of the select options here rather than in the controller. I have to do this because the wordpress do_shortcode() hook will only work in the view.
<?php foreach($available_services as $service) {
$shortcode = "[wpi_checkout item='" . $service['id'] "' title ='session_ID' callback_function='ea_paypalcallback']"; ?>
<div id="<?php echo $service['id'] ?>" class="shortcode"><?php echo do_shortcode($shortcode)?></div>
<?php } ?>
</html>
Then I ran the following on success from my Ajax send for other stuff:
var selServiceId = $('#select-service').val();
$('#' + selServiceId ).find(':submit').click();
That did it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.