I am trying to create a paginated report with multiple KPI in a table using MVC, C#,and JavaScript. In order to accomplish this, I created a partial view, with a view model to represent the KPI component. I have a small JavaScript file with a document ready function to set the color of the KPI component. I load them like this.
<td style="width:30px">
#Html.Partial("Element", new ElementReadings((decimal)item.NLow,
(decimal)item.NHigh, (decimal)item.N_PCT))
</td>
<td style="width:30px">
#Html.Partial("Element", new ElementReadings((decimal)item.NALow,
(decimal)item.NAHigh, (decimal)item.Na_PCT))
</td>
My problem is the java script only runs on the first row of table. I have tried including the java script file in the partial view (which loads the same file every time according to viewing the page source) but it does not seem to fire except on the first row. I even tried to include the java script directly in the cshtml file, again no love.
I am not well versed in web based programming, and looking for any advice. My next step in a windows app would be looping through all the controls on the form, getting their name or some property, then run a function against what I found. Not sure if that is possible with java script and the DOM (?). Guess I will find out.
cheers
bob
Edit here is the java script code.
$(document).ready(function () {
var high = $('#high').val();
var low = $('#low').val();
var actualValue = $('#actualValue').val();
if (high > actualValue) {
$('#HighTextBox').addClass("redBackgroud");
}
else {
if (low < actualValue) {
$('#LowTextbox').addClass("redBackgroud");
}
else {
$('#MediumTextbox').addClass("greenBackground");
}
}
})
I think Stephen is correct, and I do not fully understand how html is rendered. I solved the problem on the server side when assigning values to the text boxes. Thanks for everyone's help and comments.
Related
I have a problem here.
Pre-problem
I am frontend mostly but trying to solve one important problem. All my backend is on java and I know you can load data to the page before it loads and then display it in html between the <%= data %> tags. But it takes a very long time to load all the data I need.
Problem
Is there a way to dynamically load more data to the page after it had been loaded? Or make it work on the background (some king of async, etc.)?
Right now waiting time before page loads is 5-10 seconds and it is extremely long. Also, while page loads everything looks like it froze.
More info
Please let me know if you need an example of my code, etc. Thank you!
I tried researching about it but only found some suggestions to use jQuery or other languages/plugins which i did not quite understand. I would like to make a solution which works with only jave, JS, jQuery if possible.
I actually found a solution to the problem, just wondering if it is save.
I am using the following code:
Jsp file which I load data to:
<c:import url="AllPendingMyDeals.jsp?<%= UserID %>" var="dataPending" />
//creating span to load data into
<span id="AllPendingMyDealsSpan"></span>
file AllPendingMyDeals.jsp:
//loading all libs and classes
<%# page import="java.sql.*" ..... %>
//Calling the functions from java to load the data
ArrayList<Transaction> AllPendingMyDeals = new ArrayList<Transaction>();
AllPendingMyDeals=myRDS.GetAllPendingBrokerDeals( 1,BrokerID, BrokerID ,"0");
<html>
//creating the template for my data to be displayed (with classes and styles)
for( Transaction Trans : AllPendingMyDeals){
<div>.....</div>
}
</html>
And the javascript function to call and load data:
function getDataPending(callback){
$.get('AllPendingMyDeals.jsp', function(response) {
// Dynamically insert the data into the page
$('#AllPendingMyDealsSpan').html(response).ready(checkdata());
});
}
//function for checking loaded data after loading
function checkdata(){...}
Now I am unsure how safe it is and am still solving a few issues with it. Is it a good way to do it or Ajax is better?
I have a simple search engine on one of our older websites. This site is running IIS 6.0 on Windows Server 2003. The search functionality is provided by Microsoft Indexing Service.
You can see the search functionality on our website. (Just type in "speakers" and you will see some hits.
I would like to use the "FullHit" feature offered by the indexing service. When using this feature the Indexing service inserts the full hit results in between "begindetail" and "enddetail" on a target web page.
The problem that I have is that the documents that are being returned have HTML. This looks messy. (Just click on "Hit Locator Tool" in the search results above to see what I mean.)
I would like to create a DIV section such as ...
<DIV name="target">
begindetail
enddetail
</DIV>
Then, after the page is populated I would like to use javascript to strip out all of the HTML elements (but not the data) between the opening and closing DIV.
For example, <FONT color="magenta">Good Data</FONT> would be modified to only show Good Data.
I can also use Classic ASP if necessary.
Please let me know if you have any suggestions or know of any functions that I can add to the target page to accomplish this task.
Thanks in advance.
I inspected your webpage, and there definitely must be some logic errors in your ASP code. (1) Instead of something like <div></div> being passed to the browser, it is HTML entities for special characters, so it is being passed like <DIV> </DIV>, which is very ugly and is why it is rendering as text instead of HTML code. In your ASP code, you must not be parsing the search result text before passing it to the browser. (2) All of this improperly-formatted code is inserted after the first closing html tag, and then there are closing body and html tags after the improperly-formatted code, so somewhere in your ASP code, you are telling it to append the code to the end of the document, rather than insert it inside the original <body></body>.
If you want to decode the mixture of HTML entities, <br> tags, and text into rendered HTML, this JavaScript may work:
window.onload = function() {
var text = decodeHTMLEntities(document.body.innerText);
document.write(text);
}
function decodeHTMLEntities(text) {
var entities = [
['amp', '&'],
['apos', '\''],
['#x27', '\''],
['#x2F', '/'],
['#39', '\''],
['#47', '/'],
['lt', '<'],
['gt', '>'],
['nbsp', ' '],
['quot', '"']
];
for (var i = 0, max = entities.length; i < max; ++i)
text = text.replace(new RegExp('&'+entities[i][0]+';', 'g'), entities[i][1]);
return text;
}
jsFiddle: https://jsfiddle.net/6ohc1tkr/
But first things first, you need to fix your ASP code, or whatever you use to parse and then display the search results. That's what is causing the improper formatting and display of the HTML. Show us your back-end code and then we can help you.
This is what I used to accomplish what you are trying to do.
string-strip-html
It worked pretty well for me.
I now have the search feature working as expected. I would like to thank everyone for their insightful comments. This feedback helped me identify and fix the problem.
OS: Windows Server 2003
IIS: 6.0
Microsoft Index Server
The hit locator tool will only work properly for HTML pages. If you use this tool with a simple TXT file then the results will not be displayed correctly.
I am currently writing a script which uses ajax to call php for pulling in table data using a lazy load method by for some reason whenever i add to the end using
document.getElementById("updateTable").innerHTML += tabledata;
it seems to remove some of the first load of row at the beginning. has anyone else experienced this problem.
the php generates the HTML and then sends it to the JavaScript to be added onto the previous section of the table but i cannot for the life of me figure out why it is being removed. this is the only line of code that i use which directly effects the element updateTable.
Have any of you experienced this problem or does anyone have any creative ideas on solving this
I think you need to look at this
Something like this,
Soccer
Tennis
var nodetag = document.createElement("LI");
var nodecontent = document.createTextNode("Aayo");
nodetag.appendChild(nodecontent);
document.getElementById("currrentList").appendChild(nodecontent);
I have two DropDownListFor's, and the content of the second depends on the first.
I'm attempting to refresh the div content (list) every time a different selection is made in the first with a bit of javascript:
function onUpdate() {
$("#MyDiv").html('<%= Html.DropDownListFor(model => model.PeriodSelected, Model.PeriodSelectList) %>');
}
And the div is simply:
<div id="MyDiv" class="editor-field" />
The SelectList in the ViewModel depends on the selected item from the first list:
public SelectList PeriodSelectList
{
get
{
var list = this.Versions.ToList().Where(fv => fv.DateSubmitted.Year == PeriodSelected);
return new SelectList(list, "Id", "Version");
}
}
Unfortunately running this results in:
Microsoft JScript runtime error: Could not complete the operation due to error 80020101.
However, I've tried using:
$("#MyDiv").html('<%= Html.LabelFor(...) %>');
for the onUpdate() function and that works fine, so the problem seems to be with the DropDownListFor.
So why is this not working? Thanks
I'm not sure about error, afaik it's something about internet explorer and parsing errors, but.
Dropdown list markup actually generates only once on response, so this string will be constant.
<%= Html.DropDownListFor(model => model.PeriodSelected, Model.PeriodSelectList) %> will be the same <select>...</select> all the time.
You need to rethink workflow of your web site to preload all needed information and then work with that only by JavaScript. Thus, you need to filter your periods in browser with javascript and left asp.net mvc only as data source.
Or somehow use ajax to regenerate dropdown list markup on server. In simple words, in ASP.NET MVC you cannot easily mix JavaScript and .NET code. And I think, this is right approach. But, if you want so for some reason:
there're WebForms.
The page of OpenERP web client can get really wide with many columns in a list view. On short screens, this is a trouble as the centered menu runs out of reach to the right with the content. I decided to find a quick fix for this: Make the menu align to left. With normal websites, this would be a piece of cake with standard JQuery, but this OpenERP web thing is pretty much completely generated in JS!
The generated HTML has the following structure for the menu:
<div class="menu" id="oe_menu">
<table align="left">
<tbody>
<tr>
<td>
<a href="#" data-menu="3">
Settings
</a>
</td>
<!--other menus...-->
</tr>
</tbody>
</table>
</div>
The way to go with JQuery is (tested in JS console):
$('div.menu table[align=center]').attr('align','left');
Though the usual $(document).ready() will fail because the time the DOM is loaded is only the initialization of the OpenERP web client.
My requirement is that this needs to be managed from a module. Simahawk got his answer for a similar topic - hooking into the logout event which pointed me in the right direction, but did not fix my task.
I found and modified a piece of code from the web_livechat module which finally worked. My module is called camara and that is important, because the new method of the openerp object must be called after your module - static/src/js/tweaks.js:
// openerp.camara(openerp) is executed when the module is loaded - UI is not rendered yet!
openerp.camara = function(openerp) {
// so we hook into (override) the Header do_update() call
// which is executed upon session validation by the WebClient
// we have to call the overriden parent method
// then we hook onto the update_promise
// which executes our code after the update is done.
openerp.web.Header.include({
do_update: function() {
var self = this;
this._super();
this.update_promise.then(function() {
// change menu alignment to the left
// because with wide views, it runs out of reach
$('div.menu table[align=center]').attr('align','left')
});
}
});
}
The js file needs to be included in the __openerp__.py:
'js': ["static/src/js/tweaks.js"]
Questions remaining:
Do you like this and find it an appropriate approach?
If not, please offer other solutions.
I myself find this rather clumsy, that's why I ask. I thought of using CSS but did not manage to override the table's align attribute.