Iam trying to show/hide a div based on the radio button click in Yii form. But the onclick event is not working for me. Please help me to fix this as Iam a new bee to Yii.
Iam using this code for radio button
<?php echo $form->radioButtonList($model,'service_type',array(
'0'=>'Yes',
'1'=>'No',
'separator'=>'',
'onclick'=>"setVisible('Yes_box',true);setVisible('No_box', false)")); ?>
<div id="Yes_box" style="visibility: hidden"> contents of Yes type </div>
<div id="No_box" style="visibility: hidden"> contents of No type </div>
This is my script:
<script>
$(document).ready(function () {
$("input[name$='type']").click(function () {
var value = $(this).val();
if (value == 'Yes') {
$("#Yes_box").show();
$("#No_box").hide();
} else if (value == 'No') {
$("#No_box").show();
$("#Yes_box").hide();
}
});
$("#Yes_box").show();
$("#No_box").hide();
});
</script>
When Iam using this code only the last condition is working i.e, Yes_box is showing. I think the onclick value is not passing here. Please help me to recover this problem.
I thin your code is written correctly . only few changes / may be that will work .
I have edited the your code .Check this out :
<script>
$(document).ready(function () {
$("input[name=type]").click(function () {
var value = $(this).val();
if (value == 'Yes') {
$("#Yes_box").show();
$("#No_box").hide();
} else if (value == 'No') {
$("#No_box").show();
$("#Yes_box").hide();
}
});
});
</script>
Also NOTE :- check with an alert if you are able to get data into the value variable .
Related
I have this little snippet of code that works great in JSFiddle and in a Chrome extension. On clicking "button" it blurs the ID "content".
var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});
I've been through quite a few of the similar question that say to add $(document).ready(function(){
before and this });`
at the end giving this
$(document).ready(function(){
var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});
});
That has worked for me before but not helping with this little ditty of code.
When I add the second set of code I get "$ is not a function error"
Thanks in advance for the help.
***** ANSWER (since I can't post answers for some reason) ******
This is a Wordpress site and Wordpress uses jQuery.noConflict();
So, in Wordpress, $ is undefined ergo the message "$ is not a function error"
Instead of
$(document).ready(function(){
in Wordpress you need to use
jQuery(document).ready(function($) {
What worked is putting it in the child-themes funtion.php like this:
function load_dimmer_script(){
?>
<script>
jQuery(document).ready(function($) {
var dimthis = $("#content")
var button = $("button")
button.on("click", () => {
dimthis.toggleClass("alt")
});
});
</script>
<?php
}
add_action( 'wp_footer', 'load_dimmer_script' );
What this does is this: If the menu toggle is defined as a button, when the menu is clicked the content of the page (#content) gets blurred. Click menu toggle again, it goes unblurred.
See nova-energy.net
Here's the one piece of CSS needed:
#content.alt {
filter: blur(4px) !important;
}
You have to wrap the JS code:
jQuery(document).ready(function($) {
// your code
)};
I have created a multiple image selection button with this plugin.
https://wordpress.org/plugins/multifile-upload-field-for-contact-form-7/
below is my contact form 7 code.
<div class="file wrap">
<div class="fileText">Upload Photos</div>
[multifile multi-images id:img_upload]
</div>
<div class="file_names">No file selected</div>
Now i want that if user will select multiple images then all image names will come like this
xyz.jpg, abc.png, pqr.jpg at the place of "No file selected"
You can do this with jQuery. Add this code in your js file.
jQuery('.file input[type="file"]').on('change', function () {
var names = [];
for (var i = 0; i < jQuery(this).get(0).files.length; ++i) {
names.push(jQuery(this).get(0).files[i].name);
}
jQuery(this).parent().parent().parent().parent().find('.file_names').text(names.join(", "));
});
Add this at the bottom of your form:
<script>
jQuery(document).ready(function($) {
$('.wpcf7-multifile').first().on('change', function() {
var files = $(this).prop("files");
var names = $.map(files, function(val) { return val.name; });
$('.file_names').html(names.join(', '));
});
});
</script>
I am trying to use the code here to make an emergency escape:
https://css-tricks.com/website-escape/
It is being used on a Wordpress site here: http://b67.3d8.myftpupload.com/ but it doesn't seem to work. I have tried adjusting the location of the script to no avail. Can anyone see what is going on?
HTML:
<button id="get-away">Go ?</button>
JS (in <head> section):
<script>
function getAway() {
// Get away right now
window.open("http://weather.com", "_newtab");
// Replace current site with another benign site
window.location.replace('http://google.com');
}
$(function() {
$("#get-away").on("click", function(e) {
getAway();
});
$("#get-away a").on("click", function(e) {
// allow the link to work
e.stopPropagation();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) { // escape key
getAway();
}
});
});
</script>
I have 2 checkboxes. When 1 is selected then the other one is un-checked. I have used JS to accomplish this and it works fine. But then when I click save, the option that is un-checked does not get saved. If I actually un-check the checkbox with a mouse click then it does save. What's the best way to accomplish the above situation?
PHP Action and JS that I am using:
add_action( 'customize_controls_print_footer_scripts', 'my_customizer_custom_scripts' );
function my_customizer_custom_scripts() { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
/* This one shows/hides the an option when a checkbox is clicked. */
jQuery('#customize-control-checkbox1 input').click(function() {
if (jQuery('#customize-control-checkbox2 input:checked').val() !== undefined) {
jQuery('#customize-control-checkbox2 input').attr('checked', false);
}
});
jQuery('#customize-control-checkbox2 input').click(function() {
if (jQuery('#customize-control-checkbox1 input:checked').val() !== undefined) {
jQuery('#customize-control-checkbox1 input').attr('checked', false);
}
});
});
</script>
<?php
}
Figured it out have to use trigger('click') instead of the attr('checked', false).
So
jQuery('#customize-control-checkbox1 input').attr('checked', false);
Becomes
jQuery('#customize-control-checkbox1 input').trigger('click');
As everyone knows, that default button doesn't work in FF, only IE. I've tried to put in the tag or in the and it's not working. I've found a js script to fix this issue, but for some reason it's not working for me. This script for a submit button, i need to use it for a LinkButton, which is should be the same.
Link:
<div id="pnl">
<a id="ctl00_cphMain_lbLogin" title="Click Here to LogIn" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$cphMain$lbLogin", "", true, "Login1", "", false, true))">Log In</a>
<input name="ctl00$cphMain$UserName" type="text" id="ctl00_cphMain_UserName" />
<input name="ctl00$cphMain$UserName" type="text" id="ctl00_cphMain_UserName1" />
</div>
<script>
$(document).ready(function() {
$("#pnl").keypress(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$("a[id$='_lbLogin']").click();
return true;
}
});
});
I know that i can override original function "WebForm_FireDefaultButton"
in This post, but i really wanted to get this one to work.
Thanx in advance!!!
I found the answer to fixing linkbuttons here: http://www.sentia.com.au/2009/03/fixing-the-enter-key-in-aspnet-with-jquery/
$(document).ready(function(){
var $btn = $('.form_submit');
var $form = $btn.parents('.form');
$form.keypress(function(e){
if (e.which == 13 && e.target.type != 'textarea') {
if ($btn[0].type == 'submit')
$btn[0].click();
else
eval($btn[0].href);
return false;
}
});
});
Inspired by Larry Flewwelling's answer or rather Michael Cindric's, I came up with a modified and updated version of that javascript snippet. I've documented more detailed information on why and how in this blog post, but let me summarize the important changes:
Works with dynamically loaded content
Works with any number of "forms" on the same page
And here it is:
$('body')
.off('keypress.enter')
.on('keypress.enter', function (e) {
if (e.which == 13 && e.target.type != 'textarea') {
var $btn = $(e.target).closest('.jq-form').find('.jq-form-submit');
if ($btn.length > 0) {
if ($btn[0].type == 'submit') {
$btn[0].click();
}
else {
eval($btn[0].href);
}
return false;
}
}
});
You could expand your selector.
$("#pnl > input")
Which will then catch the input click for all the controls in the panel.