Develop Reference

Toggle between images in javascript or jquery

I need to toggle between "edit.png" and "ok.png" . Initially web page loads the page contains "edit.png" image buttons. Like in the screen shot below
My requirement is, once i click on the edit.png it should be remains as edit.png image state. And once again i click on the edit.png it should changed to "ok.png". So how can i do this anyone help me.
What i tried is
$(function(){
$('.edit').on('click',function(){
$(this).toggle();
//show the ok button which is just next to the edit button
$(this).next(".ok").toggle();
});
$('.ok').on('click',function(){
$(this).toggle();
$(this).next(".edit").toggle();
});
})
$('#projectsTable').Tabledit({
url: '#',
deleteButton: false,
buttons: {
edit: {
class: 'btn btn-primary secodary',
html: '<img src="/concrete5/application/images/animated/btn_edit.png" class="edit" /><img src="/concrete5/application/images/animated/btn_ok.png" class="ok" style="display:none" />',
action: 'edit'
}
},
columns: {
identifier: [1, 'Projects'],
hideIdentifier: true,
editable: [[1, 'Projects'], [2, 'Subprojects'],[8, 'Project Status', '{"1": "Open", "2": "Closed"}']]
},
onDraw: function() {
console.log('onDraw()');
},
onSuccess: function(data, textStatus, jqXHR) {
console.log('onSuccess(data, textStatus, jqXHR)');
console.log(data);
console.log(textStatus);
console.log(jqXHR);
},
onFail: function(jqXHR, textStatus, errorThrown) {
console.log('onFail(jqXHR, textStatus, errorThrown)');
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
},
onAlways: function() {
console.log('onAlways()');
},
onAjax: function(action, serialize) {
console.log('onAjax(action, serialize)');
console.log(action);
console.log(serialize);
}
});
$(function(){
$('.edit').on('click',function(){
$(this).toggle();
//show the ok button which is just next to the edit button
$(this).next(".ok").toggle();
});
$('.ok').on('click',function(){
$(this).toggle();
$(this).next(".edit").toggle();
});
})

Use a click counter, so when you click on the button the second time, it shows the "edit" button and resets the counter back to 0.
When you then click on the "ok" button it changes back to the "edit" button, and because you now have done the first edit, next time you click on the button it changes to "ok" right away.
$('.edit').each(function() {
var clickCounter = 0, // Sets click counter to 0 - No clicks done yet
firstEdit = false; // Sets first edit to false
$(this).on('click', function() {
clickCounter++;
if( clickCounter == 2 || firstEdit == true ) {
$(this).toggle();
$(this).next('.ok').toggle();
clickCounter = 0; // Reset counter
firstEdit = true;
}
});
});
$('.ok').on('click', function() {
$(this).toggle();
$(this).prev('.edit').toggle();
});
Working Fiddle

$(window).ready(function(){
$('.edit').each(function(){
var counter=0;//add a counter to each edit button
this.on('click',function(){
counter++;//increase counter
console.log(counter);
if(counter===2){//if button clicked twice
$(this).toggle();
//show the ok button which is just next to the edit button
$(this).next(".ok").toggle();
counter=0;//reset counter
}
});
});
});
or taking pure ES6:
window.onload=function(){//when the page is loaded
var imgs=[...document.getElementsByClassName("edit")];//get all edit imgs
imgs.forEach(img=>{//loop trough images
var counter=0;//add a counter for each image
img.onclick=function(){
counter++;//onclick increase counter
if(conter===2){//if img was clicked twice
this.src="ok.png";//replace the img
counter=0;
}
}
});
};

You can use one class to control and change the state of your button:
$('.edit').on('click',function(){
if ($(this).hasClass('is-state1')) {
$(this).next(".ok").toggle();
$(this).toggle();
}
$(this).toggleClass('is-state1');
});
$('.ok').on('click',function(){
$(this).toggle();
$(this).next(".edit").toggle();
});
Also I'm thinking you are wrong in ok button event as you want change your previous and not your next button:
$('.ok').on('click',function(){
$(this).toggle();
$(this).prev(".edit").toggle();
});

