We Keep Coding

How to Convert .live() to .on()

I want to get rid of "TypeError: $(...).live is not a function" error. The code is below, I have tried but could not managed to fix it.
$(".search-text input[data-default], .gdlr-comments-area input[data-default]").each(function() {
var t = $(this).attr("data-default");
$(this).val(t), $(this).live("blur", function() {
"" == $(this).val() && $(this).val(t)
}).live("focus", function() {
$(this).val() == t && $(this).val("")
})

Here are the new and old ways to do the same thing as equivalent statements:
$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );
and more examples:
$( "a.offsite" ).live( "click", function() {
alert( "Goodbye!" ); // jQuery 1.3+
});
$( document ).delegate( "a.offsite", "click", function() {
alert( "Goodbye!" ); // jQuery 1.4.3+
});
$( document ).on( "click", "a.offsite", function() {
alert( "Goodbye!" ); // jQuery 1.7+
});

Set text for table with double click

I have several tables with ajax loaded content. Sometimes I have to change the content of a td manually before exporting it to PDF, so I thought best way would be to create a trigger for each td on double-click using jQuery's .dblclick(). The trigger would open a modal with an input field and change the text of the double-clicked td when submitting the modal.
This works, but when I change the content of a second, third, etc td, each previously clicked td gets the new value too.
Check my fiddle: https://jsfiddle.net/fvoufq07/
My code so far:
$( ".sitename" ).dblclick( function() {
var sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
});

It's because you re-use the same button for the modal. So everytime the modal is opened, you add a new listener on the button, but you don't kill the previous one.
You can kill a previous listener with off :
$( ".sitename" ).dblclick( function() {
var sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).off('click').click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
});

The problem you're seeing is that the click function you add to the button
$( "#msgBox button.btn" ).click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
is not removed. Because of this, every time you open the model anew, you change the text of any previously clicked .sitename as well as the newly clicked one.
In order to avoid this, you should remove the click event, or better yet use jQuery's .one() function which will only fire the callback on the first instance of an trigger event:
$( "#msgBox button.btn" ).one('click', function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
Updated fiddle: https://jsfiddle.net/fvoufq07/6/
Update: The above solution doesn't catch the problem of opening the modal then closing without clicking the "close" save button.
There are a couple of ways to fix this: either use .off() before adding the new .one() callback, or again use .off(), but conditionally upon the modal closing using bootstap's hidden.bs.modal trigger.
$( "#msgBox" ).one('hidden.bs.modal', function() {
$( "#msgBox button.btn" ).off('click');
});
You might also want to assign the 'click' listener to a variable so that you can remove that listener specifically, which will be useful if you have other 'click' listeners on the same element.
var updateText = $( "#msgBox button.btn" ).one('click', function() {
...
});
$( "#msgBox" ).one('hidden.bs.modal', function() {
$( "#msgBox button.btn" ).off('click', updateText);
});
Updated fiddle at https://jsfiddle.net/fvoufq07/7/ has an example.

Try this
var sitename;
$( ".sitename" ).dblclick( function() {
sitename = $(this);
$( "#msgBox .modal-title" ).html("Change sitename ");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
});
$( "#msgBox button.btn" ).click( function() {
$(sitename).text( $( "#new_sitename" ).val().trim() );
});
here is updated jsfiddle

try this
$( ".sitename" ).dblclick( function() {
sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
});
Krupesh Kotecha beat me too it ;)

Weird JQuery scripts behavior

Applied DataTable (jquery.dataTables.min.js) to the existing table, so having that table paged and sorted:
$( '#news_table' ).DataTable( {
"order": [[ 5, "asc" ]],
"lengthMenu": [5, 10, 20],
} );
Everything works smoothly on first page of the table. Some JQuery scripts stop working correctly when change page. So, there are related chunks of code:
<td>
<a href="#myModal" class="editNews" role="button" data-toggle="modal" data-id="${news.id}">
<img src="resources/img/edit.png"></img>
</a>
</td>
By clicking on image (edit.png) modal window appears. The next part converts the modal to the edit flavour.
$( '.editNews' ).click(function(e) {
e.preventDefault();
$( '#deleteNews' ).removeClass( 'notShow' );
var dataId = $( this ).attr( 'data-id' );
$( '#resetNews' ).addClass( 'notShow' );
$.ajax({
type: "GET",
dataType: "json",
url: "admin/update/" + dataId,
success: function( response ) {
console.log( response );
$( '#myModalLabel' ).html( "Edit post with id:<span style='color: rgb(255, 0, 0);'>" + response.id + "</span>" );
$( '#newsId' ).text( response.id );
$( '#incomingDate' ).text( response.incomingDate );
$( '#changeDate' ).text( response.changeDate );
$( '#messageTitle' ).val( response.title );
$( 'div#messageStatus button' ).each(function( index ) {
if ( response.messageStatus == index + 1) {
$( this ).addClass( 'active' );
}
});
$( '.note-editable' ).html( response.message );
$( '#messageOrder' ).text( response.messageOrder );
$( '#myModal' ).modal( 'show' );
},
complete:function() {
}
});
return false;
});
I mean, that clicking, say on the link (edit.png) on any page excepting first one modal window will still appear, but will be empty, so looks like scripts just missed. I tried to figure it out, but stuck.
There are also some other scripts which also stopped acting properly.
Thanks for the any advice.
Images below illustrate the situation:

