How to send contenteditable to web2py AJAX call

[Rob Paire]

Hi All,

I am trying to send data entered into the contenteditable feature of a row object using a Web2py AJAX call, and it's not working. 

The problem is illustrated below in a sample View file with two Ajax calls. The first call, from the manual, uses an input form variable and it works fine. In second call I tried passing the Name of the editable content object to the AJAX call, but it does not work. In short, I want to send document.getElementById('q').innerHTML as the data parameter of the ajax function - how is this done?  I tried various combinations of dict strings {'key':'value'} as the data parameter but nothing seemed to work.

Note: the controller data function looks for both r and q request.vars 

{{extend 'layout.html'}}

<div id="target"></div>

<p>Ajax call example from the manual works perfectly.. the data appears in the target Above.</p>

<form>

<INPUT type="text" id="r" name = "r" value="web4py"/>

<INPUT type="button" value="submit"

       onclick="ajax('{{=URL('data')}}',['r'],'target');"/>

</form>

<hr>

<table border="1" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" align="center">

<TR>

<td COLSPAN="1" align="right" BGCOLOR="#EAACE1">  <b>

This AJAX call does not work:</b> </td> <td 

onfocusout="ajax('{{=URL('data')}}',['q'],'target');"   contenteditable="true" id="q" name="q" COLSPAN="1" > ajaxdata </td>

<td COLSPAN="1"> how do I pass the contenteditable data M to the AJAX function? </td>

</tr>

</table>

Thank you kindly

-Rob

[Clemens]

Hi,

currently I'm in hurry. Thus, only a quick help by hint:

In your second, non-working example, I can't find a the target which is addressed by your call (first example from documentation it's <div id="target"></div>)

And why do you want a ajax action for the <td>, because it's static. What do you want to archive by this? Maybe there is an easier way for that.

Best regards
Clemens

[Rob Paire]

Hi Clemens

Appreciate your comments. Both calls have the same target - it's the first tag in the HTML. 

The property of contenteditable has been applied to the TD so it is no longer static, but in fact the user can edit it. 

In the finished product there will be a large HTML table or grid that the user can edit and the goal is to use an AJAX call to send the data back to the server one cell at a time, or maybe I will loop the table object once looking for changes. The table will be fixed length of around 150 rows. 

I know all this can be done with the form generator in Web2py but I inherited the HTML and it looks good, only problem is how to save the input data. 

My backup plan is to put a hidden form with one input and use that form variable as a proxy to make the AJAX call. This kind of hacky solution goes against the grain and it's seems like there has to be a better way. 

-Rob

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/JbVMYAjnFsw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/f2c060de-1017-41c5-bf6f-08356433ba71o%40googlegroups.com.

[AGRogers]

Is there a reason you can't use the standard js or jquery ajax calls? Then you can build your own data structures easily and see exactly what is going where. I found things easier to debug that way. 

The only time I use the web2py one is when I want to send a web2py form back to the controller. It handles that elegantly. 

But you are not using a web2py form I don't think. 

You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/CACSwhqGUo57SzoUHPhPn8Ne3dMoAoPWxTe8hpVLL%3Ddx%3D5f4a0A%40mail.gmail.com.

[Rob Paire]

Exploring native JS AJAX calls is an excellent suggestion.

I am new to AJAX calls and haven't explored possibilities other than the Web2py call. 

As you rightly guessed I am having trouble debugging the calls. Incorrectly formed AJAX W2P calls fail silently - they don't usually throw an error message which leaves me guessing it's something in the W2P JavaScript include file. 

Sounds like I am moving towards debugging the actual function call itself to get my solution. Open source is wonderful! 

-Rob

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/CACWMBMMrPMauipm61M39aN0Mm8ZK%2BszJU%3DtGxz30cm3m1MG_Cw%40mail.gmail.com.

[Rob Paire]

So I stepped through the Web2py AJAX call in the debugger and found that the hang-up was due to jquery serialize method. That method wants a form variable name as input. The easiest solution is to wrap the table in a set of form tags and then modify the TD so that it contains a form input object like this:

<td> <INPUT type="text" id="s" name = "s" value="ajaxdata" onfocusout="ajax('{{=URL('data')}}',['s'],'target');"/> </td>

now the ajax call works as expected. A dash of CSS to hide the field borders and the end results look acceptable!  

Thank you for all  your help

[AGRogers]

Thanks for update. 

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/6b8bc494-d26d-4136-bb02-2cbc4b498f14o%40googlegroups.com.