We Keep Coding

Updating <li> text using JSON data

I trying to update dynamically added li text (html code) with the JSON data as below script, but the update method are not working, could you help me to check?
City
<input type="text" id="cinput">
<br>
<input type="button" id="cadd" value="Add">
<input type="button" id="cup" value="Update">
<div class="clista">
<ul class="lista inset" id="citem">
<li data-val="Campinas">Campinas [T:00ºC H:00%] <span style="float:right;"><b>[X]</b></span>
</li>
<li data-val="Sao Paulo">Sao Paulo [T:00ºC H:00%] <span style="float:right;"><b>[X]</b></span>
</li>
</ul>
</div>
Javascript
$("#cadd").on("click", function () {
var cinput = document.getElementById("cinput").value;
var msg = "'Remover?'";
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + cinput + "&units=metric", function (data) {
var cdados = ('T:' + data.main.temp + 'ºC H:' + data.main.humidity + '%');
$('#citem').append('<li data-val="' + cinput + '">' + cinput + " [" + cdados + ']<a href="#" onclick="if(confirm(' + msg + ')){parentNode.parentNode.removeChild(parentNode)}"> <span style="float:right;"><b>[X]</b></span></li>');
document.getElementById("cinput").value = "";
});
});
$("#cup").on("click", function () {
var cidade = '';
var oldText = '';
var novotxt = '';
var msg = "'Remover?'";
var Link = (' <span style="float:right;"><b>[X]</b></span>');
$('.clista li').each(function () {
var $this = $(this);
cidade = $(this).data('val');
oldText = $(this).html();
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + cidade + "&units=metric", function (data) {
var cdados = ('T:' + data.main.temp + 'ºC H:' + data.main.humidity + '%');
novotxt = cidade + " [" + cdados + "] ";
alert(novotxt);
$this.html(function (index, html) {
return html.replace(oldText, novotxt + Link);
});
});
});
});
jsFiddle here: http://jsfiddle.net/fabiobraglin/rcheaowx/21/

You're hitting an asynchronous issue here. You have $.each and within that you're setting oldText and trying to use it's value within the callback of getJSON. However, the entirety of the $.each loop will run before any of the getJSON callbacks are run, so oldText will end up being set to the final element in the collection for ALL of the callbacks, so it will only ever be correct for the final element.
There's two things to note here: the html parameter of this callback:
$this.html(function (index, html) {
return html.replace(oldText, novotxt + Link);
});
should be functionally equivalent to what you're trying to use oldText for. However, the element's contents are also cleared out before this callback is run, and whatever you return from it will be the entire contents of the element, so there's no need to try to replace the oldText in this way. Just return your new content:
$this.html(function (index, html) {
return novotxt + Link;
});
If you do find youself in a situation where the variables from the loop need to be available within the callback, you can create a closure as follows:
$('.clista li').each(function () {
var $this = $(this);
cidade = $(this).data('val');
oldText = $(this).html();
(function getData(_oldText, _cidade) {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + _cidade + "&units=metric", function(data) {
var cdados = ('T:' + data.main.temp + 'ºC H:' + data.main.humidity + '%');
novotxt = _cidade + " [" + cdados + "] ";
alert(novotxt);
$this.html(function(index, html) {
return html.replace(_oldText, novotxt + Link);
});
});
})(oldText, cidade);
});

Jquery click only works with double click

I am so close to getting this. Here's my code that is returning the correct url, but only when button is double-clicked. I only need one click to retrieve the image.
var origin = 'COMP';
var area = 'US';
var type = 'typeA';
var level = 'Xnay';
var time = '0';
var btn1 = document.getElementById("redbutton").winControl;
function change_area(new_area) {
area = new_area;
}
function change_type(new_type) {
type = new_type;
}
$(btn1).click(function () {
var src = "http://somesite.net/folder/WEB_" + origin + "_" + area + "_" + level + "_" + type + "_" + time + "HR.png";
change_area('GB');
change_type('typeB')
$('#mainmap').attr('src', src), false;
});

