I am building a user search filter where we can specify a number of criteria's, one per each row of a HTML table.
I am building a dynamic table using jquery on the client side, the table starts off with one row(default) on page load with a "+" image on the last <td> which when clicked I am appending a new row to the table, and this can repeat for any number of rows as shown below. Once the search button is clicked, I am bringing back results based on criteria selected. But I also need to preserve the current criteria table after postback(due to search button).
Any ideas on how to do this? I have tried putting all of the HTML for the table in a hiddenfield but I get a RequestValidationError for obvious security reasons. I have the individual selected values in each row saved in hidden variables which I am using in code behind to build the search and bring the results, do I need to rebuild the table on the client side using the values I have? Is that the only option? I also tried converting the HTML for the table into text and putting it in hidden variable, but I am not able to convert it back into HTML after the postback, it is rendering as text inside the table, below is the code for it, any help/input is appreciated.
HTML:
<input type="hidden" runat="server" value="0" id="hdnCriteriaTable" />
jQuery:
on button click, before postback(client side):
jQuery("[id*=hdnCriteriaTable]").val(jQuery("#dynamicCriteriaTable tbody").html().replace(/</g, "<").replace(/>/g, ">"));
on page load after postback(client side):
if (jQuery("[id*=hdnispostback]").val() == "1")
{
//commented out lines below are different ways I tried to make it work.
//the one with hardcoded td's is the one that renders perfectly as HTML inside the table
jQuery("#dynamicCriteriaTable>tbody").empty();
var criteriaTableHTML = jQuery("[id*=hdnCriteriaTable]").val().replace("<", /</g).replace(">", />/g).replace(""", "\"");
jQuery.parseHTML(criteriaTableHTML);
//jQuery("#dynamicCriteriaTable>tbody").append(jQuery("[id*=hdnCriteriaTable]").val().replace("<", /</g).replace(">", />/g).replace(""", "\"").toHtml());
//jQuery("#dynamicCriteriaTable>tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>")
jQuery("#dynamicCriteriaTable>tbody").append(criteriaTableHTML);
//alert(jQuery("#dynamicCriteriaTable").html());
//jQuery("#dynamicCriteriaTable").toHtml();
}
This is how HTML is being rendered inside the table:
If I were you, I would rebuild the table from the values; it's clean, and you can always write a function that automates the build.
However, if you want to pass it in toto as HTML, you'll need to escape your tags somehow. I would start by replacing < and > with < and >, respectively, and if that still give you a requestValidationError, use another pair of delimiters.
Related
I have a table built that comes from data in the server. I have a button that will activate or deactivate a category. If the category is active, it will show the action of "inactivate" and so the way around. So I need the table to refresh so when the user clicks activate it will automatically switch. I am almost done with this. Issue is that when I use the jQuery load function, it seems like it's adding one additional line instead of just refreshing it.
This is my code, I send a request to the server, then wait for it to finish to load.
My code is below:
async function cambiarStatus(tipo_transa, ruta, estadoCat, idCat, div, file)
{
await modStat(tipo_transa, ruta, estadoCat, idCat);
$(div).load(file+div);
}
With the table I built with PHP I only have one ... but then it goes and another one which ends up in making the table go nuts.
Many thanks for your help!!!!!
I'm going to have to guess that the value of the variable div is something like #c-i-1, or # plus the id of whichever table row you're trying to replace.
In that case, the code as written is telling jQuery to replace the content of the table row, not the table row itself, with the matching table row loaded from the file. That's going to cause exactly the problem you're showing, a table row being put inside a table row.
You need to replace the table row itself with the retrieved table row. For that, as convenient as jQuery's load method is, it doesn't offer the functionality you need.
Something like this should work better:
$.get(file, table => {
const row = $(table).find(div);
$(div).replaceWith(row);
});
I needed a little help over here on adding dynamic columns to table and I'm using smart-table project https://lorenzofox3.github.io/smart-table-website/
Please look at plunker
https://plnkr.co/edit/uTDa6hfwdgGtGWkYqL7S?p=preview
Click on add new column, it will update the table header, but I can't update the td element because I haven't created or binded any td element for new column.
Need help on two things.
1) Any number of new columns might come in future from server dynamically, so I can't bind any element statically in html like I did right now.
2) This is a little long one(I want to create a only one header as MV and in colspan I want current and next) and How do I accomplish that one ? If I divide like that, how do I go frame the data ?
Additional Note on Question 1: I have tried dynamically showing the data in table. please look at line 27 in index.html. But again, If I go with this approach, the values get binded to different different columns since, data's are framed dynamically on controller. To be simple, there is no guarantee that data will be in in this order.
(SNo, companyName, companyFullName, MarketValueCurrent, MarketValueNext, QuarterCurrent, QuarterNext)
companyName might come first or at last. If I go by dynamic looping using ng-repeat, it binds MarketValueNext in first column, then companyName, etc in whichever the order the data is coming.
Thanks in advance.
In our project we are creating tables using JavaScript and displaying data in that table using xsl. we are getting data from backend through copybook.
Based on one value we are displaying, we have one column header in the table. If that value is yes then that column will come. While displaying data in that column we did not check any condition, just we are using style="display:none". If that column comes then data is visible otherwise data is hidden. But when data is vible and when we click on one of the column names columns are shifting to left and data was hiding because of style="display:none".
Is there anything that works similarly to style="display:none" such that when a column comes then it shows the data otherwise it hides the data?
I have tried with 'style="visible:hidden", it does not work. Whether the column came or not it is consuming space beacuse of that columns are shifing to right.
**style="display:none" is working properly means when column comes then only it is showing data otherwise it is hiding the data **. where as visibility:hidden is conusimg space.
Use visibility instead:
style="visibility:hidden"
I have searched this forum and many others around the web, but apparently I'm trying to do something a little different than anyone else.
I have a web page (aspx) that accepts user-entered criteria and selects products based on that user criteria. Using JavaScript, I make an Ajax call to my server side code which interacts with an old, but widely-used company DLL. I receive the matching products and all their details back from the function.
I'm using result.substr and result.split (since the data is coming back as a comma delimited string) to obtain the relevant pieces of data and build the section of my table. The user can then click on an icon to the left of each table row to view further details about the selected model.
That displays another element which extracts further data from the returned comma delimited string. All of that is working beautifully. The problem I'm having is that on the that displays the further details, there also needs to be a spline chart showing some graphical data. I am returning the data required to plot the spline graphs, but am having trouble finding a way to get the data to the graph.
I would prefer to find a way to set it up just as I have the data table, where I'm using JavaScript to append to the appropriate section of the HTML.
Here is a sample of what I'm doing with the table:
table += '<td title="Details"><div class="details"><img src="/resources/ic_menu_search.png" alt="" height="20" width="20" style="cursor: pointer;" id="' + i + '" ></img></div></td>';
table += '<td><div class="model">' + TableResults[((i - 1) * 461) + 1] + '</div></td>'; //model
Then I do this to put the data in the section.
$('#datatable').append(table);
I would like to do something similar with the asp:chart control and maybe try something like:
$('#Graph > points').append(TableResults[((recNo - 1) * 461) + (111 + i)]);
But, I don't think that is valid. I also tried to use <% %> script tags to set the properties, but it obviously won't run that when the JavaScript/jquery runs. It executes before anything else.
I would also consider doing a server-side (vb.net) function to create the plot points, but I haven't found a good example yet that matches what I'm trying to do.
Any help is greatly appreciated!
I use highcharts to make all my charts and build up the format dynamically in ajax calls. So if a user changes a dropdown list, I pass that new selected index to the ajax page, then it rebuilds the entire table and passes back the html. I don't use the append feature and don't need to contact the code behind using <% %>. I simply use the .html() jQuery function to place all the html in a div.
I'm working on a printable form in HTML that is designed to pull data from a database application and display it as a wepage configured for printing. I have a number of tables set up to pull in various data from the database and display them in a printable format. The number of printable pages must always be even, as the page must support double sided printing.
I'm having an issue where, when there is a lot of data to display in a field, the tables spill over onto the following page, thus creating 3 pages. My solution to this is to insert a page break at the bottom of the form to maintain the even number of pages. I'm thinking to use Javascript to calculate the size of the tables and add in the break where necessary.
The code I've got at the moment is
<script type="text/javascript">
var compleHeight= document.getElementById("complete").scrollHeight;
var incomHeight=document.getElementById("incomplete").scrollHeight;
var totalHeight= compleHeight+incomHeight;
if(totalHeight>300)
{
var newdiv = document.createElement('div');
newdiv.setAttribute('style', 'page-break-after:always');
}
</script>
I know the calculation and the if are working OK, but the page break isn't being generated. Any ideas?
You didn't append newly created element anywhere.
document.body.appendChild(newdiv);