We Keep Coding

modal pop up to be displayed when the page is scrolled to 50px

i had used cookie to store the value when click is done on popup to close after the user clicked on close popup the pop should not show again. but i'm getting on problem on this. popup is opening whenever im scrolling even though i had closed it.
<div id="fsModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" id="cross-btn" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div id="desk-view" class="modal-body">
<div id="pop-up" class="row">
<div class="arrow_box side-heading col-xs-5 col-sm-5">
<h3>Join the Movement, the newsletter that tackles the justice issues that matter to you most.</h3>
</div>
<div class="right-form col-xs-7 col-sm-7">
<form class="form-inline subscribe-form">
<div class="form-group">
<input class="email-popup" placeholder="Enter your email" name="email-input">
<button class="btn-form">Sign up</button>
</div>
</form>
</div>
</div>
</div>
<div id="mobil-view" class="modal-body">
<div class="pop">
<div class="side-heading">
<h3>Join the Movement, the newsletter that tackles the justice issues that matter to you most.</h3>
</div>
<div class="right-form">
<form class="form-inline subscribe-form">
<div class="form-group">
<input class="email-popup" placeholder="Enter your email" name="email-input">
<button class="btn-form">Sign up</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
$('#fsModal').on('hidden.bs.modal', function (e) {
$.cookie('close_popup' , '10' , { expires : 7 });
});
var scroll_function = getCookie("close_popup");
$(window).scroll(function(){
if (scroll_function == " ") {
if ($(this).scrollTop() >= 50) {
$("#fsModal").modal('show');
}
}
});

you may like to try this, why you are using cookies for this?
var ClosePopUp = false;
$('#fsModal').on('hidden.bs.modal', function (e) {
ClosePopUp = true;
});
$(window).scroll(function(){
if ($(this).scrollTop() >= 50 && ClosePopUp == false) {
$("#fsModal").modal('show');
}else {
$("#fsModal").modal('hide');
}
});

I'm using jQuery plugin (jQuery cookies) for this, you can get the same from https://github.com/js-cookie/js-cookie
First set cookies to false on home page load event
Cookies.set('ClosePopUp', 'false'); // set this only on home page load event
then you will need to set Cookies on your close model
$('#fsModal').on('hidden.bs.modal', function (e) {
Cookies.set('ClosePopUp', 'true');
});
after on your scroll check the same
$(window).scroll(function(){
if ($(this).scrollTop() >= 50 && Cookies.get('ClosePopUp') != 'true' ) {
$("#fsModal").modal('show');
}else {
$("#fsModal").modal('hide');
}
});
Finally Remove cookies on your logout..
Cookies.remove('ClosePopUp');
==== Edit for previous version of Cookies.js =====
First set cookies to false on home page load event
$.cookie('ClosePopUp', 'false',{ path: '/' }); // set this only on home page load event
then you will need to set Cookies on your close model
$('#fsModal').on('hidden.bs.modal', function (e) {
$.cookie('ClosePopUp', 'true',{ path: '/' });
});
after on your scroll check the same
$(window).scroll(function(){
if ($(this).scrollTop() >= 50 && $.cookie('ClosePopUp') != 'true' ) {
$("#fsModal").modal('show');
}else {
$("#fsModal").modal('hide');
}
});
Finally remove cookies on your logout..
$.removeCookie('ClosePopUp');

Try this:
Html:
<input type="hidden" id="is_close" value="0">
<div id="dialog">
</div>
Jquery:
$(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if(scrollPosition > 50 && $('#is_close').val() == 0 )
{
$('#dialog').dialog({
buttons: [
{
text: "Close",
click: function() {
$( this ).dialog( "close" );
$('#is_close').val('1');
}
}
]
});
}
});
Working Fiddle

Add button handler for a button that is generated dynamically

