How do I update a table once I change a year? - javascript

I am building a table dynamically on the page, and I need to be able to update the information, and also provide a link to the updated information.
Currently, if I try wrapping a function around the code that has been run once, I get an error on the inner function that the open parenthesis is unexpected (the function under update table).
The way it works, the initial rows are populated with the results from the buildCal function, to my knowledge, since it is using .innerHTML it should be no issue in replacing that data in the table, by just running that function again. If I could understand why the inner function will not run again in the displayDate function that would help a lot. I considered it may have been because this is all in the success function instead of adding the rebuilding to the complete function, but I didn't know how to call that if I couldn't even add the outer function to the main (success) code block.
$(document).ready(function() {
url = "../_vti_bin/listdata.svc/Events";
var listname = "Events";
var events = [];
$.ajax({
url: url, //THE ENDPOINT
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success:
//want to use this function as a named function to re-call everything
function updateTable(data) {
//this is the main function which builds everything
function(data) {
})
});
<div id="calNavPanel">
<a id="prevYearGo">
<< </a>
<div id="currentYear"></div><a id="nextYearGo"> >></a>
</div>
<table id="calendar">
<tr>
<td id="cal" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal1" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal2" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal3" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal4" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal5" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal6" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal7" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal8" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal9" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal10" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal11" class="calendarDateSectionClass"></td>
</tr>
<tr>
<td id="cal12" class="calendarDateSectionClass"></td>
</tr>
</table>

Related

Show in a div the content of a table that comes in an array after being called from with ajax

From a template I am calling a method in php through ajax and this returns an array that has keys with numerical values and html code; The numeric values are shown to me correctly but the key that has a value with html code shows it to me as empty.
My array
$content_taxes= '<tr>
<td>2</td>
<td>VAT SuperReducted </td>
<td class="text-right">4.00</td>
<td class="text-right">140</td>
<td class="text-right">5.6</td>
</tr>
<tr>
<td>3</td>
<td>VAT Reducted</td>
<td class="text-right">10.00</td>
<td class="text-right">0</td>
<td class="text-right">0</td>
</tr>
<tr>
<td>4</td>
<td>VAT General </td>
<td class="text-right">21.00</td>
<td class="text-right">1360</td>
<td class="text-right">285.6</td>
</tr>';
$content_taxes = [ 'status' => true,
'content_taxes'=> $content_taxes,
'sub_total_invoice' =>($total_invoice - $sub_total_taxes),
'sub_total_taxes' => $sub_total_taxes,
'total_invoice' => $total_invoice,
];
return json_encode($content_taxes);
Now in the template after I have called it I get
$.ajax({
method : "POST",
url: "/invoices/calculate_totals",
data: {
"_token" : '{{ csrf_token() }}',
"parameters" : data_inputs,
},
dataType: "json",
success: function(data) {
if(data.status) {
$("#total_taxes").html(data.content_taxes); //SHOWS it EMPTY
$(".sub-total").html(data.sub_total_invoice); // it shows it correctly
$("#sub_total").val(data.sub_total_invoice); // it shows it correctly
$(".total-taxes").html(data.sub_total_taxes); // it shows it correctly
$("#total_taxes").val(data.sub_total_taxes); // it shows it correctly
$(".total-invoice").html(data.total_invoice); // it shows it correctly
$("#total_invoice").val(data.total_invoice); // it shows it correctly
}
}
});
In the sample console:
{"status":true,
"content_taxes":{},
"sub_total_invoice":"711.40",
"sub_total_taxes":"68.60",
"total_invoice":"780.00"}
Table column content
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Tax description</th>
<th class="text-right">Value%</th>
<th class="text-right">Total</th>
<th class="text-right">VAT</th>
</tr>
</thead>
<tbody id="total_taxes">
**************** You have to show me here. *****************
</tbody>
</table>
What am I doing wrong!!!
Thanks for all greetings.
I expected to show the key that has the value with html code in a div but it prints empty.
Your html content variable is $content_taxes and also your response variable is $content_taxes may be this is the issue just try like this
$content_taxes_html = '';
$content_taxes_html = '<tr>
<td>2</td>
<td>VAT SuperReducted </td>
<td class="text-right">4.00</td>
<td class="text-right">140</td>
<td class="text-right">5.6</td>
</tr>
<tr>
<td>3</td>
<td>VAT Reducted</td>
<td class="text-right">10.00</td>
<td class="text-right">0</td>
<td class="text-right">0</td>
</tr>
<tr>
<td>4</td>
<td>VAT General </td>
<td class="text-right">21.00</td>
<td class="text-right">1360</td>
<td class="text-right">285.6</td>
</tr>';
$content_taxes = [ 'status' => true,
'content_taxes'=> $content_taxes_html,
'sub_total_invoice' =>($total_invoice - $sub_total_taxes),
'sub_total_taxes' => $sub_total_taxes,
'total_invoice' => $total_invoice,
];
return json_encode($content_taxes);
and in your ajax file just console.log(data) to check the response.

Javascript Get Value from Classes

I'm trying to use this for my class homework, I am still learning.
This script is made to check if a site down or not.
What I'm trying to achieve is to use this same script and get statuses for every website on the table without using script all over again all 3 websites.
I added classes but I do not know how to get them to script. I commented on script so it will be easier for you to understand. Any solution for this? Any input would be appreciated.
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td id="website"></td> <!-- This is already working. -->
</tr>
<tr>
<td>Twitter</td>
<td id="website" mywebsite="https://Twitter.com"></td> <!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td>Facebook</td>
<td id="website" mywebsite="https://Facebook.com"> <!-- This is what I'm trying to achive. -->
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
var site = 'https://google.com';
// var site = 'https://google.com';
$.ajax
({
url: site,
dataType: "jsonp",
statusCode: {
200: function (response) {
$('#website').html('yes');
console.log(response);
},
404: function (response) {
$('#website').html('no');
console.log(response);
}
}
});
</script>
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td class="website" data-mywebsite="https://google.com"></td> <!-- This is already working. -->
</tr>
<tr>
<td>Twitter</td>
<td class="website" data-mywebsite="https://twitter.com"></td> <!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td>Facebook</td>
<td class="website" data-mywebsite="https://facebook.com"> </td>
</tr>
</tbody>
</table>
$(document).ready(function(){
$(".website").each(function(){
var site = $(this).attr("data-mywebsite");
var thissr = $(this);
$.ajax
({
url: site,
dataType: "jsonp",
statusCode: {
200: function (response) {
thissr.html('yes');
},
404: function (response) {
thissr.html('no');
}
}
});
});
});
Try this code. Here is a fiddle
You need to use class and loop through each of them to send AJAX request.
As you know Ajax is an asynchronous call to server,
So if you want to execute ajax call in loop and want to update something based on your ajax call, then you must need a context for which you are calling ajax,
Try something like below,
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td class="website" data-mywebsite="https://google.com"></td> <!-- This is already working. -->
</tr>
<tr>
<td>JQuery</td>
<td class="website" data-mywebsite="http://jquery.com/"></td> <!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td>Stackoverflow</td>
<td class="website" data-mywebsite="https://stackoverflow.com/"> <!-- This is what I'm trying to achive. -->
</tr>
</tbody>
</table>
$(document).ready(function(){
$(".website").each(function(){
var site = $(this).attr("data-mywebsite");
var thissr = $(this);
$.ajax
({
url: site,
dataType: "jsonp",
context : thissr,
statusCode: {
200: function (response) {
$(this.context).html('yes');
},
404: function (response) {
$(this.context).html('no');
}
}
});
});
});
https://jsfiddle.net/cdL997a6/1/

Ajax Get HTML Value

I'm trying to use this for my class homework, I am still learning.
This is a simple script that check if a site down or not.
What I'm trying to achieve is to use this same script and get statuses for every website on the table without using script all over again. Any solution for this? Any input would be appreciated.
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td> <!-- This is already working. -->
<td id="website"></td>
</tr>
<tr>
<td>Twitter</td>
<td id="website" mywebsite="https://Twitter.com"></td> <!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td>Facebook</td>
<td></td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
var site = 'https://google.com';
// var site = 'https://google.com';
$.ajax
({
url: site,
dataType: "jsonp",
statusCode: {
200: function (response) {
$('#website').html('yes');
console.log(response);
},
404: function (response) {
$('#website').html('no');
console.log(response);
}
}
});
</script>
Instead of using id="website" because an id is an unique value, use class="website" in your html.
<td class="website"></td>
IN your jQuery the change is simple instead of using # use . is used for references to classes (ie. website), like so:
$(".website").html("yes");
Don't forget to modify all locations. This will execute for all places where class="website" is defined.
Put your url on data attribute and loop to get value from td like this.
$('table > tbody > tr').find('td').each(function() {
var site = $(this).data('url');
$.ajax({
url: site,
dataType: "jsonp",
statusCode: {
200: function(response) {
$('#website').html('yes');
console.log(response);
},
404: function(response) {
$('#website').html('no');
console.log(response);
}
}
});
});
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td data-url='https://google.com'>Google</td>
<!-- This is already working. -->
</tr>
<tr>
<td data-url="https://twitter.com/">Twitter</td>
<!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td data-url="https://www.facebook.com/">Facebook</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

.parents() not work on table

I'm trying show user details in user list using AJAX JQuery, but it does not work as I need.
It works for my first details in the same tr, but doesn't work in the second detail in td in the second row. How should I do it properly?
Here is the code:
My view:
<table class="table">
<thead>
<th>#</th>
<th>name</th>
<th>password</th>
<th></th>
</thead>
<tbody>
#foreach($users as $user)
<tr>
<table class="table">
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->password}}</td>
<td class="extend-user" data-details="0" data-url="{{route("user", ["id" => $user->id])}}">Details</td>
<td id="details">a</td>
</tr>
<tr>
<td colspan="5" id="details">a</td>
</tr>
</table>
</tr>
#endforeach
</tbody>
</table>
and my script:
$(".extend-user").click(function() {
var self = this;
if($(self).data("details")===0)
$.ajax({
method: "POST",
url: $(self).data("url"),
data: {
_token: $("#_token").val()
},
success: function(data) {
$(self).parents().find("#details").append(data["name"]);
//$(self).parent().parent().find("#details").append(data["name"]);
//$(self).closest('table').find("#details").append(data["name"]);;
$(self).data("details", "1");
}
});
if($(self).data("details")===1) {
$(self).data("details", "0");
$(self).parent().find("p.details").html("");
}
});
try to use $(self).closest("table").find("#details").append(data["name"]);
closest finds the closest parent element that you want to find.
replace $(self).parents().find("#details").append(data["name"]);
with
$(self).parents('tr').find("#details").append(data["name"]);

