I'm creating a webform that has combos containing 100 values or so. The values are the same.
The form may have several records. So if there are 100 records there are 10,000 lines which seems pretty wrong from a "download" point of view.
The thing is: I want to keep that combo dynamic to keep the id from the database.
So I came up to the following:
.....
<script>
stupidCombo = "<option>a"+
"<option>b"+
...
"<option>99zzz"+
"</select>";
</script>
..... form here
.... for each item in huge list do paint <table><tr> etc. etc
<td>
<select name="comb-<%=id%>">
<option selected><%=obj.val%>
<script>document.write(stupidCombo);</script>
</td>
... close form, table, html etc.
I have rendered it and "look" fine. The page has decreased from 50k lines to 5k and the select is created by the javascript on the client side.
My question is.....
Is this ok?
Is there any risk involved?
I borrow this Idea after understanding who most of the javascript frameworks work, but most of them work on a <div> element rather that just to the document it self.
I'm targeting IE6 and this is a quick fix that has to be on production tomorrow morning ( so I don't want to spend too much time on this ) but I don't want to have 50,000 lines written for each request if I can help it.
Thanks
HTTP compression (mod_gzip, etc.) will compress all that nicely.
If you insist on document.write, you will have to use JavaScript to write <select> element as well, because in HTML you're not allowed to put <script> inside <select>.
Another approach is to send one copy of the control to the browser and then duplicate it with help of selectElement.cloneNode(true).
HTML produced by document.write works in same way as normal one, so there is no any technical problems with your solution. ( of course, such solution works only if javascript enabled )
By the way, for the lists with big count of options, you can look at "suggest box" component, which can replace native selectbox.
well it obviously won't work if javascript is disabled.
Google does it ("document.write") all the time (Analytics/Adsense/...), so I don't see why there would be anything wrong with it.
Your solution does look a bit odd, because the <script> tag is inside a <select> tag, so you better check in several browsers. After all, you never know what IE is going to do :)
Update.
I've done just the way I asked and it worked fine. There were no problems with the js inside ie.
But...
Once the table is rendered, the next thing the user attempt to do ( always the user does something unexpected ) was..
"Ok, the report looks fine. I'm going to copy/paste it into MS-Excel thank you."
Which is something that I don't really care. Is up to the user, but the result was: The excel spreadsheet die ( or froze which is almost the same)!!!! because the javascript engine within the excel is not as good as it is inside IE, the combos took forever to copy and actually it leave excel application unusable.
I didn't knew the copy/paste was so good from IE to Excel that it actually copied all the generated html and Excel tried to run the javascript too with terrible results.
I'll try again by leaving the raw html and see if that works better.
:(
Related
EDITED: New information: When I inspect the field, and the code is highligted (in the inspector), then the statements all work as they should, but when the field isn't highlighted anymore, the statements do not appear to work. Hopefully this helps diagnose the issue.
I have a wufoo form (a hosted form that you can embedd, send to spefic email on submit etc). I have a field on that form that I am trying to populate with a certain piece of data once I click a button. I believe I have the correct code to make this happen, and it should work:
$('#my-button').click(function() {
$('#Field3').val("something");
});
I have tried many different ways:
$('input[id="Field3"]').val("something");
$('input[name="Field3"]').val("something");
and a few reaches which I didn't really think would work..
$('#Field3').append("something");
$('#Field3').text("something");
There are a few things that confuse me here, and I will post screens below showing what I mean. I can type all of these commands in the console once the page is loaded and nothing will happen to the field (with the id of Field3)...most of the time. But on several occasions, I would reload the page, try a few statements again, yes the same ones, and then it would work. No idea why or how, but it is sort of an intermittent thing. Obviously that's probably not the case, but I am pretty confused as to why this is happening;
Below are three screens of my console. For the first two, the field finally populated after about 10 or more tries in the console, and then continued to work while using commands that didn't work before. The last screen is an attempt that did not work at all:
[![Eventually Works After Last Command][1]][1]
[![Eventually Works After Last Command][2]][2]
[![Did Not Work][3]][3]
[1]: http://i.stack.imgur.com/JKVxY.jpg
[2]: http://i.stack.imgur.com/MLca8.jpg
[3]: http://i.stack.imgur.com/0viRA.jpg
(Apologies for the way I had to post these images, I keep getting formatting errors that will not let me continue to save the post unless I cmd+k them)
I try everything in the console first, but I can not find any patterns here. Any ideas or input would be greatly appreciated, and thank you for your time.
At this point I'm pretty sure the problem has to do with the form-code switching or adding certain classes under certain conditions, so I downloaded the code from my Wufoo account rather than embedding it. Then I only added the code for the view (not css or JS), and it works now.
My original statements (not the reachers) all work fine now when I try them. Thanks for the time everyone.
I know you solved your issue, but figured I'd chime in in case you or others have this issue again in the future. It sounds like your issue was related to execution order. Wufoo's embed scripts are asynchronous, so it's very likely that the input fields in question didn't yet exist on your page at the time your jQuery click handler was evaluated. Changing your original code to jQuery's "on" method instead of "click" would likely have solved your problem, as "on" provides a delegated event listener. At any rate, glad you got everything sorted out!
In the console I assume there is no jQuery loaded.
I usually write:
document.getElementById('Field3').value = "something";
Updated your Jsfiddle. The only thing I changes, I added the reference of the
Jquery. Might be that's the problem.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
I purchased a script online that's no longer supported and I just need one last functionality to finish off my project. One detail the client needs is to have a line of text link to another page in the site.
I do not know a whole lot about xml, but I understand it doesn't support html to include hyperlinks.
This is a quiz where users must answer specific questions in order to move on to the next step. It's fed into a div by a js file, I think, but I don't understand how it works. I'm not going to post any code just yet as I'm just reaching out for some advice right now and if what I want to do is even possible.
Is there some kind of a workaround? I've Googled plenty of sites with code chunks and have done a lot of experimenting, but I mostly just break the page the xml displays on.
Thanks.
Dont use the actual xml syntax of tags like <a></a>. Better replace these with other symbols like [a][/a]. When you output the code, simply replace [ and ] with < and >
You replace code before you put it into a div could look like this:
xmlAsString.replace(/\[/g,"<").replace(/\]/g,">");
edit:
I totally forgot about CDATA.
Forget my previous answer. Just add the <![CDATA[...]]> Tag around the anchor in your XML:
<![CDATA[link]]>
What I Want: Very simply I have a C program that generates a variable periodically, I want to be able to display this value on a website.
Restrictions: The webpage is HTML, php does not work, javascript does [I have tried a few javascript solutions but they have all been long, tedious and in the end ineffective] I want it to be able to format the text so that it matches the rest of the webpage. Above all I'd really like to find something simple that works.
Freedoms: I can output the variable from my C program to just about any file type and content that I want, the file is hosted so is available locally to the server or online for the client.
Preferred Solutions: I am currently playing around with the object and iframe tags native to html. They give a nice simple input:
<object height=20 width=75 type='text/plain' border=0 data="URL/filename.txt"></object>
inserts the contents of my file, but it can't be formatted so I am stuck with 12pt Courier font which is not acceptable. Using
<iframe seamless height=20 width=75 scrolling='no' src="URL/filename.htm"></iframe>
and adding my desired font/colour/size etc to the htm file gets me the right text style, but htm has a large amount of white padding around it which I can't seem to get rid of so I have to make my iframe quite large for the text to be displayed, but then it doesn't fit smoothly with other text.
So anyone that can answer one of four questions:
How to remove excess padding from htm
How to format the style of a html object
Is there anything in Java as simple as the php [so apparently it doesn't show php code even when you quote it as code. But basically using echo and get_file_contents to insert the contents of a txt file into a html page]
Propose an alternate solution
Padding and style can be handled by css.
By java I assume you mean javascript - google-ing will help you. Without details of what your server is running and what is dispatching your pages we can't give you an exact answer. You might want something with ajax to keep it updating in the background.
Try googling your question, you'd be surprised how often this helps.
I'm not sure what you're trying to do once you get the variable into your web page, but I think something like the following could be useful.
Create a hidden div on your page
Have your C application write the variable to some file
Use jquery to execute an ajax call to pull that value into the div ( or whatever other container you want to use
using some type of timer, execute the ajax call every X period of time, which will then get your up to date variable
on your main page, have another timer that will then come in to that container, grab your value and then you are free to do what you want with it.
This is all off the top of my head without knowing much about what you're trying to accomplish. If you provide some further details we may be able to help you a little more.
You need AJAX... that's just a fancy buzz-word. It means you can tell JavaScript can get a file from the server without reloading the page and you can insert data from that file into your HTML.
AJAX is made much simpler by using a JavaScript library like jQuery, but it can be done without jQuery. There's a pretty decent Getting Started tutorial at Mozilla Developer Network if you want to do it the hard way, but I really recommend jQuery.
As far as formatting... any formatting... you need to use CSS. Just about everything about the appearance of anything on a web page is controlled by CSS. MDN has a Learn CSS section, too.
load jquery on you main html file
put a div with some id (example id="newvalue")
make you c program to write the output in a file (for example value.html)
on main html page header, after jquery include code add some javascript like
$( document ).ready(function() {
$("#newvalue").load('yoursiteurl/value.html');
});
I'm a member in a website and there's a huge (automatically generated) HTML table on this PHP page that is only available to me and I wanted the table source code because I want to copy it to a HTML page on my computer to then process it with a program.
The problem is that when I right-click to display the page source code it works. However, I'm tired of looking at the source code and inside all the linked JavaScript files. I can't seem to find the table or any data of it on the scripts/page source codes.
I can select the table data and copy it, but it is just the data. It doesn't say anything about flash, so I'm assuming it's not flash. The data of the scripts/pages isn't obfuscated, it's easily human-readable.
I used Google Chrome's 'inspect element' and it worked.
I was thinking on doing a PHP script that would import data from a similar table, but I will have to know more about a lot of stuff mentioned here.
What can I be doing wrong or what can cause this kind of behavior?
Two possible reasons could be that the table may be returned from an AJAX call to another page that returns the HTML for the table, or they could be generating the table's html code and contents on the fly from a list of values coming from javascript or some other source rather than serving the HTML output to you from the server side.
Something you can do to figure it out is see if there are any empty div or other html elements where the table appears to be inserted, and search their javascript files for references to those elements. That may shed some light on how they populate it.
Feel free to update your question with the raw html (where you don't see the table) and maybe some javascript and we can look. Use pastebin if it is a lot of content.
Would it help to use the Firefox plugin called Firebug?
Using this plugin you can click on an area of a page to see the code displayed in the Firebug section at the bottom of your window.
Here are the details: https://getfirebug.com/whatisfirebug
Maybe the table is generated with a JS script, if that's the case, doing right click and "View source" would not show you the html. You need to use something like Chrome's devtools. Open google chrome and visit that page, once there, right click the table and select "Inspect element", the devtools will open and then you'll see the table's code, right click it's opening tag and select "Copy as html".
Let me know if that works :)
Try a developer extension like http://getfirebug.com/ The underlying source code may not reflect output due to how much the DOM can be modified by javascript with extensive use of ajax. This plugin will permit you to view elements as they're interacting with the browser.
its probably that the table is dynamically generated on the fly so looking at the source code won't actually give you much. try looking at the "GENERATED" source code or inspecting the DOM using Firebug, or the Developer tools of chrome/safari.
Or better yet, try your hand at web scraping:
http://vancouverdata.blogspot.com/2011/02/how-to-web-scraping-xpath-html-google.html
Although I'm not sure if it'll work for pages that need a login. But hey, at least you learned something new :p
I have a page where there's a drag and drop table where the order of the rows determines the value of a subtotal. However, it's more complicated than just addition and I would rather not duplicate the logic in JavaScript to update the values.
A simple solution would be to reload the whole page using Ajax and then replace the table from the page fetched via Ajax. Perhaps it's not the most elegant solution but I thought it'd be a quick way to get the job done that would be acceptable for now.
You can do that with jQuery like this:
$('#element-around-table').load(document.location.href + ' #table-id');
However, my "simple" solution turned out to not be so simple because the table also contains a <form> tag which is not being displayed in Firefox (Safari works).
When I inspect the page using Firebug, I see the form, but it and its elements grayed out.
Searching on the web, I found a rather confused post by a guy who says FF3 and IE strip <form> tags from innerHTML calls.
I'm probably going to move on to do this some other way, but for my future reference, I'd like to know: is this the case?
That post is rather confused, I just tested your code and it worked fine. The form tag was shown in firefox 3.0.8 just fine.
Looking at you code example, though I wonder if you just gave an incomplete example... make sure that the page you call returns only the html that goes inside that wrapper element.
I've run into this type of thing before. FORM tags need to be added to the DOM. If they're added using a method that writes to innerHTML, the tag will appear, but it won't be there as far as JavaScript is concerned.