I have a list that is created by a javascript function. I have a separate function to reset the page, but it will not clear the list that was created. Any thoughts?
Javascript call to create the list:
$(function submit() {
$('form').submit(function (e) {
e.preventDefault();
$("#searchResults").show();
$.ajax({
url: 'Home/TAPost',
data: $('form').serialize(),
dataType: "json",
type: 'POST',
success: function (accts) {
$("#rowHeaders").append('<tr><td>' + "Customer Name" + '</td><td>' + " Customer SSN" + '</td><td>' + " FHBOAT Account Number" + '</td><td>' +
" Original Account Number" + '</td><td>' + " Product Type" + '</td><tr>');
$.each(accts, function (index, acct) {
$("#resultsTable").append('<tr><td>' + acct.CustomerName + '</td><td>' + " " + acct.SSN + '</td><td>' + " " + acct.FHAcctNumber + '</td><td>'
+ " " + acct.OriginalAcctNumber + '</td><td>' + " " + acct.ProductType + '</td></tr>');
});
}
});
return false;
});
});
Call to reset:
function resetForm() {
document.getElementById("LOB").style.borderColor = "";
document.getElementById("LOB").style.borderColor = "";
$('#resultsTable').empty();
return false;
};
HTML:
<section id="searchResults">
<h2>Search Results</h2>
<table id="resultsTable" cellpadding="2" cellspacing="50">
<thead id="rowHeaders"></thead>
</table>
</section>
Instead of:
$('#resultsTable').empty();
You can use:
$('#resultsTable').html('');
Related
I want to append some values from jQuery in my HTML table
$(document).ready(function() {
console.log("ready!");
// on form submission ...
$('form').on('submit', function() {
console.log("the form has beeen submitted");
// grab values
valueOne = $('input[name="perfid"]').val();
console.log(valueOne)
$.ajax({
type: "POST",
url: "/",
datatype:'json',
data : { 'first': valueOne},
success: function(result) {
console.log(result.result[0].userid);
$('#result').html("<table class="table table-bordered responsive"><tr><td>" + result.result[0].hosts[0].filer + "</td><td>" + result.result[0].hosts[0].hostname + "</td><td>" + result.result[0].hosts[0].model + "</td></tr></table>");
},
error: function(error) {
console.log(error)
}
});
});
});
I am getting error as :
SyntaxError: missing ) after argument list for the line :
$('#result').html("<table class="table table-bordered responsive"><tr><td>" + result.result[0].hosts[0].filer + "</td><td>" + result.result[0].hosts[0].hostname + "</td><td>" + result.result[0].hosts[0].model + "</td></tr></table>");
Can someone point out what is going wrong?
TIA
its all about quotes
$('#result').html('<table class="table table-bordered responsive"><tr><td>' + result.result[0].hosts[0].filer + '</td><td>' + result.result[0].hosts[0].hostname + '</td><td>' + result.result[0].hosts[0].model + '</td></tr></table>');
take a look at How to concatenate variable in string in javascript
Please try below code
var table = $('<table/>').addClass('table table-bordered responsive');
var rows='<tr><td>' + result.result[0].hosts[0].filer + '</td><td>' + result.result[0].hosts[0].hostname + '</td><td>' + result.result[0].hosts[0].model + '</td></tr>';
$(table).append(rows);
$('#result').append(table);
I have 2 dropdownlist that will fire an event if both of them are changed.
(meaning, any changes on the indices will fire a json request that is based on the dropdownlist's current value and append them to my table).
My question is that,as soon as the page loaded, are there any ways to pre-select their indices and fire the event at the same time? I am planning to set them based on the current term and school year.
Here is my jquery code:
$schoolyear = $('select#schoolyear');
$schoolterm = $('select#schoolterm')
$tbl = $('#classview');
$schoolyear.change(function () {
getCL();
});
$schoolterm.change(function () {
getCL();
});
function getCL() {
$.getJSON('#Url.Action("getClassList","Enrollment")', { term: $schoolterm.val(), year: $schoolyear.val() }, function (e) {
$tbl.find('tbody').remove();
if (e.length > 0) {
$(e).each(function (index, e) {
$tbl.append('<tr><td>' + e.subj + '</td><td>' + e.days + '</td><td>' + e.cstart + '</td><td>' + e.cend + '</td><td>' + e.professor + '</td><td>' + e.units + '</td><td>' + e.status +
'</td>' + '<td>' + '<form action="/Enrollment/dropClass" method="post">' + '<input type="hidden" name="test" value="'+e.id+'"/>' +
' Delete ' + '</form></td></tr>')
});
}
else {
$tbl.append('<tr><td colspan="8">No match found</td></tr>');
}
//compute t
});
}
Can trigger the change on one of them while setting value
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var term = Math.ceil(month/4);// needs verification on how term is set
$schoolyear
.change(getCL)
.val(year);//set year value
$schoolterm
.change(getCL)
// trigger change after setting value, will call getCL()
.val(term).change();
Try just adding getCL() at the bottom of your script.
$schoolyear = $('select#schoolyear');
$schoolterm = $('select#schoolterm')
$tbl = $('#classview');
$schoolyear.change(function () {
getCL();
});
$schoolterm.change(function () {
getCL();
});
function getCL() {
$.getJSON('#Url.Action("getClassList","Enrollment")', { term: $schoolterm.val(), year: $schoolyear.val() }, function (e) {
$tbl.find('tbody').remove();
if (e.length > 0) {
$(e).each(function (index, e) {
$tbl.append('<tr><td>' + e.subj + '</td><td>' + e.days + '</td><td>' + e.cstart + '</td><td>' + e.cend + '</td><td>' + e.professor + '</td><td>' + e.units + '</td><td>' + e.status +
'</td>' + '<td>' + '<form action="/Enrollment/dropClass" method="post">' + '<input type="hidden" name="test" value="'+e.id+'"/>' +
' Delete ' + '</form></td></tr>')
});
}
else {
$tbl.append('<tr><td colspan="8">No match found</td></tr>');
}
//compute t
});
}
getCL(); //this will run once when page is loaded.
To answer your other question, you can set a default pre-selected option in the dropdown by adding selected to your dropdown. For example:
<select>
<option value="2012">2012</option>
<option value="2013" selected>2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
I'm new to JavaScript.
I only have three entries in my database but when I run the code listed below I get six results. One entry shows up 3x while the other two entries show up 2x. What might I be doing wrong?
var tidyAppts='';
query.find({
success: function(results) {
// Do something with the returned Parse.Object values
for (var i = 0; i < results.length; i++) {
var object = results[i];
//alert(object.id + ' - ' + object.get('ZipCode'));
tidyAppts+='<tr><td>'
+ object.get('Name') + '<td><td>'
+ object.get('Phone') + '<td><td>'
+ object.get('Address') + '<td><td>'
+ object.get('ZipCode') + '<td><td>'
+ object.get('Frequency') + '<td><td>'
+ object.get('TIDY') + '</td><td>'
+ object.get('FirstTIDYDay') + '</td><td>'
+ object.get('TIDYTime') + '</td><td>'
+ object.get('SecondTIDYDay') + '</td><td>'
+ object.get('SecondTIDYApptTime') + '</td><td>'
+ object.get('ThirdTIDYDay') + '</td><td>'
+ object.get('ThirdTIDYApptTime') + '</td></tr>';
(function($) {
$('#tidy-appt-table').append(tidyAppts);
})(jQuery);
}
},
When I used this code, only the first 4 objects for each entry is displayed in the table but I get the correct amount of records which is 3.
(function($) {
$('#tidy-appt-table').append('<tr><td>'
+ object.get('Name')
+ '</td><td>'
+ object.get('Phone')
+ '</td><td>'
+ object.get('Address')
+ '</td></td>'
+ object.get('ZipCode')
+ '</td></td>'
+ object.get('Frequency')
+ '</td></td>'
+ object.get('TIDY')
+ '</td><td>'
+ object.get('FirstTIDYDay')
+ '</td><td>'
+ object.get('TIDYTime')
+ '</td><td>'
+ object.get('SecondTIDYDay')
+ '</td></td>')
+ object.get('SecondTIDYApptTime')
+ '</td></td>'
+ object.get('ThirdTIDYDay')
+ '</td></td>'
+ object.get('ThirdTIDYApptTime')
+ '</td></tr>';
})(jQuery);
}
i figured it out I removed the plus sign from tidyAppts+='' and made it tidyAppts=
Does anybody have any idea why this is not allowing the form to submit? I'm attempting to use Rotten Tomatoes API with a user search function.
FORM IN PHP PAGE
<form name="myform" action="" method="GET"><h3>Search for a movie here:</h3><br>
<input type="text" id="inputbox" value="">
<input type="submit" name="submit" value="Go!">
JAVASCRIPT
$('form[name="myform"]').submit(function() {
$('#films table').empty(); //removes previous search results before adding the new ones.
var apikey = "frceg2d5djxezaedgm3qq94h";
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
var query = form.inputbox.value; //uses the value from the input box as the query search
// sends the query
$.ajax({
url: moviesSearchUrl + '&q=' + encodeURI(query),
dataType: "jsonp",
success: searchCallback // if successful, run searchCallback function
});
// receives the results
function searchCallback(data) {
$('#films table').append('Found ' + data.total + ' results for ' + query);
var movies = data.movies;
$.each(movies, function(index, movie) {
$('#films table').append('<tr><td width="70" rowspan="2"><a href="' + movie.links.alternate +
'" title="Click here to view film information for ' + movie.title + '."><img class="ajaximage" src="'
+ movie.posters.thumbnail + '" /></a></td><td class="ajaxfilmlisttitle"><h3><a href="' + movie.links.alternate +
'" title="Click here to view film information for ' + movie.title + '.">' + movie.title + '</a></h3>Release year: '
+ movie.year + '</td></tr><tr><td class="ajaxfilmlistinfo">Audience Score: ' + movie.ratings.audience_score +
'%<br>' + 'Cinema Release Date: ' + movie.release_dates.theater +
'<br>Runtime: ' + movie.runtime + ' minutes</td></tr>');
});
};
});
I tested with this code and it works:
<form name="myform" action="" method="GET">
<h3>Search for a movie here:</h3>
<input type="text" id="inputbox" value="" />
<input type="submit" name="submit" value="Go!" />
</form>
<script>
$(function(){
$('form[name="myform"]').on('submit', function(e) {
e.preventDefault();
$('#films table').empty(); //removes previous search results before adding the new ones.
var apikey = "frceg2d5djxezaedgm3qq94h";
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
var query = $('#inputbox').val(); //uses the value from the input box as the query search
// sends the query
$.ajax({
url: moviesSearchUrl + '&q=' + encodeURI(query),
dataType: "jsonp",
success: searchCallback // if successful, run searchCallback function
});
// receives the results
function searchCallback(data) {
$('#films table').append('Found ' + data.total + ' results for ' + query);
var movies = data.movies;
$.each(movies, function(index, movie) {
$('#films table').append('<tr><td width="70" rowspan="2"><a href="' + movie.links.alternate +
'" title="Click here to view film information for ' + movie.title + '."><img class="ajaximage" src="'
+ movie.posters.thumbnail + '" /></a></td><td class="ajaxfilmlisttitle"><h3><a href="' + movie.links.alternate +
'" title="Click here to view film information for ' + movie.title + '.">' + movie.title + '</a></h3>Release year: '
+ movie.year + '</td></tr><tr><td class="ajaxfilmlistinfo">Audience Score: ' + movie.ratings.audience_score +
'%<br>' + 'Cinema Release Date: ' + movie.release_dates.theater +
'<br>Runtime: ' + movie.runtime + ' minutes</td></tr>');
});
};
});
});
</script>
There were a couple of problems:
The form.inputbox.value did not work, change it to $('#inputbox').val()
Add e.preventDefault() to prevent the from from being submitted
There was a missing });
Change $('form[name="myform"]').submit(function() { to $('form[name="myform"]').on('submit', function(e) {
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
UPDATED CODE
CURRENT ERROR: Uncaught TypeError: Cannot read property 'id_cursa' of undefined
I really don't know which may be the problem ???
function locurilibere(data, callback) {
var URL = Path + 'rezervaribilete/locurilibere/' + data;
$.get(URL, function(obj) {
if (obj.raspuns === "nu") {
callback(true);
} else {
callback(false);
}
}, 'json');
}
function populateCurseDus(de_la, pana_la, data_plecarii) {
var data = de_la + "-" + pana_la + "-" + data_plecarii;
$.get(Path + 'rezervaribilete/listCurseDus/' + data, function(o) {
for (var i = 0; i < o.length; i++) {
var id_cursa = o[i].id_cursa;
var datalocuri = id_cursa + "-" + data_plecarii;
locurilibere(datalocuri, function(result){
if (result) {
$('#cursedus tbody').append('<tr style="background:red;"><td><input type="radio" name="id_cursadus" value="' + o[i].id_cursa + '" disabled></td><td>' + o[i].cod_cursa + '</td><td>' + o[i].de_la + '</td><td>' + o[i].pana_la + '</td><td>' + o[i].ora_plecare + '</td><td>' + o[i].ora_sosire + '</td><td>' + o[i].id_transportator + '</td><td>' + o[i].id_traseu + '</td></tr>');
} else {
$('#cursedus tbody').append('<tr><td><input type="radio" name="id_cursadus" value="' + o[i].id_cursa + '"></td><td>' + o[i].cod_cursa + '</td><td>' + o[i].de_la + '</td><td>' + o[i].pana_la + '</td><td>' + o[i].ora_plecare + '</td><td>' + o[i].ora_sosire + '</td><td>' + o[i].id_transportator + '</td><td>' + o[i].id_traseu + '</td></tr>');
}
});
}
}, 'json');
}
It will not work as expected because of asynchronous nature of ajax request, you a callback to fix it
function freeseats(data, callback) {
var URL = Path + 'bookings/freeseats/' + data;
$.get(URL, function(obj) {
if (obj.raspuns === "nu") {
// alert("no");
callback(true);
} else {
// alert("yes");
callback(false);
}
}, 'json');
}
// ********************************* second
// **************************************
function populateDepartures(from, to, departure) {
var data = from + "-" + to + "-" + departure;
$.get(Path + 'booking/listDepartures/' + data, function(o) {
$.each(o, function(index, item) {
var id_flight = item.id_flight;
var dataseats = id_flight + "-" + departureDate;
freeseats(dataseats, function(result) {
if (result) {
alert("no more seats");
$('#cursedus tbody')
.append('<tr style="background:red;"><td><input type="radio" name="id_cursadus" value="'
+ item.id_cursa
+ '" disabled></td><td>'
+ item.cod_cursa
+ '</td><td>'
+ item.de_la
+ '</td><td>'
+ item.pana_la
+ '</td><td>'
+ item.ora_plecare
+ '</td><td>'
+ item.ora_sosire
+ '</td><td>'
+ item.id_transportator
+ '</td><td>'
+ item.id_traseu + '</td></tr>');
} else {
alert("there are free seats");
$('#cursedus tbody')
.append('<tr><td><input type="radio" name="id_cursadus" value="'
+ item.id_cursa
+ '"></td><td>'
+ item.cod_cursa
+ '</td><td>'
+ item.de_la
+ '</td><td>'
+ item.pana_la
+ '</td><td>'
+ item.ora_plecare
+ '</td><td>'
+ item.ora_sosire
+ '</td><td>'
+ item.id_transportator
+ '</td><td>'
+ item.id_traseu + '</td></tr>');
}
});
});
}, 'json');
}
i think I have deciphered what you need. Please take a look at this jsFiddle Link and see if this serves your question.
Here's the code:
var boolFlag = false;
var firstFunc = function (){
if(boolFlag === false){
boolFlag = true;
return 'yes';
}else{
boolFlag = false;
return 'no';
}
};
var secondFunc = function () {
return firstFunc();
};
$('#myButton').click(function (){
if(secondFunc() == 'yes'){
console.log('hello world, you said: YES');
}else{
console.log('hello universe, you said: NO');
}
});