We Keep Coding

return false not preventing click

I have this jquery to prevent click , but its not working , why ?
HTML
<a href="page.htm?action=addtofav&id=556" class="fav-auto">
<div class="favno button-com color">Favorite</div></a>
Javascript
$(document).ready(function() {
$(document).on("click","a.fav-auto",function(e) {
$.get($(this).attr("href"),function(fav-lin) {
var fav-pos = $(fav-lin).find('.fav-mess-in');
var fav-pis2 = $(this).attr("href");
$('fav-mess').empty();
$('fav-mess').append(fav-pos);
$('fav-mess').append(fav-pos2);
});
return false;
});
});

return false does work perfectly, but you have some syntax errors in your code.
First, I think that $('fav-mess') should be either a class $('.fav-mess'), or id $('#fav-mess') selector, not a tag selector.
Next, You have to change fav-pos, fav-pos2 and fav-lin variables.
You cannot use - (minus) operator in variable declaration - this is a syntax error (javascript interpretes them as math operation : favminuspos):
var fav-pos = $(fav-lin).find('.fav-mess-in');
var fav-pos2 = $(this).attr("href");
Replace them to something like this (used class on 'fav-mess' element since I'm not sure what you're selecting):
$.get($(this).attr("href"),function(fav_lin) {
var fav_pos = $(fav_lin).find('.fav-mess-in');
var fav_pos2 = $(this).attr("href");
$('.fav-mess').empty();
$('.fav-mess').append(fav_pos);
$('.fav-mess').append(fav_pos2);
});
PS. Use chaining whenever you can, so that you don't unnecessarily traverse the DOM multiple times for a single element:
$.get($(this).attr("href"),function(fav_lin) {
var fav_pos = $(fav_lin).find('.fav-mess-in');
var fav_pos2 = $(this).attr("href");
// chain the element manipulation:
$('.fav-mess').empty().append(fav_pos).append(fav_pos2);
});

jQuery plugin method to get object properties

I´m building a jQuery extension plugin with the following standard:
(function ($) {
var version = "1.1.0";
var active = false;
$.fn.inputPicker = function (options) {
return this.each(function () {
if ($(this)[0].tagName !== 'DIV')
throw new ReferenceError('mz.ui.dialog.dateTimePicker: Method works only on DIV types.');
/// Label
var labelObj = $("<label class='small'>Data Hora Inicial</label>");
$(this).append(labelObj);
/// Input
var inputObj = $("<input type='datetime-local' class='form-control input-sm'></input>");
$(this).append(inputObj);
})
});
};
}(jQuery));
And here is how I call it:
<div id='test'></div>
$('#test').inputPicker();
Later in code I wanna get the data that was entered in the input field, something like:
$('test').inputPicker().getInputData();
What´s the best way to accomplish that ? I´ve tried something like:
this.getInputData = function () {
return $(inputObj).val();
}
But got errors when calling the function.
Can someone help me with this ? Thanks in advance...

