Develop Reference

How to switch the src attribute of the img element back into jquery?

I created a script that changes an image when you click a button. The problem is with clicking again, because the src attribute remains the same. I would like after clicking again the source of the photo to go back to the initial src. I tried to do it using toggle method, but with positive effect.
My code:
$(document).ready(function(){
$('#button').click(function(){
$('.logo').attr('src', 'http://domena.com/logo-1.jpg');
});
});
I tried to solve it that way, but I failed.
$(document).ready(function(){
$('#button').click(function(){
$('.logo').toggle(
function() {
$(this).attr('src', 'http://domena.com/logo-1.jpg');
},
function(){
$(this).attr('src', 'http://domena.com/logo-2.jpg');
}
);
});
});

You can pass the URL of new image in an attribute of <img>, then you can get the current image ie src and next image(data-new) and interchange their values, like so -
$(document).ready(function(){
$('#button').click(function(){
let curr_img = $('.logo').attr('src'); // get current image
let new_img = $('.logo').attr('data-new'); // get new image to be shown
$('.logo').attr({'src': new_img, 'data-new': curr_img}); // interchange their values
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- give next values as an attribute ie data-new here-->
<img src="https://w7.pngwing.com/pngs/247/564/png-transparent-computer-icons-user-profile-user-avatar-blue-heroes-electric-blue.png" class="logo" data-new="https://image.flaticon.com/icons/svg/21/21104.svg" style="width: 150px; height: 150px;">
<br>
<button id="button">Toggle image</button>
Hope it helps you.

JQuery load() fires before image is loaded

I would like to change src attribute of my image and then read the width of the new image. Unfortunately JQuery load() function seems to fire before the image is loaded and width is set. Do you have any idea how to fix it?
function buildLoad(rc){
alert(rc.width());
}
var rc = $('img.myimg');
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()});
rc.load(buildLoad(rc));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="myimg" src="">

Try the onload event
$(document).ready(function(){
var rc = $('img.myimg');
rc.load(function(e){
console.log("Height:" + e.currentTarget.height, "Width:" + e.currentTarget.width)
});
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="myimg" src="">

Specifically in your code the problem was that you called the buildLoad(rc) regardless of the load event. What you needed to do is call a wrapper function that will run once the load was done:
rc.load(function() { buildLoad(rc) })
function buildLoad(rc){
alert(rc.width());
}
var rc = $('img.myimg');
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()});
rc.load(function() { buildLoad(rc) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="myimg" src="">
Regardless - there are several known issues regarding the load event on images among current browsers which you can read more about here.

Use Jquery one function.
http://api.jquery.com/one/
Try the following code.
$("img.myimg").one("load", function() {
// Get width of the image
}).attr("src", "New path");

Why the href attribute is not getting set in followinng scenario?

I'm using jQuery Colorbox library. I'm not able to a set the href attribute value of anchor tag. Can you help me in setting the value? If I print the value in alert it's printing correct href attribute value. My code is as follows:
<a class="edit_user_transaction_status c-btn" updatehref="{$control_url}{$query_path}?op=edit_user_transaction&page={$page}&txn_no={$user_transaction_details.transaction_no}&transaction_data_assign={$user_transaction_details.transaction_data_assign}&user_id={$user_id}{if $user_name!=''}&user_name={$user_name}{/if}{if $user_email_id!=''}&user_email_id={$user_email_id}{/if}{if $user_group!=''}&user_group={$user_group}&{/if}{if $user_sub_group!=''}&user_sub_group={$user_sub_group}{/if}{if $from_date!=''}&from_date={$from_date}{/if}{if $to_date!=''}&to_date={$to_date}{/if}{if $transaction_status!=''}&transaction_status={$transaction_status}{/if}{if $transaction_no!=''}&transaction_no={$transaction_no}{/if}" href="#updatePopContent">Update</a>
<div class="hidden">
<div id="updatePopContent" class="c-popup">
<h2 class="c-popup-header">Transaction</h2>
<div class="c-content">
<h3>Are you sure to change status?</h3>
NoYes
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".edit_user_transaction_status").click(function(e) {
//$.colorbox.close();
var update_url = $(this).attr('updatehref');
$('#update_url').attr('href', update_url);
$(".edit_user_transaction_status").colorbox({inline:true, width:666});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
});
</script>
I'm not able to set the value of href attribute (i.e. update_url) to the anchor tag having id update_url. Can you help me in this? Thanks in advance.

Try setting a data attribute instead of a made-up one (should work, but better to use data. Also, know that firebug, etc. doesn't always change when something is dynamically updated ive found. You can always console.log($('.edit_user_transaction_status').attr('href')) to check the final value:
<a class="edit_user_transaction_status c-btn" data-updateHref="{$control_url}... href="#updatePopContent">Update</a>
$(".edit_user_transaction_status").click(function(e) {
//$.colorbox.close();
var update_url = $(this).data('updateHref');
$('#update_url').attr('href', update_url);
$(".edit_user_transaction_status").colorbox({inline:true, width:666});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});

changing image src onClick without using attr

Is there something wrong with this code? I am trying to do the simple action of changing the src of an img named "midimg" upon mouse-click. It's not working and i don't know why
<script type="javascript">
function buttonInCompany()
{
$('#desc').load('incompany.html');
document.images["midimg"].src="http://cageme.herokuapp.com/css/mrcage.jpg";
}
</script>
<div onClick="buttonInCompany()">Everything is cage's cage.<br><br></div>
<img name="midimg" src="http://3.bp.blogspot.com/-BdfyYy_Y0gY/UP_3y3F2RDI/AAAAAAAAC-Q/eHPCltO8bG8/s1600/TomEngelsnicolas+thing.jpg">

Do you need the jQuery line? I just dropped it, than it works as expected.
function buttonInCompany()
{
document.images["midimg"].src="http://cageme.herokuapp.com/css/mrcage.jpg";
}

Seeing as how you are apparently already using a js framework (I assume jQuery), why not do it a more proper way to begin with?
<script type="text/javascript">
function buttonInCompany()
{
$('#desc').load('incompany.html');
$('#midimg').attr("src","http://cageme.herokuapp.com/css/mrcage.jpg");
}
$(document).ready(function() {
$("#someID").click(function() {
buttonInCompany();
});
});
</script>
<div id='someID'>Everything is cage's cage.<br><br></div>
<img id="midimg" src="http://3.bp.blogspot.com/-BdfyYy_Y0gY/UP_3y3F2RDI/AAAAAAAAC-Q/eHPCltO8bG8/s1600/TomEngelsnicolas+thing.jpg">

JQuery - Toggle an image inside of a div on click?

So I have a toggled div with an image inside of it that toggles the scrolling of the next div:
<div class="section">
<img src="on.png"> Stuff </div>
<div class="under" style="height:302px;"> Hi </div>
Here's the JQuery for it:
$(".section").click(function(){
$(this).next('div').slideToggle(1200);
});
How would I make it so on the click function for my div, it toggles the image to "off.png"? And if the src is "off.png", it toggles to "on.png"? Thanks. (Sorry I'm still a noob at JQuery)

$(function(){
$(".section").click(function(){
$("img").attr('src',
($("img").attr('src') == 'http://www3.picturepush.com/photo/a/2772891/64c/png/power-off.png?v0'
? 'http://kiwianon.com/forums/Themes/Simple_Green/images/on.png'
: 'http://www3.picturepush.com/photo/a/2772891/64c/png/power-off.png?v0'
)
)
});
});
demo

$(".section").click(function(){
var img = $(this).find("img").eq(0); //add an Id to your img tag so you can refine this selector.
if(img.attr("src") == "on.png")
{
img.attr("src","off.png");
}
else{
img.attr("src","on.png");
}
$(this).next('div').slideToggle(1200);
});

Ken, this is very simple! Just use the code below:
$('.section').click(function(){
var currentimg=$(this).find('img').attr('src');
if(currentimg=="off.png"){
$(this).find('img').attr('src','on.png');
}
else{
$(this).find('img').attr('src','off.png');
}
});

Use $(selector).attr("src", "theImageFilePath") to change the image.
The state could be represented in several ways, including global/module variable, $(selector).data(...), or simply by checking the current value of the "src" attribute.