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>
Related
I've got a strange problem with displaying elements on page in a good order. I want to show at the begining document.write with welcome, then ask for a name with prompt and at the end show the result on the page. Somehow before anything shows a prompt is displaying. Why is this happening? This is for a school purpose :)
document.write(`Hello `);
const text = prompt(`what's your name?`);
document.write(`${text}, nice to meet you :)`);
If something is unclear, feel free to ask :)
As discussed in the comments, this works differently in different browsers and I suspect that is due to how browsers go about their rendering cycles.
It goes beyond document.write, if you try to append an element to the document you will observe the exact same behavior.
I tried to force chrome to render in-between the write/append calls but it sturdily refused to. I'm guessing this is some kind of supposed optimization on their side, not sure, but if you really insist on doing that you'll have to employ an additional context, and that will not work with document.write as it will overwrite whatever is already in the document.
Here's another one that's got me ripping what's left of my hair out.
My latest asp.net page is something I just threw together for an in-house database tool. It uses the standard VS 2010 design template, which means it uses the site.master page. I mention this because it may be relevant to my problem.
I'm using asp:textbox controls instead of input type="text". When one textbox 'blurs,' I need to run a sub in code-behind that will do a database lookup based on the information typed in the textbox.
Everything I see about this is that I need to add a asp:hiddenfield to trigger the code-behind event to do the lookup. So I use document.GetElementById method in a JavaScript script to set the value in the hidden field. What it's supposed to do is: document.GetElementById('HiddenInfo').value = "yada-yada".
My problem is that the VS development environment doesn't recognize the .value property for GetElelmentById command. For example, as is its wont, VS will give code hints as you type. When I get to where I want to insert the .value parameter, it doesn't show up on the list of suggestions. See illustration:
As you can see, typing the v doesn't bring up the .value parameter.
I've tried getting it by ClientID and by using jquery, and nothing works. The crazy thing is that I have done this before with anther web page I developed, but the only difference is that one did not have a site.master page.
I've spent hours trying to find the answer online, and nothing is quite exactly the same as my problem.
Any ideas?
Thanks!
Well that's an asp .net element, so your going to have to get its clientid I believe. Here it is in jquery:
$('#<%=HiddenInfo.ClientID %>').val();
Hours and hours later, I finally found the answer. In the JavaScript function that changes the value of the HiddenInfo field, one line is added that (I guess) forces a postback, which then fires the _ValueChanged event in code behind:
<script language="javascript" type="text/javascript">
function CheckCC() {
document.getElementById('HiddenInfo').value="YES";
<%= ClientScript.GetPostBackEventReference(HiddenInfo, "") %>;
}
I dug up the answer here.
Seems like a pretty obscure solution.
The odd thing is that in a previous asp.net design of mine, this wasn't necessary. That's what was really confusing me, and I still don't understand it. But at least I can move forward now.
Thanks everyone for your suggestions.
I have a few questions that need answering. I am trying to create a Google Chrome extension and I need every page to be monitored for a keyboard action. I have added a content script that runs on the page load and when you click the keyboard shortcut an alert is shown.
What I want to do is instead of an alert have something like fancybox, thickbox, etc... however all of those are jquery plugins which adds a dependency to my js file. I tried launching the plugin before my js file but it still does not work.
I run the content script from the manifest.json file with
"content_scripts": [
{
"matches":["http://*/*", "https://*/*"],
"run_at":"document_start",
"js":["jquery.simplemodal.1.4.1.min.js", "shortcuts.js"]
}
],
I cannot execute an HTML page where the js is located I have to use a js file.
so what I want to know is if either there is a way to include the plugin without physically adding it to my file or if there is a way to call the js file which then just executes an HTML file or if there is another way of creating a popup screen like fancybox that is already included in js.
Another question I have is if there was a way to embed HTML into an alert box (this is a backup if I cannot figure out the above question)
and finally does anyone know of an execution command for x-webkit-speech? I want the command to start recording and somehow some people have used some commands (none of which answer my question) so someone somewhere knows a little more about this function then me. I would really appreciate help with this I am really close to finishing my program and these are my last holdups with these questions answered I will be able to release my extension. Please help where you can I have researched and researched everywhere all different ways of trying these things and none have worked.
edit:
You were correct (JHurrah) including the jquery actually solved the problem I really appreciate that. simple yet successful I just assumed the jquery provided was enough but I guess everyone knows what happens when you assume especially when programming.
NewTang I have already looked at that website however I will relook at it and see if I missed anything thanks for the help
yeah see I don't have that I have link edit and flag I looked all over and did not see an add comment button at all... :[
since simplemodal is a plugin it depends on jquery, try including jquery in your manifest before the other scripts.
"js":["jquery-1.5.2.min.js", "jquery.simplemodal.1.4.1.min.js", "shortcuts.js"]
I"m a little confused by your question, but I'll give it my best shot.
1) I think you're trying to ask: Can I use a content_script to inject HTML. The answer is yes, but only through Javascript. So, you could have something like:
//using jquery
$("body").append("Hi, I'm on the bottom of the page");
Your javascript would have to create or load the HTML that would get inserted into the page.
2) No, no HTML in an alert box. You're on the right track with using lightbox, thickbox, etc.
3) There's not many resources on x-webkit-speech, but maybe this can help you get going: http://nooshu.com/experimenting-with-webkit-form-speech-input
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.
:(
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.