I have the following javascript code:
$(document).ready (function()
{
setInterval("RepeatedlyCallUpdate()",10000);
// Other code
$('#btnRefresh').click(function(e){
e.preventDefault();
alert ("Test");
});
// Other code
});
function RepeatedlyCallUpdate() {
$.ajax({
url: "/getdled.php",
data: "user=success",
success: function(msg){
console.log(msg);
var oldhtml=$("#Downloaded").html();
if ( msg !== oldhtml ) {
$("#Downloaded").html(msg);
}
}
});
}
The html code for #Downloaded:
<div id="Downloaded"><h3 style="padding-left:20px;">Downloaded files</h3>
</div>
At runtime, the #Downloaded div block is populated with html code so that it becomes this:
<div id="Downloaded"><h3 style="padding-left:20px;">Downloaded files</h3>
<ul class="nav nav-pills">
<li>
<button style="margin-left: 15px;" class="btn btn-primary refreshbtn" type="button" id="btnRefresh">
Refresh
</button>
</li>
</ul><div>
<div class="row">
<div style="margin-left: 15px;" class="col-md-4">
Some link</div>
<div class="col-md-1">314M</div>
</div>
</div>
</div>
The issue is that my #Downloaded button click event does not fire. What am I missing?

You can use event delegation
$("#Downloaded").on('click', '#btnRefresh', function(){
alert("lol");
});

How To Remove One Element From a Class with Lots Of Elements?

I have multiple .note and I want to be able to click on .remove (which is in each .note) and it will remove the .note that the .remove that I clicked was in. I've used .closest() to do that, but it will only work for the first note, and not the other ones after that. Thanks in advance!
Here is the code:
The code that removes the .note:
$('.remove').click(function () {
$(this).closest('.note').remove(".note");
});
HTML:
<body>
<div id="wrapper">
<div id="wrp">
<h1>Click to make a new note!!!</h1>
<hr>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item"></textarea>
<div class="saved"><span class="msg"></span>
</div>
</div>
</body>
JS:
$('.note').click(function (event) {
event.preventDefault();
});
$('#wrp, #wrapper').click(function showNote() {
$('.note').fadeIn();
});
$(function () {
$(document).mousedown(function (event) {
// only proceed if clcik is not anywhere in a note element
if (!$(event.target).closest('.note').length) {
var note2 = $('.note').first();
note2.clone().insertBefore(note2);
console.log(note2);
}
});
});
$('.remove').click(function () {
$(this).closest('.note').remove(".note");
});
window.onload = function () {
var input = $("#item").focus();
};
function date() { //code indentation
var now = new Date();
now2 = now.getMonth() + 1 + '/' + now.getDate() + '/' + now.getFullYear() + ' ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
$('.time').html(now2);
}
date();
var autosaveOn = false;
function myAutosavedTextbox_onTextChanged() {
if (!autosaveOn) {
autosaveOn = true;
$('.item').everyTime("3000", function () {
$.ajax({
type: "POST",
url: "/echo/html/",
data: "id=1",
success: function (msg) {
$('.msg').text(Saved);
alert("saved");
}
});
}); //closing tag
}
}
$(".note").closest('.note').draggable();
$(function () {
$("#tabs").autoSave(callback, ms);
});
$(".item").autoSave(function () {
var time = new Date().getTime();
$("#msg").text("Draft Autosaved " + time);
}, 500);

It looks like you have one note and then you are cloning it when you click on something other than the note and inserting it next to the previous note. Since you are only binding to the first note you need to use a live function. E.g. something like
$('body').on('click', '.remove', function() {
$(this).closest('.note').remove();
});

since you know that your .remove element is a direct child of the .note, you can just select its parent:
$('.remove').click(function () {
$(this).parent().remove();
});
if the .remove element is NOT a direct child of the .note, you can do this:
$('.remove').click(function () {
$(this).parents(".note").remove();
});
IMPORTANT:
if your notes are generated dynamically, then you will need to utilize event delegation, by attaching the click handler to the wrapper instead of the .remove buttons, and fire when elements with class .remove are clicked inside the wrapper:
$('#wrapper').on("click",".remove",function () {
$(this).parent().remove();
});

Do this:
$('.remove').click(function () {
$(this).closest('.note').remove();
});
That will remove only the closest note, as the closest() function already selects the elements anyway. If you pass a parameter to remove() it will search for all elements that match it, but if you use it on an already selected node, it will remove that node.
DOCS: https://api.jquery.com/remove/

