We Keep Coding

php constants in a javascript file | Add PHP Inside JS

I'm working on a Quiz project. It needs modification constants in javascript files.
const questions=[
{
q:'where is the capital of India',
options:['New Delhi','Kolkatta','Varanashi','Agra'],
answer:1
},
{
q:'Who is the Prime Minister of India',
options:['Amit Shah','Narendra Modi','Rahul Gandhi','None of the above'],
answer:2
},
{
q:'where is the capital of India',
options:['New Delhi','Kolkatta','Varanashi','Agra'],
answer:1
}
]
But we need to add PHP on constant.
Try this, but not working...
const questions=[
{
q:'<?php echo the_field("q_1"); ?>',
options:['(<?php echo the_field("option_1"); ?>)','(<?php echo the_field("option_2"); ?>)','(<?php echo the_field("option_3"); ?>)','(<?php echo the_field("option_4"); ?>)'],
answer:'<?php echo the_field("answer_1"); ?>'
},
{
q:'<?php echo the_field("q_2"); ?>',
options:['<?php echo the_field("option_1_2"); ?>','<?php echo the_field("option_2_2"); ?>','<?php echo the_field("option_3_2"); ?>','<?php echo the_field("option_4_2"); ?>'],
answer:'<?php echo the_field("answer_2"); ?>'
},
{
q:'<?php echo the_field("q_3"); ?>',
options:['<?php echo the_field("option_1_3"); ?>','<?php echo the_field("option_2_3"); ?>','<?php echo the_field("option_3_3"); ?>','<?php echo the_field("option_4_3"); ?>'],
answer:'<?php echo the_field("answer_3"); ?>'
}
]
Here is the full code

If you print your JavaScript using PHP you could achieve the same result using the following code:
<?php
$questions = [
[
q => the_field("q_1"),
options => [
the_field("option_1"),
the_field("option_2"),
the_field("option_3"),
the_field("option_4")
],
answer => the_field("answer_1")
],
[
q => the_field("q_2"),
options => [
the_field("option_1_2"),
the_field("option_2_2"),
the_field("option_3_2"),
the_field("option_4_2")
],
answer => the_field("answer_2")
],
[
q => the_field("q_3"),
options => [
the_field("option_1_3"),
the_field("option_2_3"),
the_field("option_3_3"),
the_field("option_4_3")
],
answer => the_field("answer_3")
],
// ... more options here
];
$output = [];
foreach($questions as $question) {
$q = new stdClass();
$q->q = $question['q'];
$q->options = $question['options'];
$q->answer = $question['answer'];
array_push($output, $q);
}
and then, later in your HTML do something like that:
<script type="text/javascript">
const $questions = <?php echo json_encode($output); ?>;
console.log($questions);
</script>

How to use php for loop to create FilePond instances, and use plugins

I want to use a php for loop to create some file inputs with FilePond.
Each instance needs to have its own unique url, and use the plugins initiated. I have got the actual file uploads working, although the plugins don't seem to be getting used.
<?php
foreach ($objArray as $value) {
$inputNumber2++;
?>
<input name="input_<?= $inputNumber2; ?>_images[]" id="input_<?= $inputNumber2; ?>_images" class="filepond" type="files" multiple />
<script>
document.addEventListener('DOMContentLoaded', function() {
window['input<?= $inputNumber2; ?>Images'] = FilePond.create(
document.querySelector('#input_<?= $inputNumber2; ?>_images'),
{
server: {
url: '<?= Config::get('URL'); ?>',
process: 'upload/images/input_<?= $inputNumber2; ?>_images',
revert: 'upload/revert',
load: 'files/',
},
<?php
if (isset($value->imageArray) && count($value->imageArray) > 0) {
echo 'files: [';
foreach ($value->imageArray as $imageName) {
echo '{
source: "'.$imageName.'",
options: {
type: "local",
file: {
name: "'.$imageName.'",
type: "image/jpeg"
}
}
},';
}
echo '],';
}
?>
}
);
});
</script>
<?php } ?>
...
<script>
document.addEventListener('DOMContentLoaded', function() {
FilePond.registerPlugin(
FilePondPluginFileValidateType,
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginImageTransform,
FilePondPluginImageCrop,
FilePondPluginImageResize
);
FilePond.setOptions({
acceptedFileTypes: ['image/*'],
labelIdle: 'Add images or <span class="filepond--label-action"> Browse </span>',
imagePreviewMaxHeight: 100,
imagePreviewZoomFactor: 1,
});
});
</script>
I'm probably doing it wrong - how should I be doing it?
Also, it is picking up and using the custom label so some settings it is getting.

