Load with ajax doesn't work since upgrade > 1.6

[Michael Helbling]

Hello everybody

First of all to avoid this question: Yes I copied the appadmin and javascript file from the welcome app to my own app ;-)

My Problem is, that some LOAD(ajax=True) doesn't work any-more (but not all loads with ajax). If I change it to LOAD(ajax=False) it works. So it seems there is some problem with the javascripts.

1. Description of the setup

1. {{=DIV(LOAD(f='getSelection.load', args=request.args, ajax=True), _id='Workspace')}} #I load a selection in the View --> This Load WORKS

2. SELECT(selOptions, _size=15, _name='o_id', _onclick="\
               ajax('"+URL(r=request,args=[nav_id,tool_id,ntt_id],f='getForm')+"',['o_id'],'Workspace');", _class='ff_wide') #In the selection is an onclick event that works too - it loads the form of an order

3. IMG(_src=URL('static','images/i24_save.png', extension=True), _title=T('Save only'), _border=0, _style='cursor:pointer;',\
                             _onclick="ajax('"+URL(r=request,args=[nav_id,tool_id,ntt_id,'save'],f='saveCustomer')+"',"+ajaxVars+",'Workspace');") #In the form is an onclick event to the function 'saveCustomer'

4. return LOAD(f='getForm', args=request.args, vars=rvars, ajax=True,target='Workspace') #saveCustomer returns a LOAD to load the Form again

5. The Form doesn't load, the page just displays "loading..." and the "Workspace" content looks as follows:
   <div id="Workspace" data-w2p_remote="/sipadm/registration/getForm.load/1/1/1/save?c_id=114999&amp;c_type_id=10&amp;city=Fribourg&amp;clwarn=&amp;comments=&amp;company=&amp;countrycode=ch&amp;creditlimit=0.00001&amp;firstname=Alessia&amp;i_account=0&amp;i_customer=0&amp;i_product=9&amp;isAccountReg=value&amp;langcode=fr&amp;&amp;login=41325102428&amp;mobile=&amp;nzip=1700&amp;o_billing_date=&amp;o_id=131643&amp;o_verify_date=&amp;pa_id=1&amp;phone=021+905+41+11&amp;salut=Madame&amp;sip_id=24141&amp;status_id=0">loading...</div>
   

If I replace in step 4 the ajax=True through ajax=False it works... If I copy the link in data-w2p_remote to the address bar, it works too..

An other example is our Mail Form. Its a simple page with a Mail Form (From:, To:, etc.) and at the bottom we have a Attachment Form embedded with a load: LOAD(c='mail',f='attachForm',args=args,vars=request.vars, ajax=True)

In the HTML the div looks like: <div id="c921071710755" data-w2p_remote="/sipadm/mail/attachForm/3/13/0/202?mail_id=202">loading...</div>
The path is correct, i can copy the data-w2p_remote path to the address bar and it loads perfectly. Our productive system runs still on web2py 2.5.1. This problem occurs just on our staging system (web2py 2.7.2) since we upgraded it to >2.6.0 with the identical code.

2. What I tried to fix it

1. after updating, all Loads didn't work, so i had to copy the web2py.js and appadmin from the welcome app to all our apps, then ~50% of the loads worked
   
2. i tried to delete all js in the app and copied all new from the welcome app, still no change (jquery was updated through this copy to 1.10.2)
3. i compared the generic views and the layout.html with the welcome app, but there are no differences depending on the js
4. i replaced the web2py_ajax.html in the app with the new one. 
5. The permissions on the files are ok (made after every change a chown -R on the folder) and i restartet uwsgi after every change
   

But there is still no change.

The Firefox debugger shows me a js failure on the loading page: [11:32:39.259] Empty string passed to getElementById(). @ jquery.js:3
But i don't know if this is the root of the issue or not. 50% of the jquery script is on line 3, so i don't know which part causes this failure. i tried to insert more line brakes to the jquery script, but after that nothing worked anymore...

Has anyone an idea, what the root of this issue could be? Or how to find out, which part of the jquery script causes the getElementById failure? 

I'm fighting with this problem since a few days and i don't know what to try anymore... 

Best Regards

Michael

[Massimo Di Pierro]

You need to copy web2py.js from the latest welcome app into your old app.

[Michael Helbling]

Yes, i already copied the web2py.js, appadmin controller and views from the latest welcome app to all my apps.
Without copying the web2py.js, no load worked. But even with the latest web2py.js, not all loads are working. that's my problem and i don't know why some load doesn't work. In version 2.5.1 with the old web2py.js all loads worked and in version 2.7.1 with the new web2py.js ~30% of the loads in our app don't work anymore.