Here is a possible solution. Possibly I am late... got distracted while typing the answer.
$('.remove').on('click', function(){
$(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<div id="wrp">
<h1>Click to make a new note!!!</h1>
<hr>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item">Note1</textarea>
<div class="saved">
<span class="msg"></span>
</div>
</div>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item">Note2</textarea>
<div class="saved">
<span class="msg"></span>
</div>
</div>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item">Note3</textarea>
<div class="saved">
<span class="msg"></span>
</div>
</div>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item">Note4</textarea>
<div class="saved">
<span class="msg"></span>
</div>
</div>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item">Note5</textarea>
<div class="saved">
<span class="msg"></span>
</div>
</div>
</div>
</div>
</body>

dblClick() not working

I have a big jquery code..
Thing is, i want to create a online banner editor.
I have added two texts which are inside two divs. This divs are draggable. The divs in turn resides under two more divs which are resizable
Now i want to make a feature that when i cleck on the div containing the text, the div must get editable so that i can edit inline
But dont know why, the dblClick isnt working
Here's my code
<script type="text/javascript">
$(function(){
$.contextMenu({
selector: '.context-menu-icon, .context-menu-text',
build: function($trigger, e) {
// this callback is executed every time the menu is to be shown
// its results are destroyed every time the menu is hidden
// e is the original contextmenu event, containing e.pageX and e.pageY (amongst other data)
return {
callback: function(key, options)
{
if(key=='delete')
$(this).remove();
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
};
}
});
});
$(document).ready(function()
{
$.fn.jPicker.defaults.images.clientPath='color-picker-img/';
$('.color_text').jPicker();
$("#blink_icon").dblclick(function()
{
alert( "Handler for .dblclick() called." );
});
$(".edit_text").dblclick(function()
{
alert( "Handler for .dblclick() called." );
});
$("#accept_first_text").click(function()
{
var img_w = $('#target').width();
var img_h = $('#target').height();
var first_text_width = parseFloat(parseFloat(img_w)/2);
var first_left = parseFloat(parseFloat(img_w)-parseFloat(first_text_width))/2;
var first_top = $('#first_text_top').val();
var first_left = $('#first_text_left').val();
var first_color = $('#first_text_color').val();
var first_size = $('#first_text_size').val();
var first_text_desc = $('#first_text_area').val();
$('#drag_first_text').css({"left":first_left+"px",
"top":first_top+"px",
"position":"absolute",
"width":first_text_width+"px",
"z-index":"5"});
$('#first_text').css({'font-weight':'bold',
'color':'#'+first_color,
'font-size':first_size+'px'});
$('#first_text').html(first_text_desc);
$('#first_text').resizable();
});
$("#accept_second_text").click(function()
{
var img_w = $('#target').width();
var img_h = $('#target').height();
var second_text_width = parseFloat(parseFloat(img_w)/2);
var second_left = parseFloat(parseFloat(img_w)-parseFloat(second_text_width))/2;
var second_top = $('#second_text_top').val();
var second_left = $('#second_text_left').val();
var second_color = $('#second_text_color').val();
var second_size = $('#second_text_size').val();
var second_text_desc = $('#second_text_area').val();
$('#drag_second_text').css({"left":second_left+"px",
"top":second_top+"px",
"position":"absolute",
"width":second_text_width+"px",
"z-index":"5"});
$('#second_text').css({'font-weight':'bold',
'color':'#'+second_color,
'font-size':second_size+'px'});
$('#second_text').html(second_text_desc);
$('#second_text').resizable();
});
$("#get_image").click(function()
{
html2canvas([document.getElementById('main_canvas')],
{
onrendered: function (canvas) {
/*document.getElementById('canvas').appendChild(canvas);*/
var Imagedata = canvas.toDataURL('image/png');
var imagename = $('#image_name').val();
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
$.post("save.php",{'image_link':Imagedata,'image_name':imagename},
function(img_data)
{
var final_href = $('<a/>',{'id':'final_href'});
$(final_href).prop({'href':'download.php?download='+img_data,'target':'_blank'});
var final_img = $('<img/>', {'id':'final','src':img_data});
$(final_img).css({"width":"100px","height":"auto"});
$(final_href).append(final_img);
$('#final_image').html(final_href);
ShowModalPopup('div_show_banner');
}
);
}
});
});
$("#get_animated_image").click(function()
{
html2canvas([document.getElementById('main_canvas')],
{
onrendered: function (canvas) {
/*document.getElementById('canvas').appendChild(canvas);*/
var shots = [];
var grabLimit = 400; // Number of screenshots to take
var grabRate = 50; // Miliseconds. 500 = half a second
var count = 0;
function showResults()
{
//console.log(shots);
for (var i=0; i<shots.length; i++) {
document.write('<img src="' + shots[i] + '"/>\n');
}
}
var grabber = setInterval(
function()
{
count++;
if (count>grabLimit)
{
clearInterval(grabber);
showResults();
}
var img = canvas.toDataURL("image/png");
shots.push(img);
}, grabRate);
var Imagedata = canvas.toDataURL('image/png');
var imagename = $('#animated_image_name').val();
}
});
});
$("#blink_icon").click(function()
{
var interval = 100;
var time = 90000000;
var timer = window.setInterval(function()
{
$("#drag_wrapper").css("opacity", "0.1");
window.setTimeout(function()
{
$("#drag_wrapper").css("opacity", "1");
}, 100);
}, interval);
window.setTimeout(function(){clearInterval(timer);}, time);
});
$("#upload_icon_Form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload_icon.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targeticonLayer").html(data);
},
error: function()
{
}
});
}));
$("#upload_template_Form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload_template.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
},
error: function()
{
}
});
}));
});
$(document).ready(function()
{
});
function dump_template(src,close_div)
{
var item_template = $('<img/>', {'id':'target','src':src});
var first_text = $('<div/>', {'id':'first_text','class':'edit_text'});
$(first_text).css({"left":"0px",
"top":"0px",
"color":"#fff",
"position":"relative",
"width":"auto",
"text-align":"center"});
$(first_text).html('Demo First Text');
var second_text = $('<div/>', {'id':'second_text','class':'edit_text'});
$(second_text).css({"left":"0px",
"top":"0px",
"color":"#fff",
"position":"relative",
"width":"auto",
"text-align":"center"});
$(second_text).html('Demo Second Text');
$('#main_canvas').html(item_template);
var width = $("#target").width();
var height = $("#target").height();;
$('#main_canvas').css({'height':height+'px','width':width+'px'});
var drag_first_text = $('<div/>', {'id':'drag_first_text','class':'context-menu-text'});
var drag_second_text = $('<div/>', {'id':'drag_second_text','class':'context-menu-text'});
$(drag_first_text).css({"left":"20px",
"top":"100px",
"position":"absolute",
"width":"auto",
"z-index":"5",
"text-align":"center",
});
$(drag_second_text).css({"left":"20px",
"top":"150px",
"position":"absolute",
"width":"auto",
"z-index":"5",
"text-align":"center"});
$(drag_first_text).append(first_text);
$(drag_second_text).append(second_text);
$('#main_canvas').append(drag_first_text).append(drag_second_text);
$(drag_first_text).draggable({grid:[1,1]});
$(drag_second_text).draggable({grid:[1,1]});
HideModalPopup(close_div);
}
function dump_icon(src,close_div)
{
var dragg_wrapper = $('<div/>', {'id':'drag_wrapper','class':'context-menu-icon'});
$(dragg_wrapper).css({"left":"20px",
"top":"20px",
"position":"absolute",
"width":"50px",
"z-index":"5"});
var item_img = $('<img/>', {'id':'icon_img','src':src});
$(item_img).css({"left":"0px",
"top":"0px"});
$(dragg_wrapper).append(item_img);
$('#main_canvas').append(dragg_wrapper);
$(dragg_wrapper).draggable({grid:[1,1]});
$("#icon_img").resizable();
HideModalPopup(close_div);
}
function choose_template()
{
$.post("showtemplate.php",{'show':'show'},
function(data)
{
$('#div_template_list').html(data);
ShowModalPopup('div_show_template');
});
}
function choose_icon()
{
$.post("showicon.php",{'show':'show'},
function(data)
{
$('#div_icon_list').html(data);
ShowModalPopup('div_show_icon');
});
}
</script>
EDIT
As someone requested, here's the html
<div class="container">
<div class="row">
<div class="span11">
<div class="demo-box">
<div class="page-header">
<h1>Dynamica Banner Creator</h1>
</div>
<h4>Upload Banner Template</h4>
<div style="margin-bottom: 10px; height: auto; overflow:hidden;">
<div class="button_div">
<a href="javascript:void(0);"
onclick="ShowModalPopup('div_upload_template');">
Upload Template
</a>
</div>
<div class="button_div">
<a href="javascript:void(0);"
onclick="choose_template()">Choose Template</a>
</div>
<div class="button_div">
<a href="javascript:void(0);"
onclick="ShowModalPopup('div_upload_icon');">Upload Icon</a>
</div>
<div class="button_div">
<a href="javascript:void(0);"
onclick="choose_icon()">Choose Icon</a>
</div>
</div>
<div style="position:relative;" id="main_canvas">
</div>
</div>
<div id="script_frame">
<h1>Enter your text details details</h1>
<div style="position:relative; height:auto; overflow:hidden;">
<div id="first_text_setter">
<div class="object_container">
<div class="span_container">
<span class="input_span">First Text Top-Pos.</span>
</div>
<div class="text_container">
<input id="first_text_top" name="first_text_top"
class="input_text"/>
</div>
</div>
<br/>
<div class="object_container">
<div class="span_container">
<span class="input_span">First Text Left-Pos.</span>
</div>
<div class="text_container">
<input id="first_text_left" name="first_text_left"
class="input_text"/>
</div>
</div>
<br/>
<div class="object_container">
<div class="span_container">
<span class="input_span">First Text Color.</span>
</div>
<div class="text_container">
<input id="first_text_color" name="first_text_color"
class="color_text"/>
<span class="jPicker">
</span>
</div>
</div>
<br/>
<div class="object_container">
<div class="span_container">
<span class="input_span">First Text Size.</span>
</div>
<div class="text_container">
<select id="first_text_size" name="first_text_size"
class="input_text">
<?php
for($i=4;$i<=32;$i=$i+2)
{?>
<option value="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}?>
</select>
</div>
</div>
<br/>
<div class="object_container">
<span class="input_span">First Text Des</span>
<br/>
<textarea id="first_text_area" name="first_text_area" class="input_text_area"></textarea>
</div>
<button id="accept_first_text">Get</button>
<div class="clearfix"></div>
</div>
<div id="second_text_setter">
<div class="object_container">
<div class="span_container">
<span class="input_span">Second Txt Top-Pos</span>
</div>
<div class="text_container">
<input id="second_text_top" name="second_text_top"
class="input_text"/>
</div>
</div>
<div class="object_container">
<div class="span_container">
<span class="input_span">Second Txt Left-Pos</span>
</div>
<div class="text_container">
<input id="second_text_left" name="second_text_left"
class="input_text"/>
</div>
</div>
<div class="object_container">
<div class="span_container">
<span class="input_span">Second Text Color</span>
</div>
<div class="text_container">
<input id="second_text_color" name="second_text_color"
class="color_text"/>
<span class="jPicker">
</span>
</div>
</div>
<div class="object_container">
<div class="span_container">
<span class="input_span">Second Text Size</span>
</div>
<div class="text_container">
<select id="second_text_size" name="second_text_size"
class="input_text">
<?php
for($i=4;$i<=32;$i=$i+2)
{?>
<option value="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}?>
</select>
</div>
</div>
<div class="object_container">
<span class="input_span">Second Txt Des</span>
<br/>
<textarea id="second_text_area" name="second_text_area" class="input_text_area"></textarea>
</div>
<button id="accept_second_text">Get</button>
<div class="clearfix"></div>
</div>
</div>
<br/>
<div style="clear:both; float:left; margin-top:30px; position:relative;">
<div class="object_container">
<span class="input_span">Image Name</span>
<input id="image_name" name="image_name"
class="input_text"/>
</div>
<br/>
<button id="get_image">Save Image</button>
</div>
<div style="clear:both; float:left; margin-top:30px; position:relative;">
<div class="object_container">
<span class="input_span">Animated Gif Name</span>
<input id="animated_image_name" name="image_name"
class="input_text"/>
</div>
<br/>
<button id="get_animated_image">Save Gif Image</button>
<button id="blink_icon">Blink</button>
</div>
</div>
</div>
</div>
</div>
</div>

There is far too much code to wade through, but the most likely cause is dynamic creation of the divs.
Use delegated event handlers instead, attached to a non-changing ancestor (document is the default if nothing closer is available). Try this:
$(document).on('dblclick', "#blink_icon", function()
{
alert( "Handler for .dblclick() called." );
});
$(document).on('dblclick', ".edit_text", function()
{
alert( "Handler for .dblclick() called." );
});
They work by listening for the specified event (dblclick in this case) bubbling up to the ancestor, then it applies the jQuery selector, then it calls the function on any matching elements that caused the event. This means they can work on elements that do not exist yet.

Append to class if hidden div value is equal to attribute from XML

I've searched and tried for 2 days now, with no luck whatsoever.
What i'm trying:
I generate several div's through a foreach in xslt, that contains a hidden div where i store a code to match value out of an external xml file on. Something like this:
<div class="pakket_content">
<a href="http://">
<div class="waardering_wrapper col-xs-12">
<div class="sterwaardering col-xs-8">
<img src="http://">
</div>
<div class="CODE">CODE</div>
<div class="waardering col-xs-4">
<p>-</p>
</div>
<div class="waardering pull-right">
<b>-</b>
</div>
</div>
</a>
<a href="">
<button type="button" class="btn btn-default btn-md pull-right col-xs-12">
Nu boeken!
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</a>
</div>
Where the div class 'code' contains the code to match on.
The xml that comes out of this is:
<entities>
<accommodation cms-id="458245" external-id="CODE" name="Trip A">
<destination cms-id="45541" name="Paramaribo" level="destination"/>
<country cms-id="4545" name="Suriname" level="country"/>
<accommodation-type>Hotel</accommodation-type>
<testimonial-count>88</testimonial-count>
<average-testimonial-score>7.6</average-testimonial-score>
<deep-link>
http://link.com
</deep-link>
<testimonial-count-per-language>88</testimonial-count-per-language>
<testimonial-count-all>88</testimonial-count-all>
<average-testimonial-score-all>7.6</average-testimonial-score-all>
</accommodation>
</entities>
Now i wanted to append the average-testimonial-score to div "waardering" when the external-id attribute in equals the value in . But how would i go about that?
I tried with looping through the value of the div class and the attribute, like this:
$(document).ready(function() {
$.ajax({
type: "GET",
url: "file.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('accommodation').each(function(index) {
var cijfer = $(this).find('average-testimonial-score-all').text();
$('.CODE').each(function(index) {
var divcode = $(this).text();
$.attr('external-id').each(function(index) {
var attrcode = $(this).text();
if (divcode == attrcode) {
$(".waardering").append(cijfer);
};
});
});
});
}
});
});
With no result.
Can someone push me in the right direction with this?

Fetching accommodation external-id in correct way (according to how .attr() is supposed to work), the code works as it should.
I omitted Ajax request for testing.
Fiddle.
$(document).ready(function()
{
var xml = '<entities><accommodation cms-id="458245" external-id="CODE" name="Trip A"> <destination cms-id="45541" name="Paramaribo" level="destination"/> <country cms-id="4545" name="Suriname" level="country"/> <accommodation-type>Hotel</accommodation-type> <testimonial-count>88</testimonial-count> <average-testimonial-score>7.6</average-testimonial-score> <deep-link>http://link.com</deep-link> <testimonial-count-per-language>88</testimonial-count-per-language> <testimonial-count-all>88</testimonial-count-all> <average-testimonial-score-all>7.6</average-testimonial-score-all> </accommodation></entities>';
$(xml).find('accommodation').each(function(index)
{
var cijfer = $(this).find('average-testimonial-score-all').text();
var externalId = $(this).attr("external-id");
$('.CODE').each(function(index)
{
var divcode = $(this).text();
if (divcode == externalId)
{
$(".waardering").append(cijfer);
};
});
});
});