Hi this is quite common problem, you use your jQuery code once (on DOM ready I suppose).
When you click pagination table is generated again and that new elements are not bind to your jQuery code.
You have to 1) run jQuery code after each ajax request maybe using ajax complete:function() {//put me here...
or 2)
use jQuery "on"
$( "body" ).on( "click", ".editNews", function() {
//put your code here
});

JQuery button each click, show/hide forms

Guess I'm just starting out here, so might as well look for any kind of help since I'm quite frustrated with this novice question...
I have a button that shows a form I created, with 1 click, but the problem comes when I want to show another form that comes with another button.
What I want, basically is that buttonA shows formA, but when I click buttonB, I want to hide formA and show formB. Now what's happening is that it's overlaying formA and formB.
Here's my current code..
function runEffect() {
$( "#effect" ).show( "drop");
};
function runEffect2() {
$( "#effect2" ).show( "drop");
};
//callback function to bring a hidden box back
function hideEffect() {
$( "#effect:visible" ).hide( "drop");
};
// set effect from select menu value
$( "#button" ).each(function(index) {
$(this).click(function(){
runEffect();
});
});
$( "#button2" ).each(function(index) {
$(this).click(function(){
runEffect2();
});
});
$( "#effect" ).hide();
$( "#effect2" ).hide();
I know this is easy, but I can't seem to find the answer to it.
Thanks!

try this
function runEffect() {
$( "#effect" ).show( "drop");
$( "#effect2" ).hide( "drop");
};
function runEffect2() {
$( "#effect2" ).show( "drop");
$( "#effect" ).hide( "drop");
};

$('#buttonB').click(funciton()(
$('#formA').hide();
$('#formB').show();
});
something like this?

I haven't tested it, but maybe you want to a more dynamic function.
Button class must be something like "formButton" and the id like "form1Button", the form id then should be "form1" and so on..
(Form 2 would have a button with class "formButton", id like "form2Button" and form 2 needs id "form2"
$(".formButton").click(function(e) {
e.preventDefault(); //prevent default action
var id = $(this).attr('id');
var formId = id.replace('Button', '');
$('#' + formId).show();
$('form').not(document.getElementById(formId)).hide();
});
When a formButton is clicked, the form will be shown. All other forms, wich do not have the requested ID, will be hidden.

Controlling a processing.js sketch w/ a jQuery slider

I've had some luck controlling processing.js sketches using html form elements and would like to use a jQuery slider to do the same.
<script>
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 37,
min: 1,
max: 700,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
</script>
<p>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/>
</p>
<div id="slider-range-min"></div>
I think my main problem is that I don't entirely understand the slider function, how to refer to its value inside the sketch, or how to refer the window.processing.Data={}; variable inside the slider.
Any and all help is appreciated.

Here's a working demo if it helps:
http://matrix.senecac.on.ca/~asalga/FSOSS2010/jQueryUI/jquery-test.html

I've never used Jquery-ui's slider before so I'm not sure if your using it correctly. But you can easily communicate between the processing code and the javascript code by placing a variable on the window object:
1) window.communicate = {}
2) store variables on that object : window.communicate.myVar
3) alter the variables in javascript:
// inside jquery-ui callback
window.communicate.myVar = ui.value;
4) read the variables in processing
I created a a demo for you on jsfiddle: http://jsfiddle.net/Zevan/Rms2N/2/
UPDATE
So in your slide function you can set a variable on your communicate object:
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
window.communicate.value = ui.value;
}
Then you can use "window.communicate.value" anywhere in your processing.js code.