Javascript don't work on ajax generated part

I have a little problem with ajax generated part - javascript don't work on this generated part.
There is ajax call:
<script>
$(window).on('scroll', function() {
$("#preloadmore").show();
if ($(window).height() + $(window).scrollTop() + 350 >= $(document).height()) {
//AJAX
var idlast = 256;
$.ajax({
url: "ajax/loadmore.php",
type: "POST",
data: {
id: idlast
},
success: function(result) {
if (result != "") {
$("#preloadmore").hide();
$("#loadmore").html(result);
} else
alert("Error 504");
}
});
}
});
</script>
In body I have part to display ajax result:
<div id="loadmore"></div>
When ajax input content in loadmore div, javascript don't work on this part.
There is jquery - don't work:
$('.rating').on('rating.change', function(event, value, caption) {
alert('Test');
});
Thanks

I don't quite grasp how .rating is related to the 2 code snippets before it. Anyways, I hope I got your problem right.
// I assume your .rating field is dynamically loaded inside #loadmore
$('#loadmore').on('change', '.rating', function(e){
alert('Test');
alert( $(this).val() );
});
// If your .rating field already exists, then try this
$('.rating').on('change', function(event) {
alert('Test');
alert( $(this).val() );
});
Reference: http://api.jquery.com/on/

Ajax + browser backbutton = checkbox not working

I have a content page which is loaded via Ajax with a checkbox on it. The checkboxes works as it should when I click the normal menu buttons on my webpage to get to the content. But when I go to another page and use the back button to get back to the page which has the checkboxes, the checkboxes stop working.
html:
<div id="filters">
<ul id="filters-background">
<li id="option-type">Filter Options</li>
<li class="wave2"><label for="white">White<input type="checkbox" name="white" value=".White" id="white"></label></li>
<li class="wave2"><label for="blue">Blue<input type="checkbox" name="blue" value=".Blue" id="blue"></label></li>
</ul>
</div>
<script type="text/javascript">
OnSort();
</script>
js:
function OnSort(e) {
console.log('aaa');
// filter button click
var filterCheckboxes = $('#filters input');
var filters = [];
filterCheckboxes.change(function() {
console.log('clicked checkbox');
filterCheckboxes.filter(':checked').each(function() {
console.log('working');
filters.push( this.value );
});
});
}
If you look at the above code, the console will output 'aaa' when I click on the back button but if I test a checkbox it will not output 'clicked checkbox' in the console. How can I make it so the checkboxes will keep working even after I use the browser back button?
Maybe relevant PageLoad and Backbutton Ajax code:
function OnLoadPage(e) {
e.preventDefault();
var pageurl = $(this).data('url');
$.ajax({
type: 'GET',
url: pageurl,
success: function(data) {
$('#content').html(data['content']); // update content
if(data['menu']) { // update menu
$('#menu').html(data['menu']);
}
else {
$('#menu').html('');
}
// update url
window.history.pushState({path:pageurl}, '', pageurl);
},
error: function(response) {
alert('ERROR:' + response.responseText);
}
});
}
function InitOverrideBrowserBackButton() {
// override the back button to get the ajax content without page reload
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab', success: function(data){
$('#content').html(data['content']); // update content
if(data['menu']) { // update menu
$('#menu').html(data['menu']);
}
else {
$('#menu').html('');
}
}});
});
}
I've also tried:
$(document).on('click', '#filters input', function() {
console.log('clicked checkbox');
filterCheckboxes.filter(':checked').each(function() {
console.log('working');
filters.push( this.value );
});
});
Which will output 'aaa' and 'clicked checkbox' but not 'working'.

Figured it out with help from others on StackOverflow. Here's the answer:
function OnSort(e) {
console.log('aaa');
// filter button click
var filters = [];
$(document).on('click', '#filters input', function() {
console.log('clicked checkbox');
$('#filters input', document).filter(':checked').each(function() {
console.log('working');
filters.push( this.value );
});
});
}

how do you enable image loading and disabling it using javascript