This line:
document.querySelector('#input_<?= $inputNumber2; ?>_images')
Returns a field with the id input_<?= $inputNumber2; ?>_images. But you've only assigned the name attribute to your input field. I suspect adding the id attribute to the input will solve the issue.
OR you can change the selector to:
document.querySelector('input[name="input_<?= $inputNumber2; ?>_images"]')

Autocomplete data fields in CakePHP

I am new in CakePHP. I have a CakePHP (2.5.1) application which has streets table (with columns id, street_name, house_no, district, city). I need to autocomplete a form by extracting the table data. It should be like, the user will be typing a street name in the Street Name field of a form which has fields- Street Name, House No, District and City. After selecting a street name from auto suggestions, corresponding data (House No, District and City) will be populated in the other fields.
Now, over 25000 data rows are loaded in the streets table which is the entire street database of a city. it is a ClearDB database on Windows Azure. streets table is not linked with other tables of the application through foreign keys. I have Street model, StreetsController , but view is in different folder (app/View/User/add.ctp ). Street model in app/Model/Street.php is following:
class Street extends AppModel {
public function getStreetNames($term = null) {
if(!empty($term)) {
$streets = $this->find('list', array(
'conditions' => array(
'street_name LIKE' => trim($term) . '%'
)
));
return $streets;
}
return false;
}
}
In app/Controller/StreetsController.php,
class StreetsController extends AppController {
public $components = array('RequestHandler');
public function autocomplete($term){
if ($this->request->is('get')) {
$this->autoRender = false;
$data = $this->Street->getStreetNames($term);
$this->set(compact('data'));
$this->set('_serialize', array('data'));
echo json_encode($data);
}
}
}
In app/webroot/js/View/Users/streetdata.js file,
(function($) {
$('#autocomplete').autocomplete({
source: "/streetdata.json",
minLength: 1
});
})(jQuery);
The input forms are in different controller. In app/View/Users/streetdata.ctp file,
<?php
echo $this->Html->script('View/Users/streetdata', array('inline' => false));
?>
<?php echo $this->Form->create('Street', array(
'class' => 'form-horizontal',
'role' => 'form',
'inputDefaults' => array(
'format' => array('before', 'label', 'between', 'input', 'error', 'after'),
'div' => array('class' => 'form-group'),
'class' => array('form-control'),
'label' => array('class' => 'col-lg-2 control-label'),
'between' => '<div class="col-lg-3">',
'style'=>array('width:200px; height:35px;'),
'after' => '</div>',
'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-inline')),
))); ?>
<fieldset>
<legend><?php echo __('Street data '); ?></legend>
<?php
echo $this->Form->input('Street.street_name', array(
'class' => 'ui-autocomplete',
'id' => 'autocomplete'));
echo $this->Form->input('Street.house_no');
echo $this->Form->input('Street.district');
echo $this->Form->input('Street.city');
?>
</fieldset>
<?php echo $this->Form->end(__('Proceed')); ?>
in View/Layouts/default.ctp, i have added followings
echo $this->Html->script('jquery.js');
echo $this->Html->script('bootstrap.min');
echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array('inline' => false));
echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array('inline' => false));
echo $this->Html->css('https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
echo $this->Html->css('font-awesome.min');
echo $this->Html->css('bootstrap.min');
echo $this->Html->meta('icon');
echo $this->fetch('meta');
echo $this->fetch('css');
echo $this->fetch('script');
echo $this->Html->charset();
But the autocomplete fields (street name and others) are not working.
I found following error messages in the console of chrome browser :
-Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:26949/Users/js/jquery.js
-Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:26949/Users/js/bootstrap.min.js
-Uncaught TypeError: Cannot read property 'offsetWidth' of undefined bootstrap.min.js:6
I am struggling to find a solution. Could anyone tell me please what is wrong here ? is it because of the location of .js file ? am i missing anything here?

DataTables Server Side Processing Adding html content select tag not triggering javascript

I have implemented successfully the datatables server side processing on one of my tables just that the $('.select_users').change(function(event){ doesn't work anymore on my select tab, despite the fact it shows correctly. When I try to select an option from the select tag it should action to the jquery function but it doesn't.
EDIT 28 NOV 2014
I have found that there is an issue with the events and server side processing:
http://www.datatables.net/examples/advanced_init/events_live.html.
So how can I convert script BLOCK #1 to match the script from the above link.
I added the
$('#dataTables-ss').on('click', 'tr', function () {
var name = $('td', this).eq(0).text();
alert( 'You clicked on '+name+'\'s row' );
} );
And this was getting triggered.
BLOCK #1 => Jquery - on change of select it should trigger this function
$('.select_users').change(function(event){
var selected_value = this.value;
var id = $(this).find('option:selected').attr('class');
var id = id.split('-');
var select_id = id[1];
$.ajax({
type: 'post',
url: 'includes/ajax.html',
data: {
action: 'confirm_notconfirm_subscribers',
selected_value: selected_value,
select_id: select_id
},
success: function(data) {
$('#message').html(data).fadeIn(1000).fadeOut(1000);
},
error: function() {
$("#result").html('There was an error');
}
});
});
BLOCK #2 => PHP important part
public function read_subscriber_table() {
$table = 'subscribers';
$primaryKey = 'ID';
$columns = array(
array( 'db' => 'name', 'dt' => 1 ),
array( 'db' => 'email', 'dt' => 2 ),
array( // issue is here in the third array where I create the select string.
'db' => 'confirmed',
'dt' => 3,
'formatter' => function( $d, $row ) {
if ($d == '1') {
$confirmed = 'Confirmed';
} else {
$confirmed = 'Not Confirmed';
}
if ($d !== '1') { $selected = 'selected'; } else { $selected = ''; }
$string = '<select class="select_users form-control" name="status-users">
<option class="opt-'.$row["ID"].'" value="1" '.$selected.'>Confirmed</option>
<option class="opt-'.$row["ID"].'" value="0" '.$selected.'>Not Confirmed</option>
</select>';
return $string;
}
),
array(
'db' => 'date',
'dt' => 4,
'formatter' => function( $d, $row ) {
return date( 'd-m-Y', strtotime($d));
}
),
array(
'db' => 'ID',
'dt' => 5,
'formatter' => function( $d, $row ) {
return '<input type="checkbox" class="checkbox_subscribers" value="'.$d.'" >';
}
)
);
$sql_details = $this->dtss_processing();
require( 'ssp.class.php' );
$result = SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns );
$start=$_REQUEST['start'] + 1;
foreach($result['data'] as &$res){
$res[0]=(string)$start;
$start++;
}
echo json_encode($result);
}
BLOCK #3 => Datatables initialized script
$(document).ready(function() {
$('#dataTables-ss').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "includes/data_tables.html?action=read_subscriber_table",
"aaSorting": [[4, 'desc']]
} );
} );
BLOCK #4 => EDIT - before implementing server side the function was looking like this and it was working well.
public function read_subscriber_table() {
$col_names = array('ID', 'name', 'email', 'confirmed', 'date');
$this->read_table('subscribers', $col_names);
$i = 0;
foreach ($this->results as $item) {
$i++;
if ($item->confirmed == '1') {
$confirmed = 'Confirmed';
} else {
$confirmed = 'Not Confirmed';
}
if ($item->confirmed !== '1') { $selected = 'selected'; } else { $selected = ''; }
?>
<tr id="tablerow-<?php echo $item->ID; ?>">
<td><?php echo $i; ?></td>
<td><?php echo $item->name; ?></td>
<td><?php echo $item->email; ?></td>
<td>
<select class="select_users form-control" name="status-users">
<option class="opt-<?php echo $item->ID; ?>" value="1" <?php echo $selected ?>>Confirmed</option>
<option class="opt-<?php echo $item->ID; ?>" value="0" <?php echo $selected ?>>Not Confirmed</option>
</select>
</td>
<td><?php echo $item->date; ?></td>
<td><input type="checkbox" class="checkbox_subscribers" value="<?php echo $item->ID; ?>" ></td>
</tr>
<?php
}
?>
<?php
}

