This is the array from where its called.
I have an function, what i want to do is to display a text after you change the select.
$vak=array(
"algemeen"=>array(
'title' => 'Algemeen',
'maxWoordPerDag' => 100,
),
"technischict"=>array(
'title' => 'Technisch/ICT',
'maxWoordPerDag' => 10,
),
"juridisch"=>array(
'title' => 'Juridisch',
'maxWoordPerDag' => 10,
),
"marketing"=>array(
'title' => 'Marketing',
'maxWoordPerDag' => 10,
),
"websiteshop"=>array(
'title' => 'Website/shop',
'maxWoordPerDag' => 10,
),
"medisch"=>array(
'title' => 'Medisch',
'maxWoordPerDag' => 10,
),
"financieel"=>array(
'title' => 'Financieel',
'maxWoordPerDag' => 10,
),
"beëdigd"=>array(
'title' => 'Beëdigd',
'maxWoordPerDag' => 10,
)
);
This is the select box
<label>Vakgebied</label>
<p id="maxwoorden"></p>
<select id="vakgebied"
class="form-control"
name="vakgebied">
<?php foreach($vak as $key => $value): ?>
<option data-max="<?php echo $value['maxWoordPerDag'];?>" value="<?php echo $key?>">
<?php echo $value['title'] ?></option>
<?php endforeach; ?>
</select>
And this is my Jquery code to do so
<script type="text/javascript">
$(document).ready(function()
{
$("#vakgebied").on('change', function()
{
var current = $(this).find("option:selected").html();
alert(current);
var maxdata = $(this).find('option.selected').attr('data-max');
alert(maxdata);
});
});
When i alert maxdata i get undefined as output.
Does someone knows why i get undefined as output and how can i fix this.
You have .selected, not :selected on the second one:
var maxdata = $(this).find('option:selected').attr('data-max');
Related
I have pasted this code in my main function.php and it works great
but I want to add an image to my woocommerce product and I do not know how I can achieve that. Does anyone have an idea for doing it?
function woo_add_custom_general_fields() {
global $woocommerce, $post;
woocommerce_wp_text_input(
array(
'id' => 'telnr',
'label' => __( 'Nr. Tel)', 'woocommerce' ),
'placeholder' => 'Nr',
'desc_tip' => 'true',
'description' => __( 'tel nr.', 'woocommerce' )
)
);
}
function woo_add_custom_general_fields_save( $post_id ){
$woocommerce_telnr = $_POST['telnr'];
if( !empty( $woocommerce_telnr ) )
update_post_meta( $post_id, 'telnr', esc_html( $woocommerce_telnr ) );
}
This is what I tried and which fails:
function woo_options_add($options) {
// This is a option heading
$woo_metaboxes = array(
"image" => array (
"name" => "image",
"label" => "Post Image",
"type" => "upload",
"desc" => "Upload file here…"
)),
// Return new options
return $options;
}
I have a dropdown menu, that has a onchange function. Once the function is executed it changes another dropdown menu.
I need to make it so it executes the script onload.
1st dropdown:
echo $form->field($model, 'company_id')->dropDownList($items_company, ['prompt' => 'Select Company', 'style' => 'width:400px;', 'onchange' => '
$.post("index.php?r=project/lists&id=' . '"+$(this).val(), function( data ) {
$( "select#project-client" ).html( data );
console.log("On change");
console.log(data);
});
',])->label('Company');
2nd dropdown:
echo '<label class="control-label">Company Client</label>';
echo Select2::widget([
'model' => $model,
'attribute' => 'client',
'theme' => Select2::THEME_BOOTSTRAP,
'options' => [ 'label' => 'Client',
'multiple' => true, 'style' => 'width:400px;', 'overwriteInitial' => true],
'pluginOptions' => [
'disabled' => false,
],
]);
This is what I tried:
$(document).ready(function () {
var currentProjectCompany = $('#project-company_id').val();
$.post("index.php?r=project/lists&id=' . '" + currentProjectCompany, function (data) {
$("select#project-client").html(data);
console.log("Company ID:");
console.log(currentProjectCompany);
console.log("Clients");
console.log(data);
});
});
Move the onchange code into its own function (it should be there anyway), and execute that function in the ready() function.
That way it will fire both onchange and onload.
I do the same check my code it may help you .But i use ajax and jquery.
For firs dropdown .
echo $form->dropDownListGroup(
$model 'id', array(
'wrapperHtmlOptions' => array(),
'widgetOptions' => array(
'data' => abc::getName($model->id),
'htmlOptions' => array(
'prompt' => 'Select Project',
'ajax' => array(
'type' => 'POST',
'url' => ( Yii::app()->createUrl('/' . $domain_name . '/qq/xyz/abc') ),
'update' => '#seconddropdownid',
//'dataType' => 'json',
'data'=>array('id'=>'js:this.value'),
)
),
),
)
);
in second dropdown :
echo $form->dropDownListGroup(
$project, 'tag', array(
'wrapperHtmlOptions' => array(),
'widgetOptions' => array(
'data' =>$this->getProjectTags(),
'htmlOptions' => array(
'prompt' => 'Select Tags',
),
)
)
);
on change of the second list you can update the the list-view of yii .
Right now I have a form that I created in cakephp and it works fine but the problem I am running into is that we run queries off of the type in the database and there have been some user errors with spelling so I would like to have a list with the most common types that you can select from but if it is not in the list you can still type in something different.
I found this jquery autocomplete combobox that works great but I am not able to enter something that is not in the list. http://jqueryui.com/autocomplete/#combobox
I don't know if you need to see my form or not but I will post it anyway
<?php
echo $this->Form->create( 'Credential', array( 'class' => 'popup_form' ) );
echo $this->Form->hidden( 'account_id', array( 'value' => $account_id ) );
echo $this->Form->hidden( 'user_id', array( 'value' => $currentUser['User']['id'] ) );
echo $this->Form->hidden( 'created', array( 'value' => date("Y-m-d H:i:s") ) );
echo $this->Form->hidden( 'modified', array( 'value' => date("Y-m-d H:i:s") ) );
echo '<br/><br/>';
echo $this->Form->input( 'type', array( 'div' => false, 'label' => false, 'placeholder' => 'Account Type' ) );
echo '<br/><br/>';
echo $this->Form->input( 'url', array( 'div' => false, 'label' => false, 'placeholder' => 'URL' ) );
echo '<br/><br/>';
echo $this->Form->input( 'username', array( 'div' => false, 'label' => false, 'placeholder' => 'Username' ) );
echo '<br/><br/>';
echo $this->Form->input( 'password', array( 'div' => false, 'label' => false, 'placeholder' => 'Password' ) );
echo '<br/><br/>';
echo $this->Js->submit( 'Create Credential', array( 'div' => false, 'class' => 'button white medium', 'before' => 'return submitForm();', 'success' => "$('#qtip-add_account_credential').hide();", 'complete' => 'loadTasks();' ) );
echo '<br/><br/>';
echo $this->Form->end();
?>
<script type="text/javascript">
function submitForm(){
var x = document.getElementById("CredentialType").value;
if (x == null || x == "") {
alert("Account Type must be filled out");
return false;
}
else {
return true;
}
}
</script>
I am a backend developer and would love any help I could get on the front end. Thanks.
What you are searching for is a datalist (new in HTML5):
http://www.w3schools.com/tags/tag_datalist.asp
It provides an form input with a predefined list of options, which appears as soon as the user's input matches one of the entries.
BUT: it seems not to be supported in Safari
In your case it would look like that:
<input name="type" list="AccountTypes" placeholder="Account Type">
<datalist id="AccountTypes">
<option value="admin">
<option value="user">
<option value="something else">
</datalist>
Good afternoon i've been struggling with these for 2 days now and i'm running out of time...
I have this modal...
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<?php if ( $modalToOpen == "1") { ?>
<h4>Aplicar abono a la cuenta #<?php echo $cardInformation->CardNumber ?></h4>
<?php } ?>
<?php if ($modalToOpen == "2") { ?>
<h4>Aplicar cargo a la cuenta #<?php echo $cardInformation->CardNumber ?></h4>
<?php } ?>
</div>
<div class="modal-body">
<p>Saldo Actual: <?php echo $lastBalance ?></p>
<?php echo $modalToOpen ; if($modalToOpen == 1){ ?>
<?php $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array('id' => 'inlineForm', 'type' => 'inline', 'htmlOptions' => array('class' => 'well'))); ?>
<?php echo $form->TextField($auxModel, 'Payment', array('size' => 8, 'maxlength' => 8, 'placeholder' => "$. Abono", 'class' => 'span1')); ?>
<?php echo $form->TextField($auxModel, 'Coment', array('size' => 250, 'maxlength' => 250, 'placeholder' => "Comentario", 'class' => 'span3')); ?>
<?php
$this->widget(
'bootstrap.widgets.TbButton', array(
'buttonType' => 'ajaxButton',
'type' => 'primary',
'label' => 'Guardar',
'url' => Yii::app()->createUrl('BusinessTargetCollectionCard/ApplyPayment'),
'htmlOptions' => array('onclick' => 'showWait();','id' =>'payment-btn'. uniqid()),
'ajaxOptions' => array(
'type' => 'POST',
'dataType' => 'json',
'data' => array(
'cardNumber' => $cardInformation->CardNumber,
'lastBalance' => $lastBalance,
'coment' => 'js:$("#BusinessTargetCollectionCardMovement_Coment").val()',
'payment' => 'js:$("#BusinessTargetCollectionCardMovement_Payment").val()',
'businessTargetCollectionCardId' => $cardInformation->Id,
'collectorId' => $cardInformation->CollectorId),
'success' => 'js:function(data){
alert(data.message);
if(data.status == "OK"){
$("#PaymentModal").modal("hide");
hideWait();
}
}'
),
)
);
$this->endWidget(); ?>
<?php } ?>
<?php if($modalToOpen == 2){ ?>
<?php $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array('id' => 'inlineForm', 'type' => 'inline', 'htmlOptions' => array('class' => 'well'))); ?>
<?php echo $form->TextField($auxModel, 'BalanceAfter', array('size' => 8, 'maxlength' => 8, 'placeholder' => "Cantidad a aplicar", 'class' => 'span1')); ?>
<?php
$this->widget(
'bootstrap.widgets.TbButton', array(
'buttonType' => 'ajaxButton',
'type' => 'primary',
'label' => 'Guardar',
'url' => Yii::app()->createUrl('BusinessTargetCollectionCard/ApplyCharge'),
'htmlOptions' => array('onclick' => 'showWait();', 'id' => 'charge-btn' . uniqid()),
'ajaxOptions' => array(
'type' => 'POST',
'dataType' => 'json',
'data' => array(
'cardNumber' => $cardInformation->CardNumber,
'charge' => 'js:$("#BusinessTargetCollectionCardMovement_BalanceAfter").val()'),
'success' => 'js:function(data){
alert(data.message);
if(data.status == "OK"){
$("#myModal").modal("hide");
hideWait();
}
}'
),
)
);
$this->endWidget();
?>
<?php } ?>
</div>
and I have these buttons:
<td><?php
$this->widget(
'bootstrap.widgets.TbButton', array(
'label' => 'Aplicar cargo',
'type' => 'success',
'htmlOptions' => array(
'onclick' => I dont know what to do // 'js:$("#modalToOpen").val("1");',
'data-toggle' => 'modal',
'data-target' => '#myModal',
),
)
);
?></td>
<td></td>
<td><?php
$this->widget(
'bootstrap.widgets.TbButton', array(
'label' => 'Aplicar pago',
'type' => 'primary',
'htmlOptions' => array(
'onclick' => I dont know what to do //'js:$("#modalToOpen").val("2");',
'data-toggle' => 'modal',
'data-target' => '#myModal',
),
)
);
?></td>
what I want to do is change the value of $modalToOpen depending on which button was clicked... so the content of the modal will be different if button 1 is clicked or button 2...
please any help will be really appreacciated
You can pass it through data-id like this
<?php
$this->widget(
'bootstrap.widgets.TbButton', array(
'label' => 'Aplicar cargo',
'type' => 'success',
'htmlOptions' => array(
'onclick' =>'js:function(data){
var myvalue = $(this).data("id");
$(".modal-body #myvalue").val(myvalue);
}',
'data-toggle' => 'modal',
'data-target' => '#myModal',
'data-id'=>'1',
),
)
);
?>
take that value in one hidden or text in
<div class="modal-body">
<p>some content</p>
<input type="text" name="myvalue" id="myvalue" value=""/>
</div>
I hope this will help.
I have following code.
This code is from my theme-options.php file.
and I am still working on it and I develop this all.
function social_icons() {
$icons = array (
'facebook'=>__('Facebook','responsivetheme'),
'google'=>__('Google','responsivetheme'),
'instagram'=>__('Instagram','responsivetheme'),
'linkedin'=>__('Linkedin','responsivetheme'),
'pinterest'=>__('Pinterest','responsivetheme'),
'rss'=>__('RSS','responsivetheme'),
'stumbleupon'=>__('Stumbleupon','responsivetheme'),
'twitter'=>__('Twitter','responsivetheme'),
'vimeo'=>__('Vimeo',''),
'youtube'=>__('Youtube','responsivetheme')
);
$iconsHover = array (
'facebook-h'=>__('Facebook','responsivetheme'),
'google-blank-h'=>__('Google','responsivetheme'),
'instagram-blank-h'=>__('Instagram','responsivetheme'),
'linkedin-blank-h'=>__('Linkedin','responsivetheme'),
'pinterest-h'=>__('Pinterest','responsivetheme'),
'rss-h'=>__('RSS','responsivetheme'),
'stumbleupon-blank-h'=>__('Stumbleupon','responsivetheme'),
'twitter-h'=>__('Twitter','responsivetheme'),
'vimeo-blank-h'=>__('Vimeo',''),
'youtube-h'=>__('Youtube','responsivetheme')
);
?>
<?php
$theme_options = get_option('new_theme_options',false);
$theme_values = unserialize($theme_options);
$icons_options = get_option('social_settings_responsivetheme_options');
$icons_values = unserialize($icons_options);
?>
<?php
foreach( $icons as $key => $value ) :
if (!empty ($theme_values[$key])) :
?>
<img class="" src="<?php echo template_dir('/icons/'.esc_attr( $key ).'.png');?>" alt="<?php echo esc_html( $value )?>" width="<?php echo $icons_values['width'];?>" height="<?php echo $icons_values['height'];?>" />
<?php endif;//END !empty ($theme_values) ?>
<?php foreach ($iconsHover as $key2 => $value2 ): ?>
<script type="text/javascript">
$(document).ready(function(){
var templateDirectory = "<?php echo get_template_directory_uri(); ?>";
$('.social_icons .<?php echo esc_html($value2); ?> img').hover(
function (){
$(this).attr('src', templateDirectory + '/icons/<?php echo esc_attr($key2); ?>.png');
},
function () {
$(this).attr('src', templateDirectory + '/icons/<?php echo esc_attr($key); ?>.png');
});
});//END document
</script>
<?php endforeach;//END foreach $iconsHover?>
<?php endforeach;//END foreach ?>
<?php
}//END social_icons()?>
The problem is when I hover on icons the hover img works but when on mouse out the normal img should still remains, it doesn't.
It replaces all imgs to 'youtube-h' .
How to do that?
Sorry my comment wasn't clear enough.
By putting them in nested loops, you're outputting every possible combination ('facebook', 'facebook-h'), ('facebook', 'google-blank-h'), ('facebook', 'instagram-blank-h')... ('youtube', 'vimeo-blank-h'), ('youtube', 'youtube-h').
What I meant by putting them all in one array was something like this:
$icons = array (
array(
'off' => 'facebook',
'hover' => 'facebook-h',
'label' =>__('Facebook','responsivetheme')
),
array(
'off' => 'google',
'hover' => 'google-blank-h',
'label' =>__('Google','responsivetheme')
),
array(
'off' => 'instagram',
'hover' => 'instagram-blank-h',
'label' =>__('Instagram','responsivetheme')
),
array(
'off' => 'linkedin',
'hover' => 'linkedin-blank-h',
'label' =>__('Linkedin','responsivetheme')
),
array(
'off' => 'pinterest',
'hover' => 'pinterest-h',
'label' =>__('Pinterest','responsivetheme')
),
array(
'off' => 'rss',
'hover' => 'rss-h',
'label' =>__('RSS','responsivetheme')
),
array(
'off' => 'stumbleupon',
'hover' => 'stumbleupon-blank-h',
'label' =>__('Stumbleupon','responsivetheme')
),
array(
'off' => 'twitter',
'hover' => 'twitter-h',
'label' =>__('Twitter','responsivetheme')
),
array(
'off' => 'vimeo',
'hover' => 'vimeo-blank-h',
'label' =>__('Vimeo','responsivetheme')
),
array(
'off' => 'youtube',
'hover' => 'youtube-h',
'label' =>__('Youtube','responsivetheme')
)
);
Then you only need one loop, something like this:
foreach ($icons as $icon) {
}
and you can use $icon['off'], $icon['hover'], and $icon['label'] as appropriate inside that.