Bootstrap Search Form in Dropdown - javascript

I have a dropdown in my menu but when I click on the search form field inside the dropdown the dropdown instantly closes.
This is my code:
<button id="sharebutton" type="button" class="btn btn-sm btn-info" data-toggle="dropdown" data-hover="dropdown"
data-close-others="true"><i class="fa fa-search"></i> Search
</button>
<ul class="dropdown-menu extended notification">
<li>
<div class="form-group">
<?php echo $this->Form->create('Search', array('controller' => 'searches', 'action' => 'prodsearch')); ?>
<div class="input-group">
<?php echo $this->Form->input('newsearchterm', array('required' => true, 'class' => 'form-control', 'label' => false, 'placeholder' => 'Search Products...', 'name' => 'newsearchterm')); ?>
<span class="input-group-btn">
<?php
echo $this->Form->button(
'<i class="fa fa-search"></i>',
array(
'type' => 'submit',
'class' => 'btn blue',
),
array('escape' => 'false')
);
?>
</span>
</div>
</div>
<?php echo $this->Form->end(); ?>
</li>
</ul>
(I am using CakePHP which is why the form code is a bit funny)

Add stopPropagation() to the your search form field.
jQuery('.your-form-selector').click(function (e) {
e.stopPropagation();
});
Everything else will work as expected.
JQuery reference
I was just looking for the same thing and found it at here

Remove the "li" tags and try. Like this:
<div class="form-group">
<?php echo $this->Form->create('Search', array('controller' => 'searches', 'action' => 'prodsearch')); ?>
<div class="input-group">
<?php echo $this->Form->input('newsearchterm', array('required' => true, 'class' => 'form-control', 'label' => false, 'placeholder' => 'Search Products...', 'name' => 'newsearchterm')); ?>
<span class="input-group-btn">
<?php
echo $this->Form->button(
'<i class="fa fa-search"></i>',
array(
'type' => 'submit',
'class' => 'btn blue',
),
array('escape' => 'false')
);
?>
</span>
</div>
</div>
<?php echo $this->Form->end(); ?>
</ul>
This worked for me once in adding forms in Bootstrap nav dropdowns.

Related

Yii2 Pjax reloads entire page