Follwing on from comments...
Using that updated code as a starting point, change $('#dataTables-ss').on('click', 'tr', function () { to $('#dataTables-ss').on('change', '.select_users', function(event){

Get permalink from loop to use outside of loop

In an archive page I have a list of X posts and each post has a thumbnail that is being displayed in a lightbox slideshow.
What i'm trying, is to get the permalink for each post item within a loop, and to print it in a script function that is outside of the loop.
This is the loop for the archive page.
<?php
if ( get_query_var('paged') ) $paged = get_query_var('paged');
if ( get_query_var('page') ) $paged = get_query_var('page');
$query = new WP_Query( array( 'post_type' => 'gallery', 'paged' => $paged, 'orderby' => 'rand' ) );
if ( $query->have_posts() ) : ?>
<div class="work-info">
<a rel="<?php the_permalink();?>" href="<?php echo $imageF[0]; ?>" class="lightbox" data-title="<?php the_title();?>" ></a>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
and on the same php file, just outside the loop...
<script>
jQuery(document).ready(function($){
$('.lightbox').iLightBox(
{
skin: 'smooth',
path: 'horizontal',
linkId: 'showcase',
social: {
buttons: {
facebook: {
URL: "<?php echo get_permalink();?>",
text: "Share it on your Timeline"
},
}
},
}
);
});
</script>
As you see, the URL: "" will only display 1 random permalink from the post list, because is outside the loop.
What i want is to have a URL:" " for each of the posts with their own permalink.
Thanks for your time!

UPDATE
After taking a look at the plugin's code, I suggest to try a different approach. This should work even for image galleries.
You can use the data-options attribute to set the sharing url of each .lightbox item.
Try this:
<a rel="<?php the_permalink();?>" href="<?php echo $imageF[0]; ?>" class="lightbox" data-title="<?php the_title();?>" data-options="social: { facebook: { URL: '<?php the_permalink(); ?>', text:'Share this photo on Facebook' }, twitter: { URL: '<?php the_permalink(); ?>', text:'Share this photo on Twitter' } }" ></a>
And your javascript code should be:
<script>
jQuery(document).ready(function($){
$('.lightbox').iLightBox({
skin: 'smooth',
path: 'horizontal',
linkId: 'showcase'
});
});
</script>
As I see from your code, each .lightbox element has a rel attribute with the post permalink. So I suggest to loop through each element with the class .lightbox (using jQuery .each() method) and add the iLightBox function for each of them. Try the following code:
jQuery(document).ready(function($){
$('.lightbox').each(function() {
$(this).iLightBox({
skin: 'smooth',
path: 'horizontal',
linkId: 'showcase',
social: {
buttons: {
facebook: {
URL: $(this).attr("rel"),
text: "Share it on your Timeline"
}
}
}
});
});
});
Let me know if it works.
More info about jQuery .each() method here.

Not quite sure what you are trying to do with your script, but the way to go would be to build an array of permalinks as the loop runs
Before your loop begins make a
$permalink_array = array();
Then within the link for each post
$permalink_array[] = get_the_permalink();
When you want to print all your permalinks use something like
foreach( $permalink_array as $permalink ) {
echo $permalink;
}