I've list of data like...
| Coloumn1 | Coloumn2 | Coloumn3 |
|----------|----------|-----------|
| val1 | val2 | val3 |
| val1 | ' ' | val3 |
The above table I've on form submit, now after some time I found the value of Coloumn2 instead of ' '/BLANK, So I want to put it into the table without reload the page.
I've following code structure...
myInstance.gsp
<tbody id="myInstanceTData">
<g:each in="${myInstanceList}" var="myInstance">
<tr id="${myInstance?.id}">
<td class="align-center zoomout">
<td class="align-center">${myInstance?.text?:"N/A"}</td>
</td>
<td class="align-center" style="color:${myInstance?.objectColor}">
<g:if test="${myInstance?.object}">
${myInstance.object}
</g:if>
<g:else>
${"Second Analytics"}<br>${"In-Progress"}
<img src='../assets/transfer.gif' style="height: 18px;"/>
</g:else>
</td>
<td class="align-center" style="color:${myInstance?.objectColor}">${myInstance?.confidence?:"N/A"}</td>
</tr>
</g:each>
</tbody>
Currently I've written that ${"Second Analytics"}<br>${"In-Progress"} here I require call to Controller action till I didn't receive any text for the same.
Thanks...
I have tried below code. Working fine for me.
function fetchColumn2() {
setInterval(loadColumn2, 3000,id);
}
function loadColumn2(id){
//Make ajax call and get response
$.ajax({
url:URL,//URL to action in controller
data: {id:'1'},
success: function(resp){
console.log(resp.id);
console.log(resp.column2);
var column2Val = resp.column2;
if(column2Val != ""){
//TODO: Set value to your table data
clearInterval(this);
}
}
});
}
Related
Snippet from the function in Flask.
I'm generating a list of all positions and then sending them over. Then using jinja and the for loop I'm populating the table.
#app.route("/")
def table_list():
position_list=["a","b","c","d"]
return render_template("index.html",
position=position_list)
This is on the homepage and needs to be automatically refreshed every couple of seconds so the position values will get updated.
The HTML table:
<table>
<tbody id="data">
{% for pos1, pos2, pos3, pos4 in position %}
<tr id="data_table">
<td id="pos1"> {{ pos1 }} </td>
<td id="pos2"> {{ pos2 }} </td>
<td id="pos3"> {{ pos3 }} </td>
<td id="pos4"> {{ pos4 }} </td>
{% endfor %}
</tbody>
</table>
How do I use JS to refresh only the values in the table, and automatically every couple of seconds?
You will have to change multiple things to make this work.
Separate endpoint into html endpoint and web-service endpoint.
#app.route("/table_list")
def table_list():
return render_template("index.html")
#app.route("/get_list")
def get_list():
position_list = ["a", "b", "c", "d"]
return make_response({"output": position_list})
Change the html for table
<table>
<tbody id="data">
<tr id="data_table">
</tr>
</tbody>
</table>
Change the html template to keep calling get_list and refresh the html
</body>
<script>
setInterval(function () {
let myRequest = new Request('/get_list');
fetch(myRequest).then(response => response.json()).then(function (data) {
let data_table = document.getElementById("data_table");
data_table.innerHTML = "";
for (let d in data['output']) {
data_table.innerHTML += `<td>${data['output'][d]}</td>`
}
});
}, 1000);
</script>
</html>
I have a table with several columns. The first column contains a location name and the last column contains a delete button. When I click any of the delete buttons, it currently displays the confirmation message "Are you sure you want to delete the location:" I want the end of the confirmation message to display the location name.
Here are the relevant bits in my view:
#using (Ajax.BeginForm("FirstAjax", "Configuration", null, new AjaxOptions()
{
Confirm = "Are you sure you want to delete the location:\n",
HttpMethod = "POST",
OnFailure = "deleteFailed",
UpdateTargetId = "CustomLocations"
},
new { #id = "deleteLocation" }
))
{
<div id="reportTblDiv">
<table id="CustomLocations">
<tbody>
#foreach (var location in Model.LocationList)
{
<tr>
<td class="location">#location.LocationName</td>
<td>
<input type="submit" title=#Model.DeleteButton name="#location.LocationId" value="#Model.DeleteButton" />
</td>
</tr>
}
</tbody>
</table>
</div>
}
How can I access the correct element in Model.LocationList from the line beginning with Confirm?
Set the id of the first to be the same as the name as the second . Add a handle to the submit in javascript to update the confirm message:
<td id=#location.LocationId class="location">#location.LocationName</td>
<td>
<input type="submit" title=#Model.DeleteButton name="#location.LocationId" value="#Model.DeleteButton" onclick="return btnDeleteClicked(this);"/>
</td>
<script>
function btnDeleteClicked(btnObject){
var tLocation=$(btnObject).attr('name');
var tCurrentMessage=$("#deleteLocation").data('ajax-confirm');
$("#deleteLocation").data('ajax-confirm',tCurrentMessage + tLocation);
return true;
}
</script>
I have a dropdown list where user can select multiple values(TurbineID). I have to send this multiple values (TurbineID) by using Ajax or Json. How can I do that? I have attached my code (snippet) here.
<td><b>select a Turbines</b></td>
<td style="text-align: right;cursor: pointer" ><img src="../images/SelecAll.gif" alt="all turbines" onclick='getAllTurbines()'/></td>
</tr>
<tr>
<td colspan="2">
<select id="selectTurbineByID" onchange="getSelectedTurbine();" style="width: 100%;" size="8" multiple="multiple" class="optbox"></select>
</td>
Create a function to get all selected option in list and then json that list
function SelectedValues(){
var result=[]
$("#selectTurbineByIDoption:selected").each(function(){
result.push($(this).val();
});
return result
}
function functionForSendingAjax(){
var option=SelectedValues();
jsondata=json.stringify({"data":option});
ajax({
data:jsondata;
//url:
//success:
});
}
I am trying to create a grid that contains Events on the x axis and Requirements on the y axis and is filled with solutions.
Event1 Event2
Req1 Sol1
Req2 Sol2
My Model contains a list of Events, which contains their related Requirements, which contain their related Solutions. Every Event can have 0 or more Requirements and each Requirement can have 0 or more solutions.
How can I accurately show this grid in razor?
Here is my attempt:
<table border="1">
<tr>
<td class="span-6"></td>
#foreach(var events in Model.Events)
{
<td colspan="3">
#events.Name
</td>
requirementsList.AddRange(events.Requirements);
}
</tr>
#foreach(var req in requirementsList)
{
<tr>
<td>
#req.Name
</td>
<!--Insert logic to align solution with Event-->
<td>
#req.Solution
</td>
</tr>
}
</table>
Of course this is only showing all solutions in the first event column.
I've done a similar thing in PHP for my timesheet system, I want hours worked for each employee on each day (between 2 dates):
| 1 May | 2 May | ... May
Fred | 6 |
George | | 4 |
I used 3 foreach loops, first I outputted the dates, the I went rond each employee, and inside the employee loop, I looped round the dates again.
So for you it would be:
<table border="1">
<tr>
<td class="span-6"></td>
#foreach(var events in Model.Events)
{
<td colspan="3">
#events.Name
</td>
requirementsList.AddRange(events.Requirements);
}
</tr>
#foreach(var req in requirementsList)
{
<tr>
<td>
#req.Name
</td>
#foreach(var events in Model.Events)
{
#curRec = events.Requirements
#if (curRec.HasSolution) // If has a solution.
// Very important so solutions can be aligned properly
{ // Output the solution
<td>
#curRec.Solution
</td>
} else { // Output a empty cell
<td></td>
}
}
</tr>
}
</table>
I have an ajax call attached to the click event of a pic inside a table row. Once the pic is clicked and the click event initiated, I need to grab the first and second td elements from that row. I'm new to jQuery so what I have below is my latest attempt (not working..). The variables firstName and lastName both wind up being undefined after those lines are executed
$('.checkErrors').click(function () {
var firstName = $(this).parent('tr td:first-child').val();
var lastName = $(this).parent('tr td:nth-child(2)').val();
$.ajax({
type: 'GET',
url: '#Url.Action("GetErrors","AgentTransmission")',
data: { term: $(this).attr('id') },
.
.
});
});
Here is a sample table row. The image in the last td element contains the .click event. I would like to grab the first two that contain the text "phinneas" and "ferbseven".
<tr>
<td>
phinneas
</td>
<td>
ferbseven
</td>
<td nowrap>
7735
</td>
<td>
Agent
</td>
<td>
SAF
 
07070900
</td>
<td>
6/5/2013 10:35:38 AM
</td>
<td>
DANTAK
</td>
<td class="errorPlus">
Error
</td>
<td>
Details
<span> | </span>
Edit
</td>
<td align=center id=2358>
<img src="/Content/images/magnify.gif" class="checkErrors" id=2358 alt="Program Details" />
</td>
</tr>
use closest
var $tr = $(this).closest(´tr´);
var firstName = $tr.find('td:first-child').text();
var lastName = $tr.find('td:nth-child(2)').text();
Also, you need to use text instead of val for td elements since it make sense only on input controls.
First only form elements have .val property so .
You are supposed to use .text since it is a td
Try using :eq psuedo selector
var $tr;
$tr.find('td:eq(0)').text();
$tr.find('td:eq(1)').text();
To get their content, you can do this:
var cells = $(this).closest('td').siblings('td');
var firstName = cells.eq(0).text();
var firstName = cells.eq(1).text();
Those last two lines can also be:
var firstName = $(cells[0]).text();
var firstName = $(cells[1]).text();