1

This syntax for some reason isn't working and I'm wondering why. When I alert the values in the page, I can see everything but the textarea value. I'm not even getting an undefined.

var report  = $("textarea#report").val();

Here is my html:

<textarea id="report" name="report" rows="25" cols="10" style="width:100%;height:200px;"><?php echo $_POST['report']; ?></textarea>

<form id="rpt" action="">

I have this code that Paolo helped me with last week. This is the start of the jquery code which also has some editor code mixed in with it

$(document).ready(function()
{
  $('.error').hide();
  WYSIWYG.attach('dfarReport', rpt);
  WYSIWYG_Core.addEvent(window, "load", function()
  {
    $('#Save').removeAttr('onclick').click(function()
    {

I tried adding Jonathan's suggested code to this but I get errors when I do this. I also changed "report" to something different just in case but that didn't help either.

IT'S WORKING !!!!!!!!!!!!!!!!!!!!

To get this to work. I added the following:

$(document).ready(function()
{
  $('.error').hide();
  WYSIWYG.attach('dfarReport', dfar);
  WYSIWYG_Core.addEvent(window, "load", function()
  {
    $('#Save').removeAttr('onclick').click(function()
    {
      WYSIWYG.updateTextArea('dfarReport');   <-------------- This is where it needs to go
user109162
  • 147
  • 4
  • 16
  • Frank, are you sure you have no other elements in the document with an ID of report? – Paolo Bergantino Jun 12 '09 at 01:08
  • Haya Paolo.. Fine thanks.. You're like Superman, you know.. Always coming to help out. :) – user109162 Jun 12 '09 at 01:08
  • Yes, 100% positive. I already did a search on that and nothing. It is totally unique – user109162 Jun 12 '09 at 01:09
  • And are you sure you are trying to access the element once the page has already loaded? Is the code calling var report = $('#report').val(); inside document.ready? – Paolo Bergantino Jun 12 '09 at 01:10
  • OK, yes, the code is calling var report = $('#report').val(); inside document.ready. As far as accessing the element once the page has been loaded, I'm not sure about that. Here is what I have.. I have a php case statement that I am pointing the jquery to. As far as when it gets loaded, I'm not sure. – user109162 Jun 12 '09 at 01:14
  • BTW.. All of the other text fields echo just fine with the exception of the textarea. – user109162 Jun 12 '09 at 01:14
  • Can you post a simplified example of what's going on? :) The code IS correct, so there's obviously a disconnect somewhere and I suspect simplifying things will make you find it before even getting it to us. – Paolo Bergantino Jun 12 '09 at 01:15
  • When you say they 'echo' just fine, how are you trying to display them? Are you simply trying to get all the fields inside a form into a URL string format? – Paolo Bergantino Jun 12 '09 at 01:17
  • Yes, exactly. I am building a query string to send off to php. I have a total of 1 textbox, 2 selects and 1 textarea. All of the values will alert() except the textarea. I can see it in the query string. – user109162 Jun 12 '09 at 01:18
  • When I say that the textarea will not alert, I specifically mean the value that is supposed to be attached to it. I get the &report= just fine. – user109162 Jun 12 '09 at 01:19
  • Interesting. Actually, jQuery has a way to easily do this to all the fields in a form so you don't have to do this yourself. try doing this: alert($('#myform').serialize()); - check out the docs: http://docs.jquery.com/Ajax/serialize - let me know what it says. – Paolo Bergantino Jun 12 '09 at 01:22
  • Paolo. Thanks for the link. I think I'm starting to understand a bit better and am not totally in the dark like I was a week ago. :) OK, on your serialize alert function, I get a completely blank box. Nothing in there at all. I will post the form tag above now so you can see it. – user109162 Jun 12 '09 at 01:29
  • Paolo, I just noticed that the wysiwyg editor is also working off the same element id "report". Could this have something to do with it? This is the same editor that you helped me with a week or so ago. The jq code initializes the editor as well. – user109162 Jun 12 '09 at 01:43
  • @nutjob are you using any kind of wysiwyg editor on top of this? – Jonathan Fingland Jun 12 '09 at 01:44
  • the wysiwyg editor should be updating the textarea silently in the background. have you used firebug to verify that it's working as expoected? – Jonathan Fingland Jun 12 '09 at 01:45
  • It is openwysiwyg from http://www.openwebware.com/wysiwyg/demo.shtml. I'm not certain what is happening with this editor. I'm starting to hate it though. – user109162 Jun 12 '09 at 01:56
  • I'm kind of a novice with firebug also. Where would you recommend that I look in firebug? – user109162 Jun 12 '09 at 01:59
  • personally I prefer tinymce, but in either case, the editor *shouldn't* be causing the problem. Both editors are fairly mature projects. I'd recommend using firebug and inspecting the elements involved to make sure you don't have ID collision, and that the editor is updating the textarea as expected. (have you tried turning off the wysiwyg editor and seeing if it works properly without it?) – Jonathan Fingland Jun 12 '09 at 02:01
  • click on "Inspect" in firebug, then click on the wysiwyg editor. In the html tab, navigate up to the iframe containing the editor. You should see the textarea as the previous sibling (or somewhere nearby) – Jonathan Fingland Jun 12 '09 at 02:03
  • Jonathan, here is what I can see. It doesn't mean much to me though. Does it look ok? – user109162 Jun 12 '09 at 02:12
  • Oh! I totally forgot you were using a wysiwyg editor. That is totally the cause. Presumably the editor will have its own way of getting the value out of the textarea, since it has to do some voodoo iframe magic to get the "what you see" part of "what you see is what you get" working. I looked over the website but I couldn't find the documentation, though. Just look through the source code for something like "getVal" or "value()" or something that will return the current html code of the textarea. – Paolo Bergantino Jun 12 '09 at 02:31
  • see my edit. had to dig through the openwysiwyg source to find it, but you need to use WYSIWYG.updateTextArea('report') to force it to update the textarea – Jonathan Fingland Jun 12 '09 at 02:34
  • My gosh... This editor is really getting to be a huge pain. If it didn't look so slick and my users didn't need to only add bullets or highlights, I'd dump it in a heartbeat. Yeah, the docs for the editor are in the download. The developer didn't post them on the site for some reason. OK, thanks Paolo. I will see what I can find in the source and report back in a few. – user109162 Jun 12 '09 at 02:41
  • Paolo, I searched through the source and didn't find anything like getVal or value(). Jonathan offered a suggestion as well and I thought it was Paolo until now. Thanks Jonathan. Let me ask you.. Where would I add that at? I found 2 instances in the source and changed them to what you suggested but still nothing. Am I correct for editing the source? Is that where you want me to put it? – user109162 Jun 12 '09 at 02:55
  • Follow Jonathan's suggestion: call WYSIWYG.updateTextArea('report') and then try retrieving the value. This editor is really not very good and you should have gone with fckeditor or tinymce but what's done is done. :) – Paolo Bergantino Jun 12 '09 at 03:00
  • Thanks Paolo. I already tried Jonathan's suggestion but I still get nothing back at all. No change. I directly edited the editor source. There are only 2 instances of that string and I updated them both. Was this correct? – user109162 Jun 12 '09 at 03:03
  • btw, what do you mean you edited the editor source? you don't mean openwysiwyg's source, do you? – Jonathan Fingland Jun 12 '09 at 03:19
  • assuming you instantiated the editor using: WYSIWYG.attach('report'); calling WYSIWYG.updateTextArea('report'); should cause it to update the text area with the contents of the editor. *then* calling $("#report").val(); should get you the value you're looking for – Jonathan Fingland Jun 12 '09 at 03:20
  • Jonathan, err.. yeah, I edited the source of the editor. I changed it back already. I think what you wanted me to do was to add the code in an inline js tag. Is this right? – user109162 Jun 12 '09 at 03:32
  • I am going to post some additional code up top to my original post with some comments. – user109162 Jun 12 '09 at 03:33
  • Frank: directly after that code ends (inside the #Save function), put WYSIWYG.updateTextArea('report'); and THEN try alert($("#report").val()); – Paolo Bergantino Jun 12 '09 at 03:40
  • Yes Paolo, you're right, (as always. :) ) I just did that and it works. :) Thanks so much! and a huge thank you to Jonathan too! You guys are great. – user109162 Jun 12 '09 at 03:47
  • nutjob: You should probably accept Jonathan's answer as he spent a lot of time trying to help out. :) Glad it works. I'll get on that little project soon by the way I'm sorry I haven't started yet just been busy. – Paolo Bergantino Jun 12 '09 at 03:49
  • glad things got resolved and thanks for the accepted answer – Jonathan Fingland Jun 12 '09 at 03:49
  • No problem Jonathan, I'm just sorry I made you work so hard for it. :) – user109162 Jun 12 '09 at 03:58
  • No problem Paolo. This is the grunt work (at least to me anyhow) for that project. I want to be able to hand it to you so that it will be really straight forward. When this is done, I am taking a vacation. :) – user109162 Jun 12 '09 at 03:59
  • Actually Jonathan, can I ask a question about the editor code? Are you just simply changing the value from something other than what it was expecting? Kind of like changing or "setting" a class member in php? – user109162 Jun 12 '09 at 04:02
  • you mean this: WYSIWYG.updateTextArea('report');? openwysiwyg calls that same function in the onSubmit event handler and when it performs a "save". All we're doing there is calling the same function they use internally. Or did you mean something different? – Jonathan Fingland Jun 12 '09 at 04:12
  • Well, like with php, I can "dynamically" change my internal class params by using a set method and I was wondering if this was the same sort of thing. I mean, it seems like you are calling the same WYSIWYG.updateTextArea() function as what is in the editor source code. I'm confused how this is working.. Are you just overriding the internal editor's function? – user109162 Jun 12 '09 at 04:22
  • your code "overrides" the editor's normal behaviour by changing the onclick handler for #save. Part of that original behaviour was to update the text area. Your code needed to call that same update to accomplish what you wanted. However, also, with openwysiwyg you can do: WYSIWYG.setSettings('report',settings) to change the settings. – Jonathan Fingland Jun 12 '09 at 05:38

6 Answers6

2

EDIT

var report  = $("textarea#report").val();

should be working, however, if you're referencing it by id, then you don't need to use textarea as well

var report  = $("#report").val();

would be equivalent

Also, Are you sure about the name. no typos?

Edit

with OpenWYSIWYG, use WYSIWYG.updateTextArea('report'); before calling the value via javascript

Community
  • 1
  • 1
Jonathan Fingland
  • 56,385
  • 11
  • 85
  • 79
  • Thanks Jonathan. I tried changing the val() to text() but it still isn't working. Here is the query string, spo=N/A&report= – user109162 Jun 12 '09 at 00:53
  • @nutjob: could you include the html you're using? might just be a typo – Jonathan Fingland Jun 12 '09 at 00:54
  • Hi Jonathan, I posted my html above. I also tried your edit but still nothing.. Thanks for helping. – user109162 Jun 12 '09 at 01:05
  • Paolo, I think you're wrong as of jQuery 1.3. The selector engine now works right to left. So in this case it'd grab all elements with id #report and then filter by textarea. – cdmckay Jun 12 '09 at 03:53
  • cdmckay: Interesting. You got a link for that? – Paolo Bergantino Jun 12 '09 at 03:58
  • @Paolo, I had heard the same thing as well. The selector engine changed a while back specifically to address the problem you mentioned. I couldn't find a link for it when I checked after your comment. I'm on the dev mailing list for jquery so I might have read it there. – Jonathan Fingland Jun 12 '09 at 04:05
  • Yeah I've got a bunch of links opening trying to get to the bottom of it right now. I thought I had heard something similar but earlier today I saw a user here mention that it still behaves this way. I am also trying to track down that question (can't remember for the life of me). I'd really like to know one way or the other. – Paolo Bergantino Jun 12 '09 at 04:08
  • Wasn't able to find any links, exactly, but I contacted John Resig (author of jQuery) directly and he said: jQuery evaluates selectors right to left - and it does filter tag#id properly. – Paolo Bergantino Jun 12 '09 at 19:29
  • thanks. I saw you asked on twitter but I never saw his response. guess it was by direct message. Good to have an authoritative response on it – Jonathan Fingland Jun 13 '09 at 01:50
  • @Paolo: I hadn't read it anywhere, I hear Resig say it in one of his talks :) – cdmckay Jun 16 '09 at 04:42
  • @cdmckay: ahhh, that's probably where I heard it as well. His yui theater talk if I remember correctly – Jonathan Fingland Jun 16 '09 at 05:40
0

That syntax should work. Step through the execution with a took like firebug to find out what's causing Javascript to fail. Also, see:

jQuery get textarea text

Community
  • 1
  • 1
karim79
  • 339,989
  • 67
  • 413
  • 406
  • Thanks Karim! I will check it out now. You're right.. something is causing it to fail. – user109162 Jun 12 '09 at 00:54
  • The link is greek to me. It seems that the syntax used in that post is exactly what was offered here. :( I have firebug and I have been looking through it but I don't know how to "step through" the js. Can you please tell me how to do that? Maybe I can see something in there. – user109162 Jun 12 '09 at 00:58
0

Also, be sure that you have the correct id. Try:

alert($("textarea#report").length);

Also check to make sure you didn't prepend the id with a #. I find what I do sometimes by accident is this:

<textarea id="#report"></textarea>

...instead of...

<textarea id="report"></textarea>
cdmckay
  • 31,832
  • 25
  • 83
  • 114
0

I would suggest that you run your whole page through a validator since it looks like your code should work. Also, are you doing it inside of a $(document).ready() function? If not, you might be executing the code before the page is fully loaded.

Dave Markle
  • 95,573
  • 20
  • 147
  • 170
0

I just tried the following in asp.net MVC 1.0 and it worked fine: var rpt = $("#report").val(); alert(rpt);

The correct way is to use the id as shown above. Though $("textarea#report") will also work but it is slower. $("#report") uses DOM method getElementById and is the fasted way to get an element reference. Please keep in mind the ids are case sensitive.

  • Hi Momin, for some reason it won't work. I have tried just using the element's id but it wtill won't work. The query string is just blank for the report – user109162 Jun 12 '09 at 02:27
  • Momin, I failed to see the alert on the end of your code. I tried it like you have it and I get [object object] – user109162 Jun 12 '09 at 02:30
0

try using simple javascript getElementById method and see if that works as following:

alert(document.getElementById("report").value);

if that works that jquery might have a problem and you might need to debug it using the debug version of jquery.