as described, i don't know what to try anymore. May you can give me a hint what i could try additionally?

[José Luis Redrejo]

I have the same problem since 2.6.1 and, also, after copying those
files without sucess I've got it working replacing the file
gluon/compileapp.py with the one from version 2.5.1. You can get that
web2py version from
http://web2py.com/examples/static/2.5.1/web2py_src.zip.
I haven't had time to investigate the changes between both versions
(I've checked the diff is pretty small), but it's a workaround that
saved my day.
Hope this helps.
José L.

2013/10/10 Michael Helbling <helbling...@gmail.com>:

> --
> 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.
> For more options, visit https://groups.google.com/groups/opt_out.

[Niphlod]

is jquery.js preceding web2py.js in your layout.html ?

[Michael Helbling]

yes, jquery.js and web2py.js are configured in web2py_ajax.html and jquery.js is preceding web2py.js:
{{
response.files.insert(0,URL('static','js/jquery.js'))
response.files.insert(1,URL('static','css/calendar.css'))
response.files.insert(2,URL('static','js/calendar.js'))
response.files.insert(3,URL('static','js/web2py.js'))
response.files.insert(4,URL('static','js/jquery.blockUI.js'))
response.include_meta()
response.include_files()
}}


The workaround from José works. After replacing the compileapp.py through the old one, every load is working again. I'll take a closer look at the file in the afternoon.

[Michael Helbling]

These differences between the old and the new compileapp.py are making the difference between working and not working:
173,178c174,177
<             statement = "web2py_component('%s','%s');" % (url, target)
<         script = SCRIPT(statement, _type="text/javascript")
<         if not content is None:
<             return TAG[''](script, DIV(content, **attr))
<         else:
<             return TAG[''](script)
---
>             statement = "$.web2py.component('%s','%s');" % (url, target)
>         attr['_data-w2p_remote'] = url
>         if not target is None:
>             return DIV(content, **attr)


the new code returns the DIV with the attr "data-w2p_remote"=url. this generates such div:

<div id="Workspace" data-w2p_remote="/sipadm/registration/getForm.load/1/1/1/save?c_id=114999&amp;c_type_id=10&amp;city=Fribourg&amp;clwarn=&amp;comments=&amp;company=&amp;countrycode=ch&amp;creditlimit=0.00001&amp;firstname=Alessia&amp;i_account=0&amp;i_customer=0&amp;i_product=9&amp;isAccountReg=value&amp;langcode=fr&amp;&amp;login=41325102428&amp;mobile=&amp;nzip=1700&amp;o_billing_date=&amp;o_id=131643&amp;o_verify_date=&amp;pa_id=1&amp;phone=021+905+41+11&amp;salut=Madame&amp;sip_id=24141&amp;status_id=0">loading...</div>

it seems the data-w2p_remote isn't loaded by a javascript sometimes. i tried to reproduce it and found out, that a LOAD inside an ajax call doesn't work anymore...

I made a few small test functions in the default controller:
Default Controller:
def test():
    return dict()

def test2():
    ret = DIV(XML("test2 <br>"))
    ret.append(LOAD(f='test3', ajax=True))
    return ret

def test3():
    ret = DIV(XML("test3 <br>"))
    return ret

View default/test.html:
{{extend 'layout.html'}}
test1
<div id='test'><button onclick="ajax('{{=URL(f='test2')}}',0,'test')">test</button></div>


When you click on the button, you get the page "test2". But the load in test2 ends with this div:
<div id="c270315183709" data-w2p_remote="/sipadm/test3">loading...</div>


This scenario works in web2py 2.5.1... I tried the test functions in version 2.7.2 and 2.5.1. In 2.5.1 this code works and in 2.7.2 it doesn't work anymore...


Have you any idea, how to fix this properly?

[Niphlod]

can you pack a minimal app to reproduce the behaviour please ? I can't reproduce the issue you're seeing

[José Luis Redrejo]

Movuca app from Bruno, available at Github has this behaviour.

--

[Niphlod]

talking about minimal app, heh.... anyway, better than nothing.
taken movuca, setupped, doesn't work (as advertised in web2py's changelog).
Take web2py.js from welcome and overwrite web2py.js in /static/bootstrap/js/web2py.js
Next issue, movuca ships jquery 1.7.1 (november 2011).
web2py.js requires something jquery having $.parseHTML ... update jquery too and you'll only receive a problem about bootstrap-transition.js, that is trying to do something with the (now unsupported) $.browser.
Update bootstrap-transition.js and movuca works like a charm.