You try by adding
$(document).ready(function() { }); block
before the following line
$(btn1).click(function () {
Finally as,
$(document).ready(function() {
$(btn1).click(function () {
var src = "http://somesite.net/folder/WEB_" + origin + "_" + area + "_" + level + "_" + type + "_" + time + "HR.png";
change_area('GB');
change_type('typeB')
$('#mainmap').attr('src', src), false;
});
});

jQuery adding pages

I have made an really ugly code, but i was going to fix it when i was done with it.. But i didn't come that far >_<
i post my code here and some information under it.
$(document).on('click', '.cogwheel', function() {
var link = $(this).data('pageid');
$(".pages").not(".page" + link).hide();
$(".links").not("#link-" + link).show();
$("#link-" + link).toggle();
$(".page" + link).toggle();
});
$(document).on('click', '.deletecross', function() {
$(".deleteClass" + $(this).data('pageid')).remove();
var total = parseFloat($(".hiddenCounter").val()) - 1;
$(".hiddenCounter").val(total);
var this_val = $(".pagae" + $(this).data('pageid')).val();
this_val.replace($(".pagae" + $(this).data('pageid')).val(), "");
$(".pagae" + total).val(this_val);
});
$(document).on('keyup', '.pages', function() {
var pageID = $(this).data('pageid');
var pages = $(".pagae").val();
$(".pagae" + pageID).val($(this).val());
$(".pagetest" + pageID).html($(this).val());
$(".pagae").val(pages + $(this).val());
$("#link-" + pageID).html($(this).val());
});
message = new Array();
jQuery.fn.update_textarea = function(test) {
//for (i=0;i<test;++i) {
if (message[test]) { $(".MenuLinks").append('<tr><td width="150">Sida ' + test + '</td><td align="right"><span class="glyphicon glyphicon-cog"></span></td></tr>');$("#articles_textarea").append('<h2>askda</h2><textarea id="editor-1"></textarea>'); }
else {
message[test] = '';
var TDRow1 = '<tr class="deleteClass' + test + '"><td width="150">Sida ' + test + '<input type="text" name="pages[]" value="Sida ' + test + '" class="pages page' + test + '" data-pageid="' + test + '"></td>';
var TDRow2 = '<td align="right" width="20"><span class="glyphicon glyphicon-cog cogwheel" data-pageid="' + test + '" style="cursor:pointer;" title="Redigera"></span></td></tr>';
var TDRowRemove = '<td align="right" width="10"><span class="glyphicon glyphicon-remove deletecross" data-pageid="' + test + '" style="cursor:pointer;color: #ff0000;" title="Radera"></span></td>';
var TDFake = '<td></td>';
if (test != 1) {
var TRRow = TDRow1 + TDRowRemove + TDRow2;
}
else {
var TRRow = TDRow1 + TDFake + TDRow2;
}
$(".MenuLinks").append(TRRow); $("#articles_textarea").append('<div id="Sida' + test + '" class="tab-pane"><input type="hidden" class="pagae' + test + '" name="pagae[]" value="Sida ' + test + '"> <h2 class="pagetest' + test + '">Sida ' + test + '</h2><textarea name="editor[]" id="editor-' + test + '" class="editor" data-pageid="' + test + '"></textarea></div>');
$("#editor-" + test).wysibb({lang: "en"});
}
//}
}
/* If no textareas available add a new one */
if (message.length == 0) {
$(this).update_textarea(1);
$("#Sida1").addClass("active");
}
});
This code you can add a page with, delete a page and write a new name for the page, and im using bootstrap so they all got there own "tab"
I was going to use this script to make an article system, and when you post it should insert pages into an own table like pages. And content to another.
But my problem here is, when im trying to remove a "link/page" it removes the page from the menu and everything.
But i dont have a freaking clue how to change the hidden input that has all the names of the pages in it.. So when i post the hidden input i got all pages i have on the page and those i removed..
I know this is some slabby code and i know you could make it better then me..
If you got any ideas or any thing that i can make smaller let me know..