I have this javascript function. I would like to show image loading while the div is loading. And set the loadking image to null if the div is loaded or there was a an error:
As is, the loading image keeps showing on the page, any ideas what am missing here?
$(document).ready(function(){
$("#submitbutton").on("click", function(){
//disable the button to prevent multiple clicks
$("#submitbutton").attr("disabled", "disabled");
$('#loading').html('<img src="img/loading.gif"> loading...');
var vcenter = $("#v_name").val();
vcenter = "'"+vcenter+"'";
var req = ocpu.rpc("output1", {
vcenter : vcenter
}, function(output){
var data=output;
});
req.fail(function(){
alert("Server error: " + req.responseText);
$('#loading').html();
});
//after request complete, re-enable the button
req.always(function(){
$("#submitbutton").removeAttr("disabled");
$('#loading').html();
});
});
});
html code:
<button id="submitbutton" type="button">Submit</button>
<div id="loading"></div>
<div id="output"> </div>

You need to empty it.
$('#loading').html('');
That is the fix to your current question. However what I would recommend is something like this:
$(document).ajaxStart(function () {
$('#loading').css('display', 'block');
}).ajaxStop(function () {
$('#loading').css('display', 'none');
});
And the #loading div to contain the image from HTML already.

Remove parent element jQuery

How can I remove all elements including its parent when click. The tabs is generated dynamically. What I tried so far is:
I'm using bootbox for the confirmation.
function remove() {
bootbox.confirm("Are you sure?", function(result) {
if( result != false ) {
var anchor = $(this).siblings('a');
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs li").children('a').first().click();
}
});
}
The tab that I will remove is generated through this:
$(document).on('submit','#pop-form', function(e) {
// make an ajax request
$.post('../admin/FLT_add_tab.do',
$('#pop-form').serialize(),
function( data ) {
// if data from the database is empty string
if( $.trim( data ).length != 0 ) {
// hide popover
$('#popover').popover('hide');
//append new tab and new tab content
var id = $(".nav-tabs").children().length - 1;
$('#popover').closest('li').before('<li>' + data + ' </li>');
$('.tab-content').append('<div class="tab-pane" id="tab_' + id + '"> <c:import url="flt-pis.html"></c:import> </div>');
} else {
// error handling later here
}
}
);
e.preventDefault();
});
UPDATE:
remove() is called by appending <i> when the user hover the tab
$(document).ready( function() {
$(document).on('mouseenter', 'a.g-tabs', function() {
$( this ).append( $('<i class="icon-clear-remove" onClick="tabRemove();"></i>') );
});
$(document).on('mouseleave', 'a.g-tabs', function() {
$( this ).find( ".icon-clear-remove:last" ).remove();
});
});
The JS that concern if the page is refreshed
<!-- Other tabs from the database -->
<c:forEach var="tabNames" items="${ allTabs }">
<li>${ tabNames.key } </li>
</c:forEach>
Popover for adding new tab
<!-- Add new tab -->
<li>New <i class="icon-plus-sign"></i></li>

The main problem is remove method does not know on which element it is getting called, I've changed the remove to use jQuery handler instead of inlined click handler.
Try
$(document).on('mouseenter', 'a.g-tabs', function () {
$(this).append($('<i class="icon-clear-remove"></i>'));
});
$(document).on('mouseleave', 'a.g-tabs', function () {
$(this).find(".icon-clear-remove:last").remove();
});
jQuery(function () {
$(document).on('click', '.icon-clear-remove', function () {
var $this = $(this);
bootbox.confirm("Are you sure?", function (result) {
if (result != false) {
alert('delete:' + $this[0].tagName)
var $a = $this.closest('.g-tabs');
alert($a.length)
$($a.attr('href')).remove();
$a.parent().remove();
$(".nav-tabs li").children('a').first().click();
}
});
})
})

I can't tell exactly how you are implementing this but if my guess is right this should work.
If it doesn't work, you should consider setting up a fiddle.
function remove() {
bootbox.confirm("Are you sure?", function(result) {
if (result) { $(this).remove(); }
});
}