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.
Related
I want to add specific css to the link/element when only the previous or next is shown (When the user is on the first or last post, only one is shown)
js
/* Back/Next navigation */
function my_previous_next_post() {
// retrieve the value for next post link
$next_string = "← Previous post";
ob_start();
next_post_link("%link", $next_string);
$next_link = ob_get_clean();
// retrieve the value for previous post link
$previous_string = "Next post →";
ob_start();
previous_post_link("%link", $previous_string);
$previous_link = ob_get_clean();
// build output
$return = PHP_EOL . '<div id="next-previous" class="row">' . PHP_EOL;
// display previous link if any
if ($previous_link) {
$return .= '<div class="col-6 order-2 nav-previous">'. PHP_EOL;
$return .= $previous_link. PHP_EOL;
$return .= '</div>'. PHP_EOL;
}
// display next link if any
if ($next_link) {
$return .= '<div class="col-6 order-1 nav-next">'. PHP_EOL;
$return .= $next_link . PHP_EOL;
$return .= '</div>'. PHP_EOL;
}
$return .= '</div>';
return $return;
}
add_shortcode('backNext-links', 'my_previous_next_post');
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.
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 search field in my index which is search in a mysql db.
The result have link with a product ID, so it's clickable.
I want to make a list from the search result elements which i clicked and take it in a form.
So when i have the list i want to submit all of those to another page.
I think the best idea for that is javascript's click event.
Found some js code on the internet, but i can't use it well, because unfortunately i don't have enough knowledge for javascript yet.
What is the simpliest solution?
javascript what i found
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
$("ul").append("<li>product name! <a href='javascript:void(0);' class='remove'>×</a></li>");
});
$(document).on("click", "a.remove" , function() {
$(this).parent().remove();
});
});
</script>
search.php
<?php
include './config/functions.php';
dbconn();
$html = '';
$html .= '<div class="result">';
$html .= '<a href="urlString" name="urlString">';
$html .= '<h3>category: <b>nameString</b></h3>';
$html .= '<h4>functionString</h4>';
$html .= '</a>';
$html .= '</div>';
$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
if (strlen($search_string) >= 2 && $search_string !== '') {
$query = 'SELECT * FROM products WHERE pro_name LIKE "%'.$search_string.'%"';
$result = mysql_query($query);
while($results = mysql_fetch_array($result)) {
$result_array[] = $results;
}
if (isset($result_array)) {
foreach ($result_array as $result) {
$display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['pro_name']);
$display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['pro_category']);
$display_url = "index.php?".urlencode($_GET['mode'])."&send=".urlencode($result['pro_id']);
$output = str_replace('nameString', $display_name, $html);
$output = str_replace('functionString', $display_function, $output);
$output = str_replace('urlString', $display_url, $output);
echo($output);
}
}else{
$output = str_replace('urlString', 'javascript:void(0);', $html);
$output = str_replace('nameString', '<b>No result to show!</b>', $output);
$output = str_replace('functionString', 'Sorry :(', $output);
echo($output);
}
}
?>
search function in index.php
function product_search(){
$html = '<div id="main">
<div class="icon"></div>
<input type="text" id="search" autocomplete="off">
<h4 id="results-text">search key: <b id="search-string"></b></h4>
<ul id="results"></ul>
</div>';
echo $html;
}
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 :)