Select dropdown style function jquery

I've got a function that styles select inputs by generating a div with an anchor, list and a hidden field:
function selectMenu() {
var selectMenu = $("#cf-budget");
$('<input id="' + selectMenu.attr("id") + '-hidden" type="hidden" name="' + selectMenu.attr("name") + '" value="" />').insertAfter(selectMenu);
selectMenu.hide();
var selectTitle = selectMenu.children("option:eq(0)").text();
var newSelectMenu = '<div class="selectmenu"><div class="selectmenu-selected"><a rel="placeholder">'+ selectTitle +'</a></div><ul class="selectmenu-menu"><li><a rel="placeholder">'+ selectTitle +'</a></li>';
selectMenu.find("option:not(:eq(0))").each(function () {
newSelectMenu += '<li><a rel="' + $(this).val() + '">' + $(this).text() + "</a></li>";
});
newSelectMenu += "</ul></div>";
$(newSelectMenu).insertAfter(selectMenu);
var newSelectMenu = $("div.selectmenu");
$("div.selectmenu-selected a", newSelectMenu).live("click", function () {
$("ul.selectmenu-menu", newSelectMenu).toggle();
return false;
});
$("body").live("click", function () {
$("ul.selectmenu-menu", newSelectMenu).hide();
});
$("ul.selectmenu-menu a", newSelectMenu).live("click", function () {
var optionValue = $(this).attr("rel");
var optionText = $(this).text();
$("ul.selectmenu-menu", newSelectMenu).hide();
$("div.selectmenu-selected a", newSelectMenu).text(optionText);
$("#" + selectMenu.attr("id") + "-hidden").val(optionValue);
var activeMessageType = $("ul.message-type.active");
if (activeMessageType.length) {
activeMessageType.slideUp(300, function () {
$("#" + optionValue).addClass("active").slideDown(300);
}).removeClass("active");
} else {
$("#" + optionValue).addClass("active").slideDown(300);
}
return false;
});
}
$(document).ready(function() {
selectMenu();
});
My question is how can I adjust this to make it work for 'x' amount of select inputs? Currently it only takes the Id or class of a single select.
I'm guessing I'd need to pass the function a select id or class name so that it can do it stuff to each dropdown?