tl;dr : movuca just needs a few upgrades to work, and all errors "after" replacing web2py.js are as clear as they can be in any browser debugger (like, $.parseHTML is not a function)

This raises a question though (I thought it was "implicit"): @helbling: do you see any errors in the browser debugger that can at least point out where the issue lies ?

[José Luis Redrejo]

El 11/10/2013 21:52, "Niphlod" <nip...@gmail.com> escribió:
>
> talking about minimal app, heh.... anyway, better than nothing.

I know, but I am answering from my phone, without a PC available ;)

> taken movuca, setupped, doesn't work (as advertised in web2py's changelog).
> Take web2py.js from welcome and overwrite web2py.js in /static/bootstrap/js/web2py.js
> Next issue, movuca ships jquery 1.7.1 (november 2011).
> web2py.js requires something jquery having $.parseHTML ... update jquery too and you'll only receive a problem about bootstrap-transition.js, that is trying to do something with the (now unsupported) $.browser.
> Update bootstrap-transition.js and movuca works like a charm.
>

I will check it again, maybe I made some mistake copying those files, but I knew this has to be done.

Thanks

> tl;dr : movuca just needs a few upgrades to work.

[Michael Helbling]

Dear Niphlod

Attached is a minimal App. In w2p 2.7.2 i just created a new simple application and inserted the test code, I posted last time. The load of "test3" doesn't work and in the div is just "loading..."

I tried it on 2 different pcs (at home and work) in firefox and chrome, so the client shouldn't be the problem. Can you reproduce the problem with the attached app? the whole code is original, except the 3 test functions in the default controller and the view default/test.html

[Niphlod]

of course it doesn't..... but it won't work even with pre-2.6.0 releases ..... you aren't including the template which holds the js to load the component! :D 

[Michael Helbling]

hmm, in the view test.html is the layout included, in the layout the web2py_ajax.html and there are the js included.? :S
do you mean the web2py_ajax.html?

i tried to copy the app to w2p 2.5.1 too, but it seems there were some changes, that needs more changes to migrate an app to a lower version :/ sorry, i didn't test this direction before..


if i create a new simple app in w2p 2.5.1, insert the code for the test functions and views. It works. I attached the app from 2.5.1 (web2py.app.test251)

then i packed the app and installed it in w2p 2.7.2. After this, i copied the web2py.js, jquery.js and appadmin controller/view as in the changelog described. But the load still doesn't work. I attached this app too (web2py.app.test272.w2p)
are there more files that needs an update? *i'm not sure which template you mean

[Niphlod]

You aren't using any view if you return raw HTML tags (as in return DIV('...'))

[Michael Helbling]

Yes, but there was no need to load the js two times on the same page < 2.6. Even if there was an ajax call between the initially page load and the LOAD.
if you import the web2py.app.test251.w2p into w2p 2.5.1, you will see, this behavior worked before the upgrade. And there are a lot of these Loads in 7 different applications.

Do you mean something like this?

def test2():
    ret = DIV(XML("test2 <br>"))

    ret.append(XML("<script src='/test272/static/js/jquery.js' type='text/javascript'></script>"))
    ret.append(XML("<script src='/test272/static/js/web2py.js' type='text/javascript'></script>"))

    ret.append(LOAD(f='test3', ajax=True))
    return ret

*This works :/ but this will cause a lot of work to find and expand every ajax call which has a LOAD in it.

If you have an idea, how to solve this properly in an other way, please let me know.
Else, thanks a lot for your support and patience! It's good to know the reason, even if I can not solve it immediately :D

[Niphlod]

wait a sec. before (< 2.6.0) the js to "trigger" the load was inlined, but web2py.js HAD to be available nonetheless to make that happen. What's changed is that now web2py.js takes also care of the "trigger".

def test2()
    ret = DIV(XML("test2 <br>"))

    ret.append(LOAD(f='test3', ajax=True))
    return ret

def test3():
    return DIV('test 3')

Opening test2 as it is and hoping that it loads test3 doesn't work in  > 2.6.0 AND doesn't work in < 2.6.0 , because neither test2 nor test3 load web2py.js.

[Michael Helbling]

this load works in 2.5.1 (please take a look at web2py.app.test251.w2p). ;-)

the web2py.js is available on the page, because it is imported in test(), and the trigger was able to call this js.

[Niphlod]

yep, but that's because ajax() doesn't raise a finger when talking about components: ajax() is meant to submit form values to an action, not to load components....

In fact, the recommended way (that continues to work) for the functionality you want is to use

A('test', callback=URL(f='test2'), target='test')