My script doesn't seem to be working correctly, what I'm trying to get is pretty self explanatory. I have tried several diffrent ways to make this work, searched around and tried to solve it.
I also tried to check the chrome log via console.log() but it didn't run the code through.
So if you know the solution to make it work I would appreciate the answer on how you solved it and what was wrong in the code.
NEW: The fiddle below includes the HTML.
jQuery(document).ready(function($){
$('#cart_review .quantity option :selected').change(function (event) {
$quan = $(this);
console.log($quan.parent().next()[0]);
$quan.parent().next().find('.price').text(function () {
return $quan.val() * parseInt($(this).attr('data-val'), 10) + ' kr';
});
var total = 0;
$('#cart_review .price').each(function(k, v){
total += parseFloat($(v).text(), 10);
});
$('#total').text(total + ' kr')
});
});
Check out this jfFiddle
Option does not have change event, select does. You need to Change the handler to:
$('#cart_review .quantity').change(function (event) {
//rest code
});
jfFiddle
use this
$('#cart_review .quantity').change(function (event) {
// your logic here
}
instead of
$('#cart_review .quantity option').change(function (event) {}
working fiddle
Hope this helps...
http://jsfiddle.net/uQ2F8/3/
$(function(){
$('select.quantity').change(function (event) {
Hey I just changed your selector, I think this is what you're trying to accomplish. I did it with the first one.
Related
I am trying to apply starts with function on textarea, but obviously I am doing something wrong. I don't understand javascript, so I am sorry for obvious mistakes or problems. At least I tried what seemed logical to me... Fiddle here: http://jsfiddle.net/SVxbW/235/
HTML:
$("textarea").bind(function () {
if ($(this).startsWith("Hello") {
$(".kuk").show();
}
else {
$(".kuk").hide();
}
});
.kuk {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<textarea></textarea>
<button class="kuk">Clear</button>
And what if someone pastes the text "Hello" with right click of mouse? How to recognize that action too?
You need to get the val() then use startsWith(). Additionally you need to bind proper event handler. Here I have used keyup
$("textarea").on('keyup', function() {
if ($(this).val().startsWith("Hello")) {
$(".kuk").show();
} else {
$(".kuk").hide();
}
});
Updated Fiddle
Try this. You need to bind an event also you need to get val to check whether it startswith hello or not.
$("textarea").bind('keyup',function () {
if ($(this).val().startsWith("Hello")) {
$(".kuk").show();
}
else {
$(".kuk").hide();
}
});
Here is jsfiddle
I made jsfiddle for those wondering which code I am using right now. I added few kinds of input options and now it works in chrome as well.
final fiddle
$("textarea").bind('change keyup paste blur input',function () {
if ($(this).val().startsWith("Hello") || $(this).val().startsWith("HELLO") || $(this).val().startsWith("hello")) {
$(".kuk").show();
}
else {
$(".kuk").hide();
}
});
This is a question about Multiple Checkbox Select/Deselect Using JQuery:
http://viralpatel.net/blogs/multiple-checkbox-select-deselect-jquery-tutorial-example/
which has the functionality of selecting multiple items from a list to process them. The Online Demo is at:
http://viralpatel.net/blogs/demo/jquery/multiple-checkbox-select-deselect/jquery-select-multiple-checkbox.html
I've extended the demo to include several groups, and have made the sample JQuery JavaScript function to work for one case, the BlackBerry one. The working code is at http://jsfiddle.net/jLx5z99q/3/.
In it, this is the specialized function that I want to generalize:
$(function () {
$("#BlackBerry").click(function () {
$('.case_blackberry').attr('checked', this.checked);
});
$(".case_blackberry").click(function () {
if ($(".case_blackberry").length == $(".case_blackberry:checked").length) {
$("#BlackBerry").attr("checked", "checked");
} else {
$("#BlackBerry").removeAttr("checked");
}
});
});
I want to generalize it so that the "#BlackBerry" and ".case_blackberry" are two parameters to the function, so that I can call it several times to cover other groups as well.
I'm not a JavaScript developer. Please help.
UPDATE:
I've posted the full working html source code at http://pastie.org/10278464.
Also, FYI, this full working html source code is generated automatically by easygen with this template. This html test code is the reason that I wrote easygen, to make it easy to write whatever test case whatever the way I like. Hope it will help someone else too.
Thanks
You need define some specific attributes.
Try this fiddle.
Example Fiddle:: http://jsfiddle.net/iboylmz/2acnLzzw/3/
This could work:
function bindMulti( parent, children ) {
parent.click(function () {
children.attr('checked', this.checked);
});
children.click(function () {
if (children.length == children.filter(':checked').length) {
parent.attr("checked", "checked");
} else {
parent.removeAttr("checked");
}
});
};
Use like this:
bindMulti($('#select_all'),$('.children'));
bindMulti($('#BlackBerry'),$('.case_blackberry'));
Maintaining your current's code logic and flow and element identification, you can do:
$(function () {
$(".case_subgroup_all").click(function () {
$('.case_'+$(this).attr('id').toLowerCase()).attr('checked', this.checked);
});
$(".case_blackberry").click(function () {
if ($(".case_blackberry").length == $(".case_blackberry:checked").length) {
$("#BlackBerry").attr("checked", "checked");
} else {
$("#BlackBerry").removeAttr("checked");
}
});
});
I've also added case_subgroup_all to your 'check all' checkboxes, in order to call your event handler.
jsfiddle: http://jsfiddle.net/jLx5z99q/5/
The User should be able to change the Name and then confirm the change. I'm not able to archive it with this code as when I click confirm, it returns like before.
What am I missing?
Any better way to put this together (which I'm sure there's one) ?
Please check the demo where you can also see the changeElementTypefunction
http://jsfiddle.net/dLk6E/
js:
$('.replace').on('click', function () {
$("h2").changeElementType("textarea");
$('.replace').hide();
$('.confirm').show();
//Confermation of the change
$('.confirm').bind('click', function () {
$('.replace').show();
$('.confirm').hide();
$("textarea").changeElementType("h2");
});
if ($('textarea:visible')) {
$(document).keypress(function (e) {
if (e.which == 13) {
alert('You pressed enter!');
$("textarea").changeElementType("h2");
$('.replace').css('opacity', '1');
}
});
}
});
Here are your updated code and working fiddle http://jsfiddle.net/dLk6E/
(function($) {
$.fn.changeElementType = function(newType) {
var attrs = {};
$.each(this[0].attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
this.replaceWith(function() {
return $("<" + newType + "/>", attrs).append($(this).contents());
});
}
})(jQuery);
$('.replace').on('click', function (){
$("h2").changeElementType("textarea");
$('.replace').hide();
$('.confirm').show();
//Confermation of the change
$('.confirm').on('click', function(){
$('.replace').show();
$('.confirm').hide();
// you are missing this
$('.replaceble').html($("textarea").val());
$("textarea").changeElementType("h2");
});
if ($('textarea:visible')){
$(document).keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
$("textarea").changeElementType("h2");
$('.replace').css('opacity','1');
}
});
}
});
updated
jsfiddle.net/dLk6E/1
I think your code is right but you need to use the value you're entering when replacing it. So the confirmation binding would be something like this (fetching it, and then using it to update the textarea before "transforming" it into an h2 tag.
$('.confirm').bind('click', function(){
var valueEntered = $('textarea').val();
$('.replace').show();
$('.confirm').hide();
$("textarea").html(valueEntered).changeElementType("h2");
});
You could be using .on for this as well as of jQuery 1.7 is prefered to .bind.
Another thing I would suggest is whenever you struggle with something like this just put in google (or whatever...) exactly what you want, in this case "jquery get value of input" will get asw first result the jquery documentation
This way you won't forget it ;)
Update: Maybe a small detail but in the binding I use it would be more efficient to just hit $('textarea') once, so it would be something like this. Something that you may keep in mind (not really an issue here), better to store in a variable than hit the DOM several times.
$('.confirm').on('click', function(){
var $textarea = $('textarea');
$('.replace').show();
$('.confirm').hide();
$textarea.html($textarea.val()).changeElementType("h2");
});
jsfiddle
I have written a short plugin for jQuery which will change the styles of the browser's in-built checkbox, so that it better fits with the theme.
Here is the plugin code:
(function ($) {
$.fn.checkbox = function()
{
var uiBox = $('<span class="ui-checkbox" />'),
that = this;
uiBox.data('checkbox', this).insertAfter(this);
this.hide();
if(this.is(':disabled')) { uiBox.addClass('disabled'); }
if(this.is(':checked')) { uiBox.addClass('checked'); }
if(!uiBox.hasClass('disabled'))
{
uiBox.on('click', function() {
var checkbox = $(this).data('checkbox');
if(checkbox.is(':checked'))
{
uiBox.removeClass('checked');
checkbox.attr('checked', false);
}
else
{
uiBox.addClass('checked');
checkbox.attr('checked', 'checked');
}
});
}
};
} (jQuery));
This code is then in turn called through the DOMReady handler using:
$('input[type="checkbox"].ui').checkbox();
Everything works the first three times the 'checkbox' is clicked, but thereafter for some reason the code no longer executes the addition / removal of the necessary classes, and the original checkbox is never updated. Can anyone shed any light on the situation, and explain why this is happening?
jsFiddle Demo
It's because you're using attr() and not prop(), changing just the attribute and not the underlying property, change it to
checkbox.prop('checked', true);
FIDDLE
Use .prop() instead of .attr()
checkbox.prop('checked', 'checked');
Demo
Use this following code, I have tried it in your fiddle example it is working there,
checkbox.prop('checked', true);
Hope this Helps!
Maybe someone see and can answer where is a problem why on IE8 not working alert # first line 'lov_Dg2Id_D_1' but on next 'lov_Dg2Id_D_2' all is ok.
var SecondDiagnosis=$( "span[id^='lov_Dg2Id_D_']" );
var SpanBlock2=SecondDiagnosis.find('a');
var eventH2=SpanBlock2.attr( "onclick" );
//SpanBlock2.attr("onclick", "DgIdOnClick(document.getElementById('MovementNumber_D_'+parentElement.getAttribute('id').substring(12)).id,2);"+eventH2);
SpanBlock2.attr("onclick", "alert('HI!');"+eventH2);
Mabe are some other ways how can add a onclick event ?
Thanks Helpfull and Correct Answers guiranteed ;)
Learn about the library you are using.
You do not use attr to set events! jQuery has methods like on() or click() for that.
SpanBlock2.on("click", function() { alert('HI!'); });
You will not need to copy/call the original event, it will still be there.
If you want to change the order, you will need to bind the events
$("button").each(
function() {
var btn = $(this);
var oldClick = btn[0].onclick;
btn.on("click", function(){ alert("a"); });
if(oldClick) {
btn[0].onclick = null;
btn.on("click", oldClick);
}
}
);
http://jsfiddle.net/7K9pU/
change this:
SpanBlock2.attr("onclick", "alert('HI!');"+eventH2);
to this:
var SecondDiagnosis=$( "span[id^='lov_Dg2Id_D_']" );
var SpanBlock2=SecondDiagnosis.find('a');
SpanBlock2.on("click", function(){
// all your stuff you want on click of it.
});