I have made a jsFiddle here for this that now is fully working: http://jsfiddle.net/7TaqN/1/
The suggestion by ach was perfect, however there was an issue with the body of your code. The following changes had to be made to make it work:
This line had to be removed as it overrode the 'this' selector:
var selectMenu = $("#cf-budget");
This line had to be modified to select the class with the ID of the element clicked to
prevent all elements from being affected:
$(newSelectMenu).insertAfter(selectMenu);
var newSelectMenu = $("div.selectmenu#"+ selectMenu.attr("id"));
This is the full working code as a jQuery module:
(Note this will only work with jQuery 1.8 as the .live() method you are using is deprecated in 1.9
$.fn.selectMenu = function () {
return this.each(function () {
var selectMenu = $(this);
//Body of your selectMenu() function goes here
//All selectors should be in the context of the selectMenu element
$('<input id="' + selectMenu.attr("id") + '-hidden" type="hidden" name="' + selectMenu.attr("name") + '" value="" />').insertAfter(selectMenu);
selectMenu.hide();
var selectTitle = selectMenu.children("option:eq(0)").text();
var newSelectMenu = '<div id="' + selectMenu.attr("id") + '" class="selectmenu"><div id="' + selectMenu.attr("id") + '" class="selectmenu-selected"><a rel="placeholder">' + selectTitle + '</a></div><ul class="selectmenu-menu"><li><a rel="placeholder">' + selectTitle + '</a></li>';
selectMenu.find("option:not(:eq(0))").each(function () {
newSelectMenu += '<li><a rel="' + $(this).val() + '">' + $(this).text() + "</a></li>";
});
newSelectMenu += "</ul></div>";
$(newSelectMenu).insertAfter(selectMenu);
var newSelectMenu = $("div.selectmenu#"+ selectMenu.attr("id"));
$("div.selectmenu-selected a", newSelectMenu).live("click", function () {
$("ul.selectmenu-menu", newSelectMenu).toggle();
return false;
});
$("body").live("click", function () {
$("ul.selectmenu-menu", newSelectMenu).hide();
});
$("ul.selectmenu-menu a", newSelectMenu).live("click", function () {
var optionValue = $(this).attr("rel");
var optionText = $(this).text();
$("ul.selectmenu-menu", newSelectMenu).hide();
$("div.selectmenu-selected a", newSelectMenu).text(optionText);
$("#" + selectMenu.attr("id") + "-hidden").val(optionValue);
var activeMessageType = $("ul.message-type.active");
if (activeMessageType.length) {
activeMessageType.slideUp(300, function () {
$("#" + optionValue).addClass("active").slideDown(300);
}).removeClass("active");
} else {
$("#" + optionValue).addClass("active").slideDown(300);
}
return false;
});
});
};
$(document).ready(function () {
$('.mySelectClass').selectMenu();
});

You could make it into a jQuery plugin:
$.fn.selectMenu = function() {
return this.each(function() {
var selectMenu = $(this);
//Body of your selectMenu() function goes here
//All selectors should be in the context of the selectMenu element
});
};
Then use it with standard jQuery selectors like so:
$('.mySelectClass').selectMenu();
Edit: Looks like you're already setting the context using the second parameter of jQuery() so additional use of find shouldn't be necessary. That's a lot of code to parse through visually, though -- a jsfiddle might help.
You'll also need to replace some of your selectors so that they're evaluated on the children of the selectMenu element, for example:
selectMenu.find("div.selectmenu-selected a", newSelectMenu).live("click", function () {

Jquery Scope Problems

function drawLabel(labelsIndex) {
// Check not deleted Label data:(DBID, text, styling, x, y, isDeleted)
if (!labelData[labelsIndex][5]) {
// Create
var newLabel = $('<div id="label' + labelsIndex + '" style="font-size:' + (labelData[labelsIndex][6] * currentScale) + 'px;z-index:9999;position:absolute;left:' + labelData[labelsIndex][3] + 'px;top:' + labelData[labelsIndex][4] + 'px;' + labelData[labelsIndex][2] + '">' + labelData[labelsIndex][1] + '</div>');
$('#thePage').append(newLabel);
// Click edit
$('#label' + labelsIndex).dblclick(function() {
if (!isDraggingMedia) {
var labelText = $('#label' + labelsIndex).html();
$('#label' + labelsIndex).html('<input type="text" id="labelTxtBox' + labelsIndex + '" value="' + labelText + '" />');
document.getElementById('#label' + labelsIndex).blur = (function(index) {
return function() {
var labelText = $('#labelTxtBox' + index).val();
$('#label' + index).html(labelText);
};
})(labelsIndex);
}
});
The code is meant to replace a div's text with a textbox, then when focus is lost, the textbox dissapears and the divs html becomes the textbox value.
Uncaught TypeError: Cannot set property 'blur' of null
$.draggable.start.isDraggingMediaresources.js:27
c.event.handlejquery1.4.4.js:63
I think I'm getting a tad confused with the scope, if anyone could give me some points I'd appreciate it. It would also be good if someone could show me how to remove the blur function after it has been executed (unbind?)

document.getElementById('#label' + labelsIndex).blur is a javascript function and less jquery :) therefore the # hash there is just irrelevant.
$('#label'+labelsIndex).bind('blur',function (){
//labelText value goes here //
});
EDIT
to be honest ur over complicating it :)
<div id="txt1">I am div</div>
<textarea id="txt2">I am text</textarea>
$('#edit_button').click(function (){
var val = $('#txt1').hide().html();// hide the div,then get value,
$('#txt2').show().val(val);//show txtarea then put value of div into it
});
Do the opposite for $('#save_button');