Is there someone who can help me with the following?
I use a modal/form to edit a model onscreen, and update the model via Pjax. Saving is no problem, but now the gridview must be updated with Pjax as well.
For my modal I use the following code
<?php
$form = ActiveForm::begin(
['enableClientValidation' => true, 'options' => ['id' => $model->formName()]]);
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?= $actionTitle ?> <?= StringHelper::basename(get_class($model)); ?></h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<?php echo Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<?php ActiveForm::end();
$this->registerJs(<<<JS
$(document).on('hidden.bs.modal', function (e) {
$(e.target).removeData('bs.modal');
});
JS
);
?>
<?php $script = <<< JS
$('form#{$model->formName()}').on('beforeSubmit', function(e){
var \$form = $(this);
$.post(
\$form.attr("action"), //Serialize Yii2 Form
\$form.serialize()
).done(function(result){
if(result == true){
$(\$form).trigger("reset");
$(document).find('#modalphysicalcomponent').modal('hide');
$.pjax.defaults.timeout = false;
$.pjax.reload({container:'#Grid'});
}else{
$("#message").html(result.message);
}
}).fail(function(){
console.log("server error");
});
return false;
});
JS;
$this->registerJs($script);
?>
It should update only the following gridview, but instead reloads the entire page which results in an error as certain POST variables are not resend.
<?php Pjax::begin(['id' => 'Grid']); ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'id',
'component.tag',
'component.name',
'component.parent.tag',
[
'label' => 'Configure',
'format'=>'raw',
'value' => function ($model, $key, $index, $column){
return Html::a('Configure '.get_class($model), ['update-modal', 'id' => $model->component->id], ['data-toggle'=>'modal', 'data-target'=>'#modalphysicalcomponent' ,'class' => 'btn btn-xs btn-primary', ]);
}
],
],
]); ?>
<?php Pjax::end(); ?>
I use the same modal on a different page, and it seems to work fine there, but I can't spot any differences between the two view pages.
Anyone who can help?
You need to pass the grid id as text, and not object when reloading the gridview. The object is passed as the second parameter which are the options.
This is your mistake
$.pjax.reload({container:'#Grid'});`
it should be like below
$.pjax.reload('#Grid');
See the docs for the Pjax here

Get closest date compared to current date ACF

I have a huge question. I am printing out my events in Wordpress (WP) as custom post + acf. Everything works fine but I need to sort my events to show the closest events at the top. Is there any easy way to do this?
My Code looks like this currently:
<?php
/*
Template Name: Program Template
*/
$today = date('Ymd');
$query = new WP_Query(array(
'post_type' => 'program',
'post_status' => 'publish'
));
get_header(); ?>
<div id="particle-canvas">
<h1 class="page-title">Program</h1>
</div>
<div class="container-fluid program">
<div class="row">
<?php while ($query->have_posts()) {
$query->the_post();
$post_id = get_the_ID(); ?>
<div class="col-md-6 program__program-content">
<div class="overlay-box">
<span><?php $date_value = get_field('date', $post_id);
echo date('d/m/Y', strtotime($date_value)); ?></span>
<img src="<?php the_post_thumbnail_url(array(645, 246)); ?>" alt="">
<div class="details">
<h3><?php echo get_the_title(); ?></h3>
<div class="button">
<a href="<?php echo get_permalink(); ?>">
<p>More</p>
</a>
</div>
</div>
</div>
</div>
<?php } ?>
<?php wp_reset_query(); ?>
</div>
</div>
Please add 'meta_key' in your query, just like this:
$query = new WP_Query(array(
'post_type' => 'program',
'post_status' => 'publish',
'posts_per_page' => -1,
'meta_key' => 'date',
'meta_type' => 'DATE',
'orderby' => 'meta_value_num',
'order' => 'ASC'
));
Change the 'order' => 'ASC/DESC' according to your requirement.
Hope, this may help you.

How to make second dropdown value the same as the first dropdown value?

I have following code in my view:
<?= $form->labelEx($model, 'p_2_1', array('class' => 'col-xs-12 col-sm-2 control-label')) ?>
<div class="col-xs-12 col-sm-3">
<?= $form->dropDownList($model, 'p_2_1',array_combine($model->getData('money'),$model->getData('money')), array('class' => 'form-control')) ?>
<?= $form->error($model, 'p_2_1') ?>
</div>
<?= $form->labelEx($model, 'p_3_1', array('class' => 'col-xs-12 col-sm-2 control-label')) ?>
<div class="col-xs-12 col-sm-3">
<?= $form->dropDownList($model, 'p_3_1',array_combine($model->getData('money'),$model->getData('money')), array('class' => 'form-control')) ?>
<?= $form->error($model, 'p_3_1') ?>
</div>
And in my model, I have following code:
public function getData($property) {
$data = array(
'money' => array(
Yii::t('plaintinfo', 'RUB'),
Yii::t('plaintinfo', 'USD'),
Yii::t('plaintinfo', 'EURO'),
),
);
return $data[$property];
}
I need to develop JavaScript code when user p_2_1 value changes, p_3_1 value also changes and becomes the same as p_2_1 value. (for example, if user chooses USD from the drop down list p_2_1, the value of p_3_1 will be USD automatically (the same as p_2_1(USD) ). How can I do it?
You can solve it with following Javascript code. You could also change your ids to more understandable.
<script>
$("#p_2_1").change(function(){
var selected = $("#p_2_1 option:selected").val();
var elementToChange = document.getElementById('p_2_1');
elementToChange.value = selected;
});
</script>

Bulk action in yii Grid View

I am new to Yii. I need to have a bulk action like bulk delete in CGrid view. I tried by doing in javascript and performing the action using AJAX call. But I dont get what I needed. Please help me solve this.
My view:
<?php $details=$details;
?>
<h3><?php echo $name; ?></h3>
<div id="content" style="margin: 0">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'nimsoft-host-form',
//'enableAjaxValidation'=>true,
'enableClientValidation' => true,
'clientOptions' => array(
'validateOnSubmit' => true,
'validateOnChange' => true, // allow client validation for every field
),
'htmlOptions' => array('enctype' => 'multipart/form-data'),
)); ?>
<?php $this->endWidget();?>
<h3><?php echo htmlspecialchars($title); ?></h3>
<h3><?php echo $title; ?></h3>
<div style="padding: 10px;">
<a href="<?php echo $this->createUrl('/Nimsoft/create?id='.$details->host_customer_id);?>" title="Create New Host" class="btn btn-primary circle_ok" style="text-decoration: none;" >Add New Host to Customer</a>
<a href="<?php echo $this->createUrl('/Nimsoft/Search_all?id='.$details->host_customer_id);?>" title="View All Hosts" class="btn btn-primary circle_ok" style="text-decoration: none;" >View All Hosts</a>
<a href="<?php echo $this->createUrl('/Nimsoft/Search_all',array('id'=>$details->host_customer_id,'isXLSDownload'=>1));?>" title="Export" class="btn btn-primary circle_ok" style="text-decoration: none;" >Export</a>
<a href="<?php echo $this->createUrl('/Nimsoft/Search_all',array('id'=>$details->host_customer_id,'isXLSDownload'=>2));?>" title="Export For All Customers" class="btn btn-primary circle_ok" style="text-decoration: none;" >Export For All Customers</a>
<div style="float:right">
<?php
echo CHtml::link('Upload Customer CSV', array('/Nimsoft/uploadCustomers?id='.$details->host_customer_id), array(
'onclick'=>'return hs.htmlExpand(this, { objectType: "iframe", wrapperClassName: "full-size", align: "center" } )',
'class'=>'btn btn-primary',
'id'=>'upload_link',
));
?>
</div>
<?php //echo CHtml::Button('Export CSV', array('class' => 'btn btn-primary circle_ok exportCSV-button'));
echo '<form method="post" name="exportCSV-form" id="exportCSV-form" action="' . yii::app()->createUrl('/export/exportCSV') . '">';
echo '<input type="hidden" name="filename" value="HostName">';
$this->renderPartial('_export_list', array(
'model' => $model,
));
echo '</form>';
?>
<div class="innerLR">
<div class="row-fluid">
<?php
Yii::app()->clientScript->registerScript('search_inc', "
$('.exportCSV-button').click(function() {
$.fn.yiiListView.update('exportListView', {
data: $('#search-pm-form').serialize() + '&export=true',
complete: function() {
$('#exportCSV-form').submit();
}
});
});
");?>
<?php
echo CHtml::button("Add Date Entries",array("id"=>"butt"));
?>
<?php
$obj=$this->widget('bootstrap.widgets.TbExtendedGridView', array(
'id'=>'yiisession-grid',//'host_grid',
'dataProvider'=>$dataProvider,
'type' => 'striped bordered',
'columns'=>array(
array(
'id' => 'selectedIds',
'class' => 'CCheckBoxColumn',
'selectableRows'=>2,
),
array( // display 'create_time' using an expression
'name'=>'host_name',
'value'=>'$data->host_name',
),
array(
'name'=>'host_serviceid',
'value'=>'$data->host_serviceid',
),
array(
'name'=>'status',
'value'=>'$data->status',
),
array(
'class'=>'CButtonColumn',
'template'=>'{edit_date}{update}{delete}',
'htmlOptions'=>array('width'=>'95px'),
'buttons' => array(
'edit_date' => array( //the name {reply} must be same
'label' => 'Add Date', // text label of the button
'url' => 'Yii::app()->createAbsoluteUrl("NimsoftHostsDetails/View", array("id"=>$data->host_id))',
'imageUrl' => Yii::app()->baseUrl.'/images/icons/pencil.png', // image URL of the button. If not set or false, a text link is used, The image must be 16X16 pixels
),
),)
),
))
;
?>
</div>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
<div class="separator bottom"></div>
</div>
</div>
<div class="clearfix"></div>
<div id="footer" class="hidden-print">
<?php $this->renderPartial('application.views.layouts._footer_inc'); ?>
</div>
</div>
<script>
hs.preserveContent = false;
hs.dimmingOpacity = 0.75;
hs.zIndexCounter = 10000;
hs.showCredits = false;
// this will disable close when we click on other area than close button
hs.onDimmerClick = function() {
return false;
}
$('.exportCSV-button').click(function() {
$.fn.yiiListView.update('exportListView', {
data: $('#search-faq-form').serialize() + '&export=true',
complete: function() {
$('#exportCSV-form').submit();
}
});
});
</script>
<script type="text/javascript">
var gridId = "yiisession-grid";
$(function(){
$(document).on('click','#yiisession-grid a.bulk-action',function() {
return false;
});
});
function batchActions(values){
var url = $(this).attr('Nimsoft/select_all');
var ids = new Array();
if(values.size()>0){
values.each(function(idx){
ids.push($(this).val());
});
$.ajax({
type: "POST",
url: url,
data: {"ids":ids},
dataType:'json',
success: function(resp){
//alert( "Data Saved: " + resp);
if(resp.status == "success"){
$.fn.yiiGridView.update(gridId);
}else{
alert(resp.msg);
}
}
});
}
}
</script>
<?php
Yii::app()->clientScript->registerScript('edit_date','
$("#butt").click(function(){
var checked=$("#host_grid").yiiGridView("getChecked","host_grid_c1");
var count=checked.length;
if(count>0 && confirm("Do you want to delete these "+count+" item(s)"))
{
$.ajax({
data:{checked:checked},
url:"'.CHtml::normalizeUrl(array('item/remove')).'",
success:function(data){$("#host_grid").yiiGridView("update",{});},
});
}
});
');
?>
My Bulk action code is not working. Please correct me where I went wrong. Thanks in advance.
Answer for yii2:
Checkbox column in a gridview:
GridView::widget([
'dataProvider' => $dataProvider,
'columns' => [
['class' => 'yii\grid\CheckboxColumn'],
'id'=>'grid',
'country',
],
]);
Button that fires a javascript and sends a url like this: index.php?r=mycontroller/bulk&action=1&ids=2,6,7,8
this is the button:
<a href="#" onclick="bulkAction('p');">
this is the Javascript:
<script>
function bulkAction(a) {
var keys = $('#grid').yiiGridView('getSelectedRows');
window.location.href='<?php echo Url::to(['mycontroller/bulk']); ?>&action='+a+'&ids='+keys.join();
}
</script>

JS Close window on form submission

Update at bottom of post:
I have a page where when a button is pressed, a new window will popup with a form. Below is where I open the popup.
<a><span class="add-on"><i class="icon-plus" style="color: green;" onclick="window.open('<?php echo $this->Html->Url(array('controller' => 'customers', 'action' => 'add?popup')); ?>', 'Add Customer', 'height=630, width=430')"></i></span></a>
When the form is submitted, I need to close that window. The problem I am having now is that the window is closing before the form is fully getting submitted.
Popup Window Code:
<fieldset style="padding-left: 15px;">
<legend>Add Customer</legend>
<?php echo $this->Form->create('Customer', array('inputDefaults' => array('div' => false, 'label' => false))); ?>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<?php echo $this->Form->input('first_name', array('placeholder' => 'First Name')); ?>
</div>
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<?php echo $this->Form->input('last_name', array('placeholder' => 'Last Name')); ?>
</div>
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-globe"></i></span>
<?php echo $this->Form->input('location', array('placeholder' => 'Location')); ?>
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-phone"></i></span>
<?php echo $this->Form->input('phone_number', array('class' => 'maskedPhone', 'placeholder' => 'Phone Number')); ?>
</div>
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<?php echo $this->Form->input('email', array('placeholder' => 'Email')); ?>
</div>
</div>
<!-- Close Form -->
<?php echo $this->Form->end(array(
'label' => 'Save Customer',
'id' => 'saveCust',
'class' => 'btn btn-primary',
'div' => false
)); ?>
<?php echo $this->Html->script('jquery.maskedinput.min', array('inline' => false));
echo $this->Html->script('maskedinput', array('inline' => false));
$this->start('script'); ?>
<script type="text/javascript">
$(document).ready(function () {
inputs.maskedInputs();
// Get queryString to close popup window
var queryString = window.location.search.substring(1);
if (queryString == "popup"){
$('#CustomerAddForm').submit(function() {
window.close();
});
}
});
</script>
<?php $this->end(); ?>
Trying to use Ajax call now with no luck:
$('#saveCust').click(function() {
alert("test");
$.ajax({
type: "POST",
url: "<?php echo $this->Html->Url(array('controller' => 'Customers', 'action' => 'add')); ?>",
data: $('#CustomerAddForm').serialize(),
success: function(data)
{
alert("Test");
window.close();
}
})
});
return false;
You have a race condition and the window.close will always win. You need to close when the form is DONE submitting.
Either convert it over to use an Ajax call or call the window.close() in the response of the form submission.

Categories