I am trying to call weather API, but for some reason I could not see the results both in console and the webpage after entering a specific city
I called
<div id="results"></div>
and made sure to declare it in my script. Can someone help?
Update: When I combine them into one file, the code works. But when I separate them into two different files, it does not work. What am I missing here?
This is the script.js of the code
var cityform = document.getElementById("cityform");
// Check if the cityform variable is not null
if (cityform !== null) {
// Add a submit event listener to the form
cityform.addEventListener("submit", function(event) {
// Prevent the default form submission behavior
event.preventDefault();
// Get a reference to the input element
var cityInput = document.getElementById("thecity");
// Check if the cityInput variable is not null
if (cityInput !== null) {
// Get the input value
var city = cityInput.value;
// Make the API request using the city value
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=imperial&appid=0dcc391bac34298837f2047642794ee3", function(data){
console.log(data);
// Extract the data from the API response
var icon = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var temp = Math.floor(data.main.temp) + "F";
var weather = data.weather[0].main;
// Get a reference to the element where the data will be displayed
var results = document.getElementById("results");
// Update the element with the data from the API
results.innerHTML = "<img src='" + icon + "'> <p>" + weather + "</p> <p>" + temp + "</p>";
});
}
});
}
Then here is the HTML
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width=device=width, intial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="is=edge">
<title>API</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src = "script.js"></script>
</head>
<body>
<!-- HTML -->
<h1>Weather Report</h1>
<form id="cityform">
<label for="thecity">City:</label><br>
<input type="text" name="thecity" id="thecity"><br><br>
<button type="submit">Search</button>
</form>
<!-- Create an element where the data will be displayed -->
<div id="results"></div>
</body>
</html>
What could be the possible issue or if there's no issue, how can you display the result of the icon, temp and weather to the "results"
Paste the script.js linking part at the end.
It might be possible that when your scripts is ran form was not creaded thus those variables were not existing that time.
See both example, this works
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device=width, intial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="is=edge">
<title>API</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<!-- HTML -->
<h1>Weather Report</h1>
<form id="cityform">
<label for="thecity">City:</label>
<br>
<input type="text" name="thecity" id="thecity">
<br>
<br>
<button type="submit">Search</button>
</form>
<!-- Create an element where the data will be displayed -->
<div id="results"></div>
<script>
var cityform = document.getElementById("cityform");
// Check if the cityform variable is not null
if (cityform !== null) {
// Add a submit event listener to the form
cityform.addEventListener("submit", function(event) {
// Prevent the default form submission behavior
event.preventDefault();
// Get a reference to the input element
var cityInput = document.getElementById("thecity");
// Check if the cityInput variable is not null
if (cityInput !== null) {
// Get the input value
var city = cityInput.value;
// Make the API request using the city value
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=imperial&appid=0dcc391bac34298837f2047642794ee3", function(data) {
console.log(data);
// Extract the data from the API response
var icon = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var temp = Math.floor(data.main.temp) + "F";
var weather = data.weather[0].main;
// Get a reference to the element where the data will be displayed
var results = document.getElementById("results");
// Update the element with the data from the API
results.innerHTML = "<img src='" + icon + "'> <p>" + weather + "</p> <p>" + temp + "</p>";
});
}
});
}
</script>
</body>
</html>
But not this
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device=width, intial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="is=edge">
<title>API</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
var cityform = document.getElementById("cityform");
// Check if the cityform variable is not null
if (cityform !== null) {
// Add a submit event listener to the form
cityform.addEventListener("submit", function(event) {
// Prevent the default form submission behavior
event.preventDefault();
// Get a reference to the input element
var cityInput = document.getElementById("thecity");
// Check if the cityInput variable is not null
if (cityInput !== null) {
// Get the input value
var city = cityInput.value;
// Make the API request using the city value
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=imperial&appid=0dcc391bac34298837f2047642794ee3", function(data) {
console.log(data);
// Extract the data from the API response
var icon = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var temp = Math.floor(data.main.temp) + "F";
var weather = data.weather[0].main;
// Get a reference to the element where the data will be displayed
var results = document.getElementById("results");
// Update the element with the data from the API
results.innerHTML = "<img src='" + icon + "'> <p>" + weather + "</p> <p>" + temp + "</p>";
});
}
});
}
</script>
</head>
<body>
<!-- HTML -->
<h1>Weather Report</h1>
<form id="cityform">
<label for="thecity">City:</label>
<br>
<input type="text" name="thecity" id="thecity">
<br>
<br>
<button type="submit">Search</button>
</form>
<!-- Create an element where the data will be displayed -->
<div id="results"></div>
</body>
</html>
If you want to check yourself then just after
var cityform = document.getElementById("cityform");
add alert(cityform)
When script linking is in head before body then we will get null in alert
But when the script is at end near closing body tag then alert will have the form element.
Hope it helps.
Comment if I am wrong somewhere.
You need to move script from head location inside of body in HTML
This code works
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device=width, intial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="is=edge">
<title>API</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<!-- HTML -->
<h1>Weather Report</h1>
<form id="cityform">
<label for="thecity">City:</label><br>
<input type="text" name="thecity" id="thecity"><br><br>
<button type="submit">Search</button>
</form>
<!-- Create an element where the data will be displayed -->
<div id="results"></div>
<script src="script.js"></script>
</body>
</html>
function resultSubmit(event) {
event.preventDefault();
// Get the input value
var city = cityInput.value;
// Make the API request using the city value
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=imperial&appid=0dcc391bac34298837f2047642794ee3", function (data) {
console.log(data);
// Extract the data from the API response
var icon = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var temp = Math.floor(data.main.temp) + "F";
var weather = data.weather[0].main;
// Update the element with the data from the API
results.innerHTML = "<img src='" + icon + "'> <p>" + weather + "</p> <p>" + temp + "</p>";
});
}
const cityform = document.getElementById("cityform");
const cityInput = document.getElementById("thecity");
const results = document.getElementById('results')
cityform.addEventListener('submit', resultSubmit)
Result - I ran GO Live extension it in VS code
html tag and code relationship
Related
Here I am practicing using jQuery with my html. I have a form that is asking questions about your car. The problem is everything works but after it does the form reset it deletes everything that was just added.
I debugged the program and it is doing exactly what I want but once it stops executing "writeHtml" everything it just did gets cleared.
<!DOCTYPE HTML>
<html>
<head>
<title> Sabio Practice </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function writeHtml(){
var model = $("#Model").val();
var make = $("#Make").val();
var year = $("#Year").val();
var vin = $("#VIN").val();
$("#pp").html("<ul>")
$("#pp").html("<li>Make: " + make + "</li>" +
"<br/><li>Model: " + model + "</li>" +
"<br/><li>Year: " + year + "</li>" +
"<br/><li>VIN: " + vin + "</li>");
$("#pp").html("</ul>")
}
console.log("got here");
$("#Register").click(function(){
writeHtml();
$("#myForm")[0].reset();
});
});
</script>
</head>
<body>
<div>
<form id = "myForm" method = "get">
<input id = "Model" placeholder = "Model"><br>
<input id = "Make" placeholder = "Make"><br>
<input id = "Year" type = "number" placeholder = "Year"><br>
<input id = "VIN" placeholder = "VIN"><br>
<button id = "Register" name = "Register"> Register</button>
<button id = "Cancel" name = "Cancel">Cancel</button>
</form>
<p id = "pp">
</p>
</div>
</body>
</html>
I just want the edits made to the DOM to be permanent.
You override with html() your content, better is to use append()
$("#pp").append("<ul>")
$("#pp").append("<li>Make: " + make + "</li>" +
"<br/><li>Model: " + model + "</li>" +
"<br/><li>Year: " + year + "</li>" +
"<br/><li>VIN: " + vin + "</li>");
$("#pp").append("</ul>")
And set the type of your button to button. Otherwise the form is submitted.
<button type="button"></button>
You should also prevent the default behavior, your event subscription should look like this:
$("#Register").click(function(e) {
e.preventDefault();
writeHtml();
$("#myForm")[0].reset();
});
when you don't set the type in a form, it's a submit;
so you should set the button type button;like this:
<button id = "Register" name = "Register" type="button"> Register</button>
So I had two problems. One was I was overwriting my innerhtml again after I overwrote it the first time.
The second problem was I did not specify a type for the button. The default type for button is "submit" since my form was therefore being submitted it was redirecting me to a fresh page of my page.
<!DOCTYPE HTML>
<html>
<head>
<title> Sabio Practice </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function writeHtml(){
var model = $("#Model").val();
var make = $("#Make").val();
var year = $("#Year").val();
var vin = $("#VIN").val();
var htmlText = "<ul>";
htmlText += `<li>Make: ${make}</li>
<br/>
<li>Model: ${model}</li>
<br/>
<li>Year: ${year}</li>
<br/>
<li>VIN: ${vin}</li>`;
htmlText += "</ul>"
$("#pp").append(htmlText);
}
console.log("got here");
$("#Register").click(function(e){
e.preventDefault();
writeHtml();
$("#myForm")[0].reset();
});
});
</script>
</head>
<body>
<div>
<form id = "myForm" >
<input id = "Model" placeholder = "Model"><br>
<input id = "Make" placeholder = "Make"><br>
<input id = "Year" type = "number" placeholder = "Year"><br>
<input id = "VIN" placeholder = "VIN"><br>
<button id = "Register" name = "Register"> Register</button>
<button id = "Cancel" name = "Cancel">Cancel</button>
</form>
<p id = "pp">
</p>
</div>
</body>
</html>
I have a textarea that will contains a code entered by user and I want to get that code and scan it with jQuery to get the value inside a custom tag called setting then add this value to an input so the user will be able to change the value inside setting tag without touching the code. I was able to get the values and add them inside the inputs but I couldn't update the code with the new values.
HTML CODE :
<div id='tab-1'>
<textarea id='template-code' cols='67' rows='27'></textarea>
<button id='submit-code'>Submit Code</button>
</div>
<div id='tab-2' class='unactive'>
<form id='settings-form' method='POST'>
<div id='result'></div>
<button id='update-code'>Update Code</button>
</form>
</div>
CSS CODE :
.unactive {
display: none
}
jQuery CODE :
$('#template-code').change(function (){
var $that = $(this),
template_code = $that.val(),
code = '',
new_data = '',
text = '',
newCode = '';
// Extract settings from the theme and add them to #result
$(document).on('click', '#submit-code', function (){
$('#tab-1').addClass('unactive');
$('#tab-2').removeClass('unactive');
$(template_code).find('setting').each(function (i){
var $this = $(this),
setting_std = $this.text(),
setting_id = $this.attr('id');
code += '<input id="'+setting_id+'" name="'+setting_id+'" type="text" value="'+setting_std+'"><br>';
});
if(code !== ''){
$('#result').html(code);
}
});
// Update old data with the new one
$(document).on('click', '#update-code', function (){
new_data = $( "#settings-form" ).serializeArray();
$.each( new_data, function( i, new_field ) {
var start_key = "id='"+new_field.name+"'>",
end_key = '</setting>',
start = template_code.indexOf(start_key),
end = template_code.indexOf(end_key);
text = template_code.substring(start + start_key.length, end);
// THE PROBLEM IS HERE
// I want the variable template_code to contains the new value not the old one so I used replace but it seems that it doesn't work
template_code.replace(text, new_field.value);
});
$('#template-code').val(template_code);
$('#tab-1').removeClass('unactive');
return false;
});
});
This is an example of the theme code that will be added inside the textarea :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<title><data:blog.pageTitle/></title>
<div id='option-panel' style='display:none!important'>
<setting id='post_thumbnail'>http://lorempixel.com/640/300/</setting>
<setting id='search_icon'>on</setting>
</div>
</head>
<body>
</body>
</html>
To understand my issue please enter to this JsFiddle and copy the code above then put it inside the textarea and click submit code, you will get two inputs the content of those inputs come from these two tags :
<setting id='post_thumbnail'>http://lorempixel.com/640/300/</setting>
<setting id='search_icon'>on</setting>
I want when the user change the value of inputs and click "update code" to change the value of setting tag inside the entire code.
Try this and see if it's what you're looking for:
HTML
<div id='tab-1'>
<textarea id='template' cols='67' rows='27'></textarea>
<button id='submit'>Submit Code</button>
</div>
<div id='tab-2'>
<form id='settings-form' method='POST'>
<div id='result'></div>
<button id='update'>Update Code</button>
</form>
</div>
JavaScript:
function wrap(data) {
var string = '';
var i, l;
string += "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n";
string += "<!DOCTYPE html>\r\n";
string += "<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>\r\n";
string += " <head>\r\n";
string += " <b:include data='blog' name='all-head-content'/>\r\n";
string += " <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>\r\n";
string += " <link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>\r\n";
string += " <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>\r\n";
string += " <title><data:blog.pageTitle/></title>\r\n";
string += " </head>\r\n";
string += " <body>\r\n";
string += " <div id='option-panel' style='display:none!important'>\r\n";
for (i = 0, l = data.length; i < l; i++)
string += " " + data[i].toString() + "\r\n";
string += " </div>\r\n";
string += " </body>\r\n";
string += "</html>\r\n";
return string;
}
$("#submit").on('click', function() {
var virtual = document.createElement("div");
var temp = '';
virtual.innerHTML = $("#template").val();
$(virtual).find('setting').each(function(i) {
var $this = $(this),
setting_std = $this.text(),
setting_id = $this.attr('id');
temp += '<input id="' + setting_id + '" name="' + setting_id + '" type="text" value="' + setting_std + '"><br>';
});
if (temp !== '')
$('#result').html(temp);
});
$("#update").on('click', function(event) {
var temp = [];
event.preventDefault();
$("#result").find("input").each(function() {
temp.push("<setting id=\"" + this.id.toString() + "\">" + this.value.toString() + "</setting>");
});
$("#template").val(wrap(temp));
});
I believe that does what you're looking for? Even though you're using jQuery, I think you ended up making it a lot harder than it had to be. I used a virtual node to quickly/easily find and pull ONLY the setting tag from the textarea on submit (down and dirty, I suppose?).
I removed the styles and whatnot since it was interfering with rapid testing, and you'll need to apply proper sanity checking/validation against user input.
Edit: Updated answer to include a ghetto wrapping function to elucidate the concept. I would not recommend using it as is, but instead utilizing a real template, which would require work outside the scope of this question.
Most recent JSFiddle after editing: http://jsfiddle.net/zo3hh2ye/6/
Here's another version of the code. I saved the new values in an array and then replaced them with the existing values in the textarea text. Give a try and see if that solves your problem.
Script :
<script type="text/javascript">
$('#template-code').change(function () {
var $that = $(this),
template_code = $that.val(),
code = '',
new_data = '',
text = '',
newCode = '';
// Extract settings from the theme and add them to #result
$('#submit-code').click(function () {
$('#tab-1').addClass('unactive');
$('#tab-2').removeClass('unactive');
$(template_code).find('setting').each(function (i) {
var $this = $(this),
setting_std = $this.text(),
setting_id = $this.attr('id');
code += '<input id="' + setting_id + '" name="' + setting_id + '" type="text" value="' + setting_std + '"><br>';
});
if (code !== '') {
$('#result').html(code);
}
});
// Update old data with the new one
$('#update-code').click(function () {
new_data = $("#settings-form").serializeArray();
$(template_code).find('setting').each(function (i) {
template_code = template_code.replace("<setting", "").replace("id='" + $(this).attr("id") + "'>", "").replace($(this).html(), "{" + i + "}").replace("</setting>", "");
});
$.each(new_data, function (i, new_field) {
template_code = template_code.replace("{" + i + "}", "<setting id='" + new_field.name + "'>" + new_field.value + "</setting>");
});
$('#template-code').val(template_code);
$('#tab-1').removeClass('unactive');
return false;
});
});
</script>
HTML Template :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<title><data:blog.pageTitle/></title>
<div id='option-panel' style='display:none!important'>
<setting id='post_thumbnail'>text1</setting>
<setting id='search_icon'>text2</setting>
</div>
</head>
<body>
</body>
</html>
I couldn't replace the text 'on' in the template you provided, not sure if it has something to do with some reserved key word but everything else works fine.
For some reason images wont display when i pull them from Flickr, here's the code i have so far. As you can see I have one of the URLs commented out, the one commented out actually works and displays the images but the URL before it (the one I actually need) won't work.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/li`enter code here`bs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=bde2ddde05dd5e7abbc7a44b9abc12ef&tags=gtav%2C+grand+theft+auto%2C++rockstar&bbox=-122.65057757118905%2C37.71174524790033%2C-122.2214241288068%2C37.81705186562751+&has_geo=&format=json&nojsoncallback=?", displayImages1); <!--("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=bde2ddde05dd5e7abbc7a44b9abc12ef&tags=gtav&format=json&jsoncallback=?", displayImages1); -->
function displayImages1(data) {
$.each(data.photos.photo, function (i, item) {
var photoID = item.id;
lat = item.latitude;
long = item.longitude;
$('#images1').append(photoID);
var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
htmlString = '<img src="' + photoURL + '">';
$('#images1').append(htmlString);
$('#images1').append("<br/><hr/><br/>");
});
}
});
</script>
</head>
<body>
<div id="images1"> </div>
<p> </p>
</body>
</html>
Your link is not correct. The correct link is below. It ends with jsoncallback.
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=bde2ddde05dd5e7abbc7a44b9abc12ef&tags=gtav%2C+grand+theft+auto%2C++rockstar&bbox=-122.65057757118905%2C37.71174524790033%2C-122.2214241288068%2C37.81705186562751+&format=json&jsoncallback=?
I've put together a little app using Kendo UI that stores user inputs in a Javascript array, and then prints these items out by adding text to a div. Along with the text, I need to have a delete button to remove these items from the array.
Since I'm adding the delete buttons to the DOM after I initialize Kendo UI, I assume I need to use the .kendoMobileButton() method on each button I add. If I don't do this, my buttons aren't styled correctly, despite being given the attribute data-role="button".
Still, when I try to use these buttons, I can't get them to call a function with data-click="deleteNumber". The function simply doesn't seem to fire. Any hints?
Here is a quick example I threw together that illustrates my problem: http://crocdoc.ifas.ufl.edu/files/kendo_example/
It is pasted here for easy reference:
<!DOCTYPE HTML>
<html>
<head>
<title>Example code</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.mobile.min.js"></script>
</head>
<body>
<div data-role="view" id="main">
<div data-role="header">
<div data-role="navbar">Generate numbers</div>
</div>
<a data-role="button" data-click="addNumber" style="display: block; margin: 10px; text-align: center;">Add number</a>
<div id="number_list" style="padding: 0 20px 0 20px;"></div>
</div>
<script>
var app = new kendo.mobile.Application();
var number_container = [];
var addNumber = function () {
var current_number = Math.floor(Math.random() * 1000 + 1);
number_container.push(current_number);
console.log(number_container);
var current_index = number_container.length - 1;
$('#number_list').append('Number ' + current_index + ': ' + current_number + ' <a id="delete_' + current_index + '" data-role="button" data-click="deleteNumber">Delete</a><br >');
$('#delete_'+current_index).kendoMobileButton();
};
var deleteNumber = function (e) {
console.log('Delete button hit');
var button_id = e.button.context.id;
button_id = button_id.replace('delete_', '');
button_id = parseFloat(button_id);
number_container.splice(button_id, 1);
$('#number_list').empty();
for (var i = 0; i < number_container.length; i++) {
$('#number_list').append('Number '+i+': '+number_container[i]+' <a id="delete_' + i + '" data-role="button" data-click="deleteNumber">Delete</a><br >');
}
};
</script>
</body>
</html>
You need to modify your code as following ,
$('#number_list').append('Number ' + current_index + ': ' + current_number + ' <a id="delete_' + current_index + '">Delete</a><br/>');
$('#delete_'+current_index).kendoMobileButton({click: deleteNumber});
Thanks
DJ
#debug_mode
This is driving me freaking BATTY as hell.
This is essentially what I am trying to accomplish.
You'll see the Json there are a 2 different departments "Office" and "Stockroom"
What I am trying to accomplish is to arrange everyone by the department they are in. The problem with this is that the HTML needs to look something like this
<h3>Section 1</h3>
<div>
<p>
First Paragraph
</p>
<p>
Second Paragraph
</p>
<p>
Third Paragraph
</p>
</div>
But unfortunately I cannot seem to get the </div> tag in the right spot at the end of the last paragraph of each section
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var contacts = [{"displayname":"Bruce Lee","email":"Bruce.lee#karate.com","department":"stockroom"},
{"displayname":"Your Momma","email":"Your.Momma#Yourmom.com ","department":"stockroom"},
{"displayname":"Bob","email":"Bob#bob.com ","department":"Office"},
{"displayname":"Cathy","email":"Cathy#Cathy.com ","department":"Office"},
{"displayname":"mike","email":"mike#Cathy.com ","department":"Office"},
{"displayname":"scott","email":"scott#Cathy.com ","department":"Office"}
];
var contacts2 = contacts;
var r = 1;
var lastvalue = 'blah';
for(var i=0; i <=contacts.length; i++)
{
if(contacts[i].department != null)
{
if(lastvalue != contacts[i].department)
{
if(i<1)
{
$('#accordion').append('</div><h3>' + contacts[i].department + '</h3>');
$('#accordion').append('<div><p>' + contacts[i].displayname + '</p>');
}else{
$('#accordion').append('<h3>' + contacts[i].department + '</h3>');
$('#accordion').append('<div><p>' + contacts[i].displayname + '</p>');
}
}else{
$('#accordion').append('<p>' + contacts[i].displayname + '</p>');
}
lastvalue = contacts[i].department;
r++;
}
}
});
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div id="contactlist">
<div id="accordion">
</div>
</div>
</body>
</html>
You might want to change this to a jquery each loop and work with json objects directly inside it. The reason you were getting an accordion level each time was due to your loop inserting a h3 every time. I've supplied code to get you pretty much what you need.
edit:
Here is a link to my forked jsfiddle => http://jsfiddle.net/TTV6d/12/
Hope this helps
var departmentlist=new Array();
$.each(contacts, function(i,contact) {
//insert the departments
if (contact.department != null && $('#' + contact.department).length == 0) {
$('#accordion').append('<h3 id='+ contact.department +'>' + contact.department + '</h3>');
departmentlist.push(contact.department);
}
//insert contacts in the accordion
$('#' + contact.department).after('<p>' + contact.displayname + '</p>');
});
$.each(departmentlist, function(i,list) {
$("#" + list).nextUntil("h3").wrapAll("<div></div>");
});
First, be aware that browsers will generally attempt to normalize markup appended to the document: (http://jsfiddle.net/EVjaq/)
$('#container').append('<div><p>Testing</p>'); // no `</div>`
console.log($('#container').html()); // `<div><p>Testing</p></div>`
So, the open <div> in this line will be closed at the end for you, before the next <p> is appended:
$('#accordion').append('<div><p>' + contacts[i].displayname + '</p>');
To avoid this, you can store all of the HTML in a variable, concatenating segments together, and append it to the DOM only once it's done. Or, you can store the <div> and append to that, which can make the conditionals a bit simpler:
var lastvalue = null,
lastdiv = null;
for (var i = 0; i <= contacts.length - 1; i++) {
if (contacts[i].department != null) {
if (lastvalue != contacts[i].department) {
$('#accordion').append('<h3>' + contacts[i].department + '</h3>');
// remember `<div>`
lastdiv = $('<div>').appendTo('#accordion');
}
// append to the `<div>` directly rather than `#accordion`
// also, skip the `else` so you don't have to type this twice
lastdiv.append('<p>' + contacts[i].displayname + '</p>');
lastvalue = contacts[i].department;
r++;
}
}