You could just make another method to get the input data like this using the DOM structure and class names that you added:
$.fn.getInputData = function() {
return this.eq(0).find("input.input-sm").val();
}
This would operate only on the first DOM element in the jQuery object (since it's returning only a single value).
So, after setting it up like you did:
$("#test").inputPicker();
You'd then retrieve the data like this:
var data = $("#test").getInputData();

How to toggle classes on click?

I know this is a simple question but I have been playing around with no success.
I have the following code
<a id="mute"><i class="icon-volume"></i></a>
I want to be able to toggle the class .icon-volume to .icon-volume-off when clicking.
After anyone who can help!
Thanks

Try
var a = document.getElementById("mute");
a.onclick = function(e){
var cl = a.firstChild.getAttribute('class');
if(cl == "icon-volume"){
a.firstChild.setAttribute('class','icon-volume-off');
}else{
a.firstChild.setAttribute('class','icon-volume');
}
};
See demo here

You could use jQuery
$('#mute').on('click', function () {
var el = $(this).find('i');
if (el.hasClass('icon-volume')) {
el.removeClass('icon-volume');
el.addClass('icon-volume-off');
} else {
el.removeClass('icon-volume-off');
el.addClass('icon-volume');
}
});
Or you could just add the icon-volume-off class and make sure its css takes precedence over the icon-volume class
$('#mute').on('click', function () {
var el = $(this).find('i');
if (el.hasClass('icon-volume-off')) {
el.removeClass('icon-volume-off');
} else {
el.addClass('icon-volume-off');
}
});

WARNING: This is a (relatively) new attribute. Check the compatibility table from Mozilla's Developer Network before you proceed. If IE 9 (or below) is important to you, then this is not the answer you're looking for.
DOM elements have a property called classList. The 3 methods you should familiarize yourself with are add, remove, and toggle.
In your case:
var el = document.querySelector('i');
el.onclick = function () {
el.classList.toggle('icon-volume');
el.classList.toggle('icon-volume-off');
}
Pretty simple.

knockout dirty flag code not working

Just started with knockout and need to implement page change warning. Following is the code snippet. I just need an alert pop up as warning if any change is made on the page.
function parseViewModel() {
var viewModel = JSON.parse(getState());
viewModel.checking = ko.observable(false);
viewModel.Slider = new ko.observable(100 - viewModel.Slider);
viewModel.CausalsList = buildHierarchy(viewModel.Causals);
viewModel.Causals["-1"] = "Total Marketing Budget";
viewModel.GeographiesList = ko.observableArray(gl);
viewModel.Geographies["0"] = "All Geographies";
viewModel.ProductsList = ko.observableArray(pl);
viewModel.Products["0"] = "All Products";
.
.
.
return viewModel;
}
function bindModel() {
model = parseViewModel();
ko.dirtyFlag = function (root, isInitiallyDirty) {
var result = function () { },
_initialState = ko.observable(ko.toJSON(root)),
_isInitiallyDirty = ko.observable(isInitiallyDirty);
result.isDirty = ko.computed(function () {
return _isInitiallyDirty() || _initialState() !== ko.toJSON(root);
});
result.reset = function () {
_initialState(ko.toJSON(root));
_isInitiallyDirty(false);
};
return result;
};
model.dirtyFlag = new ko.dirtyFlag(model);
model.isDirty.subscribe(function () {
alert("Page change warning!");
});
ko.applyBindings(model, $('#const').get(0));
ko.applyBindings(model, $('#buttonDiv').get(0));
}
Referred Ryan Niemeyer's blog. Unfortunately, it's not working anymore. Any insights please?

You would want to subscribe to model.dirtyFlag.isDirty in your case rather than model.isDirty.

One way to do is by using customBinding. I'm not that familiar with KO either but this might be something you're interested on.
Basically you would do is :-
ko.bindingHandlers.myFunction = {
update : function(){
//do something
}
}
http://knockoutjs.com/documentation/custom-bindings.html
And call it on your element using :-
<h1 data-bind="myFunction:{}"></h1>
Also, a jsfiddle to show how it works. (If you change the value of the First Name and focus out of it then the customBinding gets triggered. )
http://jsfiddle.net/3vuTk
Not sure if it's the best practice though.

Most elegant way to have one HTML element mirror another?

If I have two HTML elements that should always contain the same inner HTML text, what is the most elegant way to update them both at the same time?
For example:
<head>
<title id="pageTitle">My Application</title>
</head>
<body>
<h1 id="screenTitle">My Application</h1>
</body>
I would like the innerHTML of screenTitle and pageTitle to remain identical whenever a JavaScript function changes one of them.
I know I can iterate through the pageTitle and screenTitle elements, updating each of them whenever I change the string "My Application", but is there a more elegant way?

document.title.innerHTML is read-only in IE. This supposed to be a cross-browser method:
document.getElementById('screenTitle').innerHTML = document.title = 'My Application';
Instead of a literal value you can use a variable ofcourse.
If you really need something "elegant" (=== exotic), you can use a setter:
var page = {
set title(text) {
document.getElementById('screenTitle').innerHTML = document.title = text;
}
};
When ever you need to change the titles, just set it: page.title = newTitle;. Only you need to care of, is that you can refer page object from the current scope. Also this will only work in modern browsers.

Use a single function that encapsulates writes to both elements. So instead of directly using DOM methods, the rest of your code would use a function such as:
function setTitle(newTitle)
{
document.getElementById('pageTitle').innerHTML = newTitle;
document.getElementById('screenTitle').innerHTML = newTitle;
}
Of course this could be optimized/DRYed/refactored/overengineered ad nauseam...
function setTitle(newTitle)
{
if (setTitle.elements)
{
var id = document.getElementByIdl
setTitle.elements = [id('pageTitle'), id('screenTitle')];
}
setTitle.elements.forEach(function (elt)
{
elt.innerHTML = newTitle;
});
}

You should make a JS method that updates both simultaneously as long as you are in control of all the code that is going to modify the elements. Something like:
function updateElementGroup( newInnerHTML ) {
document.getElementById( 'pageTitle' ).innerHTML = newInnerHTML;
document.getElementById( 'screenTitle' ).innerHTML = newInnerHTM;
}
Which you can use like this:
updateElementGroup( 'New Text' );
If you are not in control of all the code you could set up some listeners to catch whenever one is changed and update the other one accordingly, something like this:
var isUpdating = false;
var elements = [
document.getElementById( 'pageTitle' ),
document.getElementById( 'screenTitle' ),
];
for ( i in elements ) {
elements[i].addEventListener( 'DOMCharacterDataModified', function( evt ) {
if ( isUpdating ) {
return;
}
isUpdating = true;
for ( i in elements ) {
elements[i].innerHTML = evt.newValue;
}
isUpdating = false;
} );
}

Using jQuery:
$('#pageTitle').bind('DOMSubtreeModified', function() {
if ($('#pageTitle').html() != $('#screenTitle').html())
$('#screenTitle').html($('#pageTitle').html());
});
$('#screenTitle').bind('DOMSubtreeModified', function() {
if ($('#pageTitle').html() != $('#screenTitle').html())
$('#pageTitle').html($('#screenTitle').html());
});