I'm generating a custom field on the Wordpress admin panel. I want to add 2 buttons:
1. Add another
2. Remove field
The add button should generate the same field. I need help coding the javascript that generates the fields.
Here is my code:
$html = '';
$html .= '<div class="pyre_metabox_field">';
$html .= '<label for="pyre_' . $id . '">';
$html .= $label;
$html .= '</label>';
$html .= '<div class="field">';
$html .= '<input type="text" id="pyre_' . $id . '" name="pyre_' . $id . '" value="' . get_post_meta($post->ID, 'pyre_' . $id, true) . '" />';
if($desc) {
$html .= '<p>' . $desc . '</p>';
}
$html .= '<p style="margin-bottom:15px; padding-top:5px;clear:both;">Add Remove</p>';
$html .= '</div>';
$html .= '</div>';
Have you tried : Advanced Custom Fields ?
This plugin is really simple to use, and I'm pretty sure it can do what you're trying to do. It may save you a lot of work :)
Related
Is it possible to have a php array sorted by clicking on a button?(Alphabetically or by year)
I am using fullpage.js and Columnizer jQuery plugin. Unfortunately, the problem is that I have to make a new table for each new slide. (Maybe someone knows a better solution?)
Or is it more useful javascript / jquery to use?
here is the Code:
// get table data from Plugin TablePress
$table = TablePress::$model_table->load( $atts['table-id'], true, true );
//only get the important data
$data = $table['data'];
$output = '<div id="tablecontest-slider">';
$output .= '<div class="section" id="section0">';
array_shift($data);
$counter = 1;
foreach ($data as $value) {
if ($counter == 1) {
$output .= '<div class="slide">';
$output .= '<div class="columnize">';
$output .= '<table>';
}
$output .= '<tr>';
$output .= '<td>' . $value[0] . '</td>';
$output .= '<td>' . $value[1] . '</td>';
$output .= '<td>' . $value[2] . '</td>';
$output .= '</tr>';
$counter++;
if ($counter == 21) {
$counter = 1;
$output .= '</table>';
$output .= '</div>';
$output .= '</div>';
}
}
$output .= '</div>';
$output .= '</div>';
return $output;
I dont know how to sort the array by click on a button..
Thank you for ideas and suggestions
No, you can't. PHP is running on your server and delivers the page. So there is no PHP-Array anymore once you render the site in your browser.
If you would get your data via an AJAX-call you COULD implement sorting and filtering on the server.
You can't directly sort anything on PHP from JS. BUT you can send an Ajax query on the button click, and respond with the PHP array sorted.
The day names on my site are in English.
How can I get the day names in Russian?
In JavaScript I tried to replace Tuesday->Вторник in code but it is not working.
Code:
<?php
$ip = $_SERVER['REMOTE_ADDR'];
$url = 'http://api.sypexgeo.net/xml/'. $ip .'';
$xml = simplexml_load_string(file_get_contents($url));
$loc_array = array($xml->ip->city->lat,$xml->ip->city->lon);
$loc_safe = array();
foreach($loc_array as $loc){
$loc_safe[] = urlencode($loc);
}
$loc_string=implode(',', $loc_safe);
$json = file_get_contents('http://api.wunderground.com/api/232323***/satellite/webcams/forecast/q/' . $loc_string . '.json');
$obj = json_decode($json, true);
?>
<?
$html .= "</h2><table cellpadding=4 cellspacing=3><tr>";
foreach ($obj['forecast']['simpleforecast']['forecastday'] as $arr) {
$html .= "<td align='center'>" . $arr['date']['weekday'] . "<br />";
$html .= "<img src='http://icons-pe.wxug.com/i/c/k/" . $arr['icon'] . ".gif' border=0 /><br />";
$html .= "<font color='red'>" . $arr['high']['celsius'] . '°C' . " </font>";
$html .= "<font color='blue'>" . $arr['low']['celsius'] . '°C' . "</font>";
$html .= "</td>";
}
$html .= "</tr></table>";
echo $html;
?>
<script type="text/javascript">
window.onload=function(){
//I try, but not replace
$("td:contains('Tuesday')").html("Вторник");
};
</script>
As an option, you can change the call to wunderground API. Include language settings /lang:xy. Something like this:
https://api-ak-aws.wunderground.com/api/8dee7a0******/satellite/webcams/forecast/lang:RU/units:metric/v:2.0/q/CWEW.json
You can try defining a JSON object like:
days = { "name of the day": "name of the day in Russian" }
Then instead of using $arr['date']['weekday'] use days[$arr['date']['weekday']].
Note: I don't know the php syntax actually, but something like that should work.
I have an issue with my grid, after loading data and enabling vertical scroll, i find my grid loaded with additional space after the my rows. I want that removed, any idea why i am getting this ?
This is my grid with the scroll bar
This is the problem
I just want the scroll bar to stop at number 20, i don't want all that additional space.
And this is my grid setting :
$html .= '$("#'. $this->_name .'").jqGrid({';
$html .= 'url:"tools/grid_server_calls.php",';
$html .= 'datatype: "json",';
$html .= 'autoencode: true,';
$html .= 'mtype: "POST",';
$html .= 'postData:{inputs:'. $this->_server_inputs .'},';
$html .= 'gridview: true,';
$html .= 'ignoreCase: true,';
//$html .= 'loadui: "block",';
$html .= 'hidegrid: false,';
$html .= 'width: "' . $this->_width_grid . 'px",';
$html .= 'forceFit: true,';
$html .= 'pager: "#pager_'.$this->_name.'",';
$html .= 'rowNum: ' . $this->_rowNum . ',';
$html .= 'rowList: [' . $this->_rowList . '],';
if( $this->_scroll_enabled ){
$html .= 'scroll: true,';
$html .= 'height: "230px",';
}
else{
$html .= 'height: "auto",';
}
$html .= 'viewrecords: true,';
$html .= 'emptyrecords:"'.$this->_message_no_records.'",';
$html .= 'recordtext:"{0} - {1} / {2}",';
$html .= 'altRows: true,';
$html .= 'multiselect: "' . $this->_multiselect .'",';
$html .= 'altclass: "color_line_grid",';
$html .= 'caption: "' . $this->_caption . '",';
$html .= 'colNames: [' . $this->_colNames . '],';
$html .= 'colModel: [' . $this->_colModel . '],';
$html .= 'sortname: "' . $this->_initialSort . '",';
$html .= 'sortorder: "asc",';
if(!$this->_search_enabled){
$html .= 'pgbuttons: false,';
$html .= 'pgtext: null,';
$html .= 'rowList: [],';
$html .= 'cmTemplate: {sortable:false},';
}
I got to the root of the problem, it was as simple as learning to read before asking dumb questions, in fact you need not set scroll to true, you just need to set a height, when the data exceeds the height that was set, the scroll bar will appear automatically 'In my case' .
There's a lot of Stack Overflow questions on this topic, but none seem to work for me.
This may be due to the fact that I need a PHP function called when the div is refreshed in order for the information to be updated.
I have a #tab-project-CD-smt_test div that shows three versions (production, staging, and latest). The user can click an arrow next to the staging or latest to move it up the chain. I have this part working fine through the use of an AJAX request:
function sendToStaging (dir, type, subtype, version) {
//Need selected category, selected type, selected subtype
$.ajax({
type: 'POST',
url: 'configs.php',
data: 'function=sendToStaging'+'&dir='+dir+'&type='+type+'&subtype='+subtype+'&version='+version,
success: function() {
// window.location.reload(true);
$('#deployed').load(document.URL);
}
});
};
function sendToProduction (dir, type, subtype, version) {
//Need selected category, selected type, selected subtype
$.ajax({
type: 'POST',
url: 'configs.php',
data: 'function=sendToProduction'+'&dir='+dir+'&type='+type+'&subtype='+subtype+'&version='+version
});
On success, I would like to refresh the #deployed div, which is created in my PHP makeInfoSection. An excerpt of which is below:
// list latest, staging, production
$html .= '<h4>Deployed Versions</h4>';
$html .= '<ul class="list-group" id="deployed">';
$html .= '<li class="list-group-item">';
$html .= '<span class="badge">production</span>';
$html .= $production.'</li>';
$html .= '<li class="list-group-item">';
$html .= '<span class="badge"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true" onclick="sendToProduction('."'$dir', '$type', '$subType', '$staging'".')"></span></span>';
$html .= '<span class="badge">staging</span>';
$html .= $staging.'</li>';
$html .= '<li class="list-group-item">';
$html .= '<span class="badge"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true" onclick="sendToStaging('."'$dir', '$type', '$subType', '$latest'".')"></span></span>';
$html .= '<span class="badge">latest</span>';
$html .= $latest.'</li>';
$html .= '</ul>';
The method is called in the HTML:
<div class="col-md-5 col-md-push-1 col-sm-6">
<div id="tabs" class="tab-content" style="padding:0em 0em 0em 1em">
<?php
foreach ($project_types as $type) {
// #TODO remove once folder structure is all setup
if ($type !== 'CD') continue;
foreach ($project_subtypes[$type] as $subType) {
$html = "<div role ='tabpanel' class='tab-pane'";
$html .= "id='tab-project-".$type."-".$subType."'>";
$html .= makeInfoSection($type, $subType, $project_versions[$subType], $project_dir);
$html .= "</div>";
echo $html;
}
}
foreach ($workflow_types as $type) {
foreach ($workflow_subtypes[$type] as $subType) {
$html = "<div role ='tabpanel' class='tab-pane'";
$html .= "id='tab-workflow-".$type."-".$subType."'>";
$html .= makeInfoSection($type, $subType, $workflow_versions[$subType], $workflow_dir);
$html .= "</div>";
echo $html;
}
}
?>
</div>
</div>
</div>
So upon the success of the AJAX, I need this to be refreshed. I've tried $('#tab-project-CD-smt_test').load(document.URL); but that doesn't seem to do anything. I've also tried calling the makeInfoSection method but that does not add it to the HTML, so I'm not surprised that it didn't work:
$approved_functions = array('sendToProduction', 'sendToLatest', 'sendToStaging');
if(array_key_exists('function', $_POST) && in_array($_POST['function'], $approved_functions)) {
// call the approved function
$dir = $_POST['dir'];
$type = $_POST['type'];
$subType = $_POST['subtype'];
$version = $_POST['version'];
$_POST['function']($dir, $type, $subType, $version);
makeInfoSection($type, $subType, $versions, $dir);
}
Any ideas on how to get this div to refresh?
#tibsar, you mentioned that #deployed isn't unique across your page. While you should try to avoid this, to answer your question, you mentioned that #tab-project-CD-smt_test is unique, so ajax loading that should work for you.
If you'd like to use .load, try this in your success callback:
$('#tab-project-CD-smt_test').load(document.URL + ' #tab-project-CD-smt_test');
Let us know if that works.
I have a WordPress theme that outputs a portfolio grid based on a shortcode. If you click on the portfolio featured image, you open a modal box with the project details.
I am trying to use google's virtual pageview tracking to log a pageview when a user clicks to open the modal box.
_gaq.push(['_trackPageview', '/downloads/pdfs/corporateBrief.pdf']);
https://developers.google.com/analytics/devguides/collection/gajs/asyncMigrationExamples
Here is how the the portfolio html is generated in my portfolio.php file:
// GENERATE HTML
$html .= '<li class="item' . $thumb_classes . '" data-title="' . get_the_title() . '">';
$html .= '<a href="' . get_the_permalink() . '"';
$html .= $enable_modal ? ' data-ajax-selector=".portfolio-detail"' : '';
$html .= ' class="item-image';
$html .= $enable_modal ? ' m-open-ajax-modal-project' : '';
$html .= '">' . $thumb_image . '</a>';
$html .= $enable_title || $enable_excerpt ? '<div class="item-info">' : '';
$html .= $enable_title ? '<h4 class="m-secondary-font"><a href="' . get_the_permalink() . '"' : '';
$html .= $enable_title && $enable_modal ? ' data-ajax-selector=".portfolio-detail" class="m-open-ajax-modal-project"' : '';
$html .= $enable_title ? '>' . get_the_title() . '</a></h4>' : '';
$html .= $enable_excerpt ? wpautop( get_the_excerpt() ) : '';
$html .= $enable_title || $enable_excerpt ? '</div>' : '';
$html .= $enable_permalink ? '<div class="item-tools"><i class="fa fa-link"></i></div>' : '';
$html .= '</li>';
I've tried adding the code below below the second line but it is causing an error:
$html .= ' onClick="_gaq.push(['_trackPageview', '/downloads/pdfs/corporateBrief.pdf']);"';
Parse error: syntax error, unexpected '_trackPageview' (T_STRING) in
/home/abc/public_html/wp-content/plugins/toolkit/shortcode-generator/shortcodes/portfolio.php
on line 234
I am assuming I should be formatting that onClick code differently but don't know where to start. From what I can tell, php doesn't like the commas ' necessary in the javascript code. Perhaps I'm way off base as well.
Any help would be appreciated!
you forgot to escape the quote mark. so php got error
$html .= ' onClick="_gaq.push([\'_trackPageview\', \'/downloads/pdfs/corporateBrief.pdf\']);"';
would work
And i think using this kind of syntax is better than using dot to contact strings.
<?php
$google = 'http://www.google.com';
?>
<li>
google
<!-- works for php5.3+ -->
goggle2
</li>
Also you may try some editor that support php code highlight, they will show you the problem