I'm having some problems trying to fix my category drop down on the website i'm developing. Basically one drop down filters has "Sort by Location" and the second one is "Sort by Price" The first one is working correctly which is "Sort by Location" but the second one doesn't. It is loading all the post and not filtering properly.
Here is the link -
http://digitalspin.ph/federalland/?page_id=23
Here is my code
HTML-
<div class="filter_container">
<?php wp_dropdown_categories( $args_cat1 ); ?>
</div>
<div class="filter_container">
<?php wp_dropdown_categories( $args_cat2 ); ?>
</div>
JS-
<!--DROPDOWN SORT CATEGORY 1 -->
<script type="text/javascript">
var dropdown = document.getElementById("cat1");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
</script>
<!--DROPDOWN SORT CATEGORY 2-->
<script type="text/javascript">
var dropdown = document.getElementById("cat2");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
</script>
Functions.php
//LOCATION FILTER
$args_cat2 = array(
'show_option_all' => '',
'show_option_none' => '',
'orderby' => 'ID',
'order' => 'ASC',
'show_count' => 0,
'hide_empty' => 1,
'child_of' => 0,
'exclude' => '1,2,3,4,32,33,34,35,36,37',
'echo' => 1,
'selected' => 0,
'hierarchical' => 0,
'name' => 'cat2',
'id' => 'cat2',
'class' => 'postform',
'depth' => 0,
'tab_index' => 0,
'taxonomy' => 'category',
'hide_if_empty' => false,
'walker' => ''
);
//PRICE FILTER
$args_cat1 = array(
'show_option_all' => '',
'show_option_none' => '',
'orderby' => 'ID',
'order' => 'ASC',
'show_count' => 0,
'hide_empty' => 1,
'child_of' => 0,
'exclude' => '1,2,3,4,23,24,25,26,27,28,29,30,31',
'echo' => 1,
'selected' => 0,
'hierarchical' => 0,
'name' => 'cat1',
'id' => 'cat1',
'class' => 'postform',
'depth' => 0,
'tab_index' => 0,
'taxonomy' => 'category',
'hide_if_empty' => false,
'walker' => ''
);
Here is a javascript error from firebug-
TypeError: dropdown is null
dropdown.onchange = onCatChange;
Whenever i pick a category in "Sort by Price" it display all the post from "Sort by Location" which is category ID 23
The main problem is that you think your 2 javascripts are executed in different contexts, they are not. They are executed in the same context so
<script type="text/javascript">
var dropdown = document.getElementById("cat1");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
var dropdown = document.getElementById("cat2");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
</script>
Would produce the exact same result. You need to change the names of some of your variables and functions so they dont collide or do something like:
document.getElementById("cat1").onChange = function(){
if ( this.options[this.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');?>/?cat="+this.options[this.selectedIndex].value;
}
}
document.getElementById("cat2").onChange = function(){
if ( this.options[this.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');?>/?cat="+this.options[this.selectedIndex].value;
}
}
Or maybe even better
var catChanger = function(){
if ( this.options[this.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');?>/?cat="+this.options[this.selectedIndex].value;
}
}
document.getElementById("cat1").onChange = catChanger;
document.getElementById("cat2").onChange = catChanger;
Related
I'm trying to create a search using dropdowns in WordPress.
I've got two dropdowns, 1 - Parent Category and 1 - Sub-category.
The Sub-category will show automatically based on the selected Parent category.
My goal is to have the 2 dropdowns with a submit button and have it act as a search, displaying the selected sub-category's posts on the results page.
I've got this far using research but I'm completely lost and struggling as you can see.
Below is my functions.php code used for the search:
// FUNCTIONS.PHP
// Drop-down Ajax call
add_action('wp_ajax_my_special_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
function my_action_callback() {
if(isset($_POST['main_catid'])) {
$categories = get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($categories as $cat) {
$option .= '<option value="'.$cat->term_id.'">';
$option .= $cat->cat_name;
$option .= ' ('.$cat->category_count.')';
$option .= '</option>';
}
echo '<option value="-1" selected="selected">Search...</option>'.$option;
die();
} // end if
}
// Define search for sub-category
function search_filter( $query ) {
// only modify your custom search query.
if ( $query->is_search && $_post['my_search'] == "c_search") {
$args = array(
'relation' => 'AND',
array(
'taxonomy' => 'category',
'field' => 'id',
'terms' => array( $_post['main_cat']),
'operator' => 'IN'
),
array(
'taxonomy' => 'category',
'field' => 'id',
'terms' => array( $_post['sub_cat']),
'operator' => 'IN'
)
);
$query->set( 'tax_query', $args);
}
return $query;
}
// The hook needed to search_filter
add_filter( 'the_search_query','search_filter');
This is the HTML & JS code used for the form and Ajax call for the sub-categories:
<!-- BODY HTML CODE -->
<div id="content">
<!-- Search form-->
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<?php
wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Main Categories&name=main_cat');
?>
<select name="sub_cat" id="sub_cat" enabled="disabled"></select>
<input type="hidden" id="my_search" name="my_search" value="c_search" />
<input type="submit" id="searchsubmit" value="search" />
</div>
</form>
<!-- Dropdown Ajax call script -->
<script type="text/javascript">
jQuery(function() {
jQuery('#main_cat').change(function() {
var $mainCat = jQuery('#main_cat').val();
// call ajax
jQuery("#sub_cat").empty();
jQuery.ajax({
url: "wp-admin/admin-ajax.php",
type: 'POST',
data: 'action=my_special_action&main_catid=' + $mainCat,
success: function(results) {
// alert(results);
jQuery("#sub_cat").removeAttr("disabled");
jQuery("#sub_cat").append(results);
}
});
});
});
</script>
</div>
the_search_query filter is not for that purpose. Use pre_get_posts filter instead.
Try this code:
// Define search for sub-category
function search_filter( $query ) {
// only modify your custom search query.
if ( $query->is_search && !is_admin() && $_post['my_search'] == "c_search" ) {
$args = array(
'relation' => 'AND',
array(
'taxonomy' => 'category',
'field' => 'id',
'terms' => array( $_post['main_cat']),
'operator' => 'IN'
),
array(
'taxonomy' => 'category',
'field' => 'id',
'terms' => array( $_post['sub_cat']),
'operator' => 'IN'
)
);
$query->set( 'tax_query', $args);
}
return $query;
}
add_filter( 'pre_get_posts', 'search_filter' );
I'm currently building a website with a number of components in Timber, however I have one specific component that breaks the page entirely on mobile and I'm unsure why.
I can only assume it's something to do with either the WP loop or the ajax call. I've never had this issue in the past when running WP loops, however I'm fairly new to Timber itself so I'm wondering whether there is something specific that I'm missing that's Timber-related.
//functions.php
<?php
namespace Flynt\Components\Portfolio;
use Timber\Timber;
const POST_TYPE = 'portfolio';
add_filter('Flynt/addComponentData?name=Portfolio', function ($data) {
$postType = POST_TYPE;
$data['path'] = get_stylesheet_directory_uri() . '/Components/Portfolio';
$data['items'] = Timber::get_posts([
'post_status' => 'publish',
'post_type' => $postType,
'posts_per_page' => -1,
'ignore_sticky_posts' => 1,
'post__not_in' => array(get_the_ID())
]);
$data['go_to_market_options'] = Timber::get_terms([
'taxonomy' => 'Go To Market',
'hide_empty' => true,
'orderby' => 'name',
'order' => 'asc'
]);
$data['funding_stage_options'] = Timber::get_terms([
'taxonomy' => 'Funding Stage',
'hide_empty' => true,
'orderby' => 'name',
'order' => 'asc'
]);
$data['industry_options'] = Timber::get_terms([
'taxonomy' => 'Industry',
'hide_empty' => true,
'orderby' => 'name',
'order' => 'asc'
]);
return $data;
});
function filter_portfolio() {
$context = Timber::get_context();
$context['orderby'] = $_POST['orderby'];
$args = array(
'suppress_filters' => true,
'post_type' => 'portfolio',
'post_status' => 'publish',
'orderby' => $context['orderby'],
'posts_per_page' => -1,
'fields' => 'ids',
'cache_results' => false,
);
if($context['orderby'] == 'name'):
$args['order'] = 'ASC';
endif;
$context['items'] = Timber::get_posts($args);
Timber::render( 'Partials/portfolio-loop.twig', $context );
die();
}
add_action('wp_ajax_filter_portfolio', 'Flynt\Components\Portfolio\filter_portfolio');
add_action('wp_ajax_nopriv_filter_portfolio', 'Flynt\Components\Portfolio\filter_portfolio');
//scripts.js
...
const getPortfolioResults = () => {
$.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
dataType: "html",
data: {
action: "filter_portfolio",
orderby: orderby,
},
success: function (data) {
$loadingIcon.hide();
if (data.length) {
$(data).insertAfter($(".portfolio-grid div#insert"));
}
},
error: function () {
$loadingIcon.hide();
$(".no-results").fadeIn();
},
});
};
...
// portfolio-loop.twig
{% for item in items %}
{% include "Partials/portfolio-item.twig" %}
{% endfor %}
I'm new to Drupal
I built custom module similar to webform
my module page contains two submit buttons and 2 textbox as below :
function contact_request($form, &$form_state) {
$form ['info'] =array(
'#markup' => "<div id='pageRequestDiv'>",
);
$form['number'] = array(
'#prefix' => '<div class="webform-container-inline2">',
'#suffix' => '</div>',
'#type' => 'textfield',
'#title' => t('Number'),
'#size' => 20,
'#maxlength' => 255,
'#attributes'=>array('class'=>array('txtli')),
'#required'=>true,
);
$form['send_vcode'] = array(
'#prefix' => '<div style="margin-top:30px;">',
'#suffix' => '</div><br/><br/>',
'#type' => 'submit',
'#value' => t('Send Verification Code'),
'#ajax' => array(
'callback' => 'send_Verification_code_callback',
'wrapper' => 'ContactUsMsgDiv',
'method'=>'replace',
'effect'=>'fade',
),
);
$form['verification_code'] = array(
'#prefix' => '<div class="webform-container-inline2">',
'#suffix' => '</div>',
'#type' => 'textfield',
'#title' => t('Verification Code'),
'#size' => 20,
'#maxlength' => 255,
'#attributes'=>array('class'=>array('txtli')),
'#required'=>true,
);
$form['sendmail'] = array(
'#prefix' => '<div style="margin-top:30px;">',
'#suffix' => '</div></div>',
'#type' => 'submit',
'#value' => t('Send Request'),
'#ajax' => array(
'callback' => 'get_contact_us_callback',
'wrapper' => 'ContactUsMsgDiv',
'method'=>'replace',
'effect'=>'fade',
),
);
return $form;
}
the user enter number then first button send him sms to mobile after that he typed sms in second text box then click send.
I want to disable first button after user clicking it 3 times.
I tried the JS below but it's disable both buttons after one click. I want to disable first button only after 3 clicks
Drupal.behaviors.hideSubmitButton = {
attach: function(context) {
$('form.node-form', context).once('hideSubmitButton', function () {
var $form = $(this);
$form.find('input.form-submit').click(function (e) {
var el = $(this);
el.after('<input type="hidden" name="' + el.attr('name') + '" value="' + el.attr('value') + '" />');
return true;
});
$form.submit(function (e) {
if (!e.isPropagationStopped()) {
$('input.form-submit', $(this)).attr('disabled', 'disabled');
return true;
}
});
});
}
};
Updated code :
function send_Verification_code_callback($form, &$form_state){
some code to send sms
return $form;
}
function contact_us_request($form, &$form_state) {
$form['#prefix'] = '<div id="my-form-wrapper">';
$form['#suffix'] = '</div>';
$form ['info'] =array(
'#markup' => "<div id='pageAbiliRequestDiv'>",
);
$form['contact_number'] = array(
'#prefix' => '<div class="webform-container-inline2">',
'#suffix' => '</div>',
'#type' => 'textfield',
'#title' => t('Contact Number'),
'#size' => 20,
'#maxlength' => 255,
'#attributes'=>array('class'=>array('txtabili')),
'#required'=>true,
);
$form['verification_code'] = array(
'#prefix' => '<div class="webform-container-inline2">',
'#suffix' => '</div>',
'#type' => 'textfield',
'#title' => t('Verification Code'),
'#size' => 20,
'#maxlength' => 255,
'#attributes'=>array('class'=>array('txtabili')),
'#required'=>true,
);
$form['send_vcode'] = array(
'#prefix' => '<div style="margin-top:30px;">',
'#suffix' => '</div><br/><br/>',
'#type' => 'submit',
'#value' => t('Send Verification Code'),
'#ajax' => array(
'callback' => 'send_Verification_code_callback',
'wrapper' => 'my-form-wrapper',
'method'=>'replace',
'effect'=>'fade',
),
);
$form['sendmail'] = array(
'#prefix' => '<div style="margin-top:30px;">',
'#suffix' => '</div></div>',
'#type' => 'submit',
'#value' => t('Send Request'),
'#ajax' => array(
'callback' => 'get_contact_us_callback',
'wrapper' => 'ContactUsMsgDiv',
'method'=>'replace',
'effect'=>'fade',
),
);
$form['clicks'] = array(
'#type' => 'value',
);
if (isset($form_state['values']['clicks'])) {
if ($form_state['values']['clicks'] == 3) {
$form['send_vcode']['#disabled'] = TRUE;
} else {
$form['clicks']['#value'] = $form_state['values']['clicks'] + 1;
}
} else {
$form['clicks']['#value'] = 0;
}
I'd use AJAX callback rather than JavaScript check.
Wrap the whole form with some div:
$form['#prefix'] = '<div id="my-form-wrapper">';
$form['#suffix'] = '</div>';
and set
$form['send_vcode'] = array(
...
'#ajax' => array(
'wrapper' => 'my-form-wrapper',
...
(and also include your message area into the form). In your send_Verification_code_callback function return the whole form.
The trick is then to add value component to the form which will contain number of clicks:
$form['clicks'] = array(
'#type' => 'value',
);
if (isset($form_state['values']['clicks'])) {
if ($form_state['values']['clicks'] == 3) {
$form['send_vcode']['#disabled'] = TRUE;
} else {
$form['clicks']['#value'] = $form_state['values']['clicks'] + 1;
}
} else {
$form['clicks']['#value'] = 0;
}
After 3 clicks on send_vcode button it will be disabled.
=== UPDATE ===
Here is working code (without all unnecessary stuff), which shows amount of clicks left in the pageAbiliRequestDiv div:
function contact_us_request($form, &$form_state) {
$form['#prefix'] = '<div id="my-form-wrapper">';
$form['#suffix'] = '</div>';
$form['clicks'] = array(
'#type' => 'value',
);
$clicks_max = 3;
if (isset($form_state['values']['clicks'])) {
$form['clicks']['#value'] = $form_state['values']['clicks'] + 1;
$clicks_left = $clicks_max - 1 - $form_state['values']['clicks'];
} else {
$form['clicks']['#value'] = 0;
$clicks_left = $clicks_max;
}
$form ['info'] =array(
'#markup' => '<div id="pageAbiliRequestDiv">'
. t('Clicks left: #clicks_left', array('#clicks_left' => $clicks_left))
. '</div>',
);
$form['send_vcode'] = array(
'#prefix' => '<div style="margin-top:30px;">',
'#suffix' => '</div><br/><br/>',
'#type' => 'button',
'#value' => t('Send Verification Code'),
'#ajax' => array(
'callback' => 'send_Verification_code_callback',
'wrapper' => 'my-form-wrapper',
'method'=>'replace',
'effect'=>'fade',
),
);
if ($clicks_left == 0) {
$form['send_vcode']['#disabled'] = TRUE;
}
return $form;
}
function send_Verification_code_callback($form, &$form_state) {
return $form;
}
I use the follow code to handle WordPress pagination. For instance, if the user goes to page 9, My code will echo this URL
'http://jjh.com/Cute/page/9/?post_per_page=60'.
My problem is this:
can I reset the page to 1 whenever I change the post_per_page number?
I allow the user to change this parameter, and I want to reset to the top when they use it.
<?php
//I cut some unnecessary code
// I have a select dropdown to select post_per_page
$arg = array(
'post_type' => 'post',
'posts_per_page' => $post_per_page,
'cat' => $page_cat,
'paged' => $paged,
'offset' => $offset,
'prev_text' => __('«'),
'next_text' => __('»'),
'mid_size' => 2
);
$wp_query = new WP_Query($arg);
echo paginate_links( $arg );
?>
Try this code:
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$post_type = 'post';
$args=array(
'post_typr' => $post_type,
'cat' =>3,
'posts_per_page' => 6,
'paged' => $paged,
'orderby' => 'title',
'order' => 'asc'
);
$my_query = null;
$my_query = new WP_Query($args);
After adding this code use while query <?php if ($my_query->have_posts() ) :
while ($my_query->have_posts()) : $my_query->the_post(); ?>
After while query end tag use <?php
$big = 999999999; // need an unlikely integer
echo paginate_links( array(
'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $my_query->max_num_pages
) );
?>
And then close if statement. <?php endif; wp_reset_query();?>
I'm newbie with Yii.
I have a CGridview with a cutom dataprovider which takes a parameter $select:
$this->widget('zii.widgets.grid.CGridView', array(
'id' => 'beneficiary-grid',
'dataProvider' => $model->searchForVoucherAssignment($select),
'filter' => $model,
'columns' => array(
'id',
'registration_code',
'ar_name',
'en_name',
'family_member',
'main_income_source',
'combine_household',
array( 'class'=>'CCheckBoxColumn', 'value'=>'$data->id', 'selectableRows'=> '2', 'header' => 'check',
),
),
));
That parameter $select takes its values from dropdownlist:
$data = CHtml::listData(Distribution::model()->findAll(array("condition"=>"status_id = 2")), 'id', 'code');
$select = key($data);
echo CHtml::dropDownList(
'distribution_id',
$select, // selected item from the $data
$data,
array(
)
);
So I defined a script to update the CGridview depending on the value of dropdownlist
Yii::app()->clientScript->registerScript('sel_status', "
$('#selStatus').change(function() {
$.fn.yiiGridView.update('beneficiary-grid', {
data: $(this).serialize()
});
return false;
});
");
My model:
public function searchForVoucherAssignment ($distribution_id = 0) {
$criteria = new CDbCriteria;
if ($distribution_id != 0) {
$criteria->condition = "Custom Query...!!";
}
$criteria->compare('id', $this->id);
//Custom Criteria
return new CActiveDataProvider($this, array(
'criteria' => $criteria,
'pagination' => array(
'pageSize' => 20,
),
));
}
The problem is that the CGridview isn't changing where a value of the dropdownlist changed...
I think you have selected the wrong Id for the change event. The Id should be
$('#distribution_id').change(function() {