Develop Reference

How to switch images using JS?

I have a simple code that switches text when an image is clicked:
js:
$(document).ready(function() {
$('.srb').on('click', function() {
var r = $('.localization').each(function() {
var el = $(this);
var key = (el.attr('caption'));
el.text(srb[key]);
});
});
$('.eng').on('click', function() {
var r = $('.localization').each(function() {
var el = $(this);
var key = (el.attr('caption'));
el.text(eng[key]);
});
});
var srb = {
welcome: 'Добро дошли на наш сајт!'
};
var eng = {
welcome: 'Welcome to our site!'
};
});
HTML:
<span class='localization' caption='welcome'>Welcome to our site!</span>
<img src="img/Serbia.png" value='srb' class="srb" id="flag"/>
<img src="img/United-Kingdom.png" class='eng' value='eng'/>
Is it possible to switch images when language is switched (for example, when English language is set, GB flag disappears)?

Edit html like that
<img src="img/Serbia.png" value='srb' class="image_flag srb" id="flag"/>
<img src="img/United-Kingdom.png" class="image_flag eng" value="eng"/>
add class hidden element
.d-none{
display: none !important;
}
<script>
function activeImageFlag(flagActive){
document.querySelectorAll(".image_flag").forEach(function(flagImage){
flagImage.classList.add('d-none')
});
document.querySelector(".image_flag." + flagActive).classList.remove('d-none')
}
</script>

Why my ajax function cannot append html at targeted div element?

I am submitting a html form through AJAX and then appending results at particular div element.The corresponding ajax is :-
$(document).ready(function(){
$('.commentbutton').click(function(){
var idb=$(this).attr('id');
var formid=$('#Comment'+idb);
datab=getFormData(formid);
$.ajax({
type:"POST",
url:'/submit/channelcomment',
data:datab,
success:function(data){
console.log(data.content);
console.log(data.profile);
var html="<div class='CommentRow'><a href='/Channel/"+data.profile+"/'style='font-weight: bolder;margin-right: 10px;display: inline-block;'>"+data.profile+"</a>"+data.content+"</div>"
console.log('Done');
idt=$('#CommentBody'+idb);
console.log(idt);
idt.append(html);
},
}),
event.preventDefault();
});
});
function getFormData($form){
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}
The desired position at which i'm trying to append html is as follows:-
<div class="CommentBody" id="CommentBody{{c.id}}">
</div>
Here c.id and idb equals to 1.But it is not appending html.

When you say
But it is not appending html.
What is actual behavior?
I tried the dummy code as below and it is working fine.
$(document).ready(function() {
$('.commentbutton').click(function() {
var html = "<div class='CommentRow'><a href='/Channel/data.profile/'style='font-weight: bolder;margin-right: 10px;display: inline-block;'>data.profile</a>data.content</div>"
var idb = '1';
idt = $('#CommentBody' + idb);
alert(idt);
idt.append(html);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='commentbutton'>Comment</button>
<div class="CommentBody" id="CommentBody1">
</div>

Accessing <div> elements by name in jQuery

I have the following content in -
var jsonObj = [ {"name" : "Jason"},{"name":"Bourne"},{"name":"Peter"},{"name":"Marks"}];
<!---->
$("#getname").click(function() {
var response = getNames(jsonObj);
$("#nameData").html(response);
});
function getNames(jsonObj){
var response = JSON.stringify(jsonObj);
for ( var i = 0, len = jsonObj.length; i < len; i++) {
var nameVal = jsonObj[i].name;
response = response.replace(nameVal,replaceTxt(nameVal,i));
}
return response;
}
function replaceTxt(nameVal,cnt){
return "<u id='"+cnt+"' name='names' >"+nameVal+"</u> ";
}
$('u[name="names"]').dblclick(function(){
var currentId = $(this).attr('id');
alert(currentId);
});
});
and html as below -
<button id="getname">Get Name</button>
<div id="nameData"></div>
Double clicking on names value doesn't generating alerts.

are you sure it is..
<dev id="nameData"></dev>
OR
<div id="nameData"></div>
this works...but you have an extra }); in the question...(don't know if it is a typo)
fiddle here

Try this:
$(document).ready(function(){
$('u[name="names"]').live("dblclick", function(){
var currentId = $(this).attr('id');
alert(currentId);
});
});

Try moving this code:
$('u[name="names"]').dblclick(function(){
var currentId = $(this).attr('id');
alert(currentId);
});
});
inside
$("#getname").click(function() {
var response = getNames(jsonObj);
$("#nameData").html(response);
});
like:
$("#getname").click(function() {
var response = getNames(jsonObj);
$("#nameData").html(response);
$('u[name="names"]').dblclick(function(){
var currentId = $(this).attr('id');
alert(currentId);
});
});
});

You don't need the last "});" Or you didn't paste the whole code.
Look here: http://jsfiddle.net/4cajw/1/

As your code suggest that you are .dblclick()ing on dynamically generated element, that don't work, you have to select parent elem which exist in the document
$(document).on('dblclick','u[name="names"]', function(){
var currentId = $(this).attr('id');
alert(currentId);
});
try this out.

JSON.stringify - object -> JSON.
JSON.parse - JSON -> object

jquery two replace functions

I am not sure why item count parentheses aren't being removed in this tiny fiddle example.
EDIT: Here is my result from looking at the working answer.
$.fn.itemcount = function(){
var text = $(this).text();
text = text.replace("(","").replace(")","");
$(this).text(text);
};
$("#prc").itemcount();
$.fn.sidecartcost = function(){
var el = $(this);
var text = $(this).text();
text = text.replace("Your sub total is", "").replace(". ", "");
$(this).text(text);
};
$('.SideCartCost').sidecartcost();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="prc">(7 Items)</div>
<div class="blank">Woo</div>
<div class="SideCartCost">Your sub total is $300.03. </div>

you are not replacing the html/text of the div like so http://jsfiddle.net/x5jeL/1/

Using ID as a variable

I'm trying to find the text of the span with the class name "link" but i have problems.
<div id="item-0" class="box">
.......
</div>
<div id="item-1" class="box">
<p><strong>Link: </strong><span class="link">http://www.domain.com/list44/</span></p>
<p><input type="submit" value="submit" class="load-button2"></p>
</div>
<div id="item-2" class="box">
.......
</div>
$(".load-button2").click(function(){
var id = $(this).closest('.box').attr('id');
alert(id); // showing the right box ID
var linkp = $(/*** what should i put here? ***/ "#" + id + " .link").text;
});

You should just be able to do:
$(".load-button2").click(function(){
var id = $(this).closest('.box').attr('id');
alert(id); // showing the right box ID
var linkp = $("#" + id).find(".link").text();
});
Although, a more elegant solution would be:
$(".load-button2").click(function(){
var linkp = $(this).closest('.box').find(".link").text();
});

You can try this code:
$(".load-button2").click(function(){
var text = $(this).closest('.box').find('.link').text();
});

$(".load-button2").click(function(){
var id = $(this).closest('.box').attr('id');
alert(id); // showing the right box ID
//var linkp = $(what should i put here / "#" + id = " .link").text;
var linkp = $("#"+id).find(".link").text;
});

An alternative so you don't have to do another full DOM traversal (since you already get the container).
$(".load-button2").click(function(){
var container = $(this).closest('.box');
var id = container.attr('id');
alert(id); // showing the right box ID
var linkp = container.find('.link').text();
alert(linkp);
});
See it in action.