match words that appear at the beginning of the line in a table cell

Please take a look at this FIDDLE. How would you make sure it only matches the occurrence of Sodium that appear at the beginning of the line in a table cell, for example :
<td>Sodium</td>, <td>Sodium (from Kitchen Salt)</td>
but not
<td>Vitamin sodium</td>,<td>Fish Sodium</td>
My attempt
`var find_Sodium = /^Sodium/
alert($('.'+title+'table').find('td:contains(find_Sodium)').next().html());`
isn't working.
$.ajax({
url: "url.json",
success: function (data) {
$(data.query.results.json.json).each(function (index, item) {
var title = item.title;
var table = item.table;
if (table.indexOf("Sodium") >= 0) {
$('.'+ title+'table').html(''+table+'');
var find_Sodium = /^Sodium/;
alert($('.'+title+'table').find('td:contains(find_Sodium)').next().html());
}
});
},
error: function () {}
});
Table Structure:
<table class="tablesorter">
<thead>
<tr>
<td>Ingredient</td>
<td>Amount</td>
<td>% Daily Value**</td>
</tr>
</thead>
<tbody>
<tr>
<td>Calories</td>
<td>10</td>
<td></td>
</tr>
<tr>
<td>Sodium</td>
<td>2g</td>
<td><1</td>
</tr>
<tr>
<td>Vitamin C</td>
<td>110mg</td>
<td>4</td>
</tr>
<tr>
<td>Potassium sodium</td>
<td>235mg</td>
<td>6</td>
</tr>
<tr>
<td>Omega 6</td>
<td>1100mg</td>
<td>*</td>
</tr>
<tr>
<td>Vitamin Sodium</td>
<td>1200mg</td>
<td>*</td>
</tr>
<tr>
<td>Vitamin E</td>
<td>300mg</td>
<td>*</td>
</tr>
</tbody>
</table>
:contains does not accept a regex, the way to do this is to filter()
$('.'+title+'table').find('td').filter(function() {
return $(this).text().indexOf('Sodium') === 0;
}).next().html();
FIDDLE
using indexOf === 0 makes sure Sodium has an index of zero, being the first thing to occur in the elements text

Categories