请问一个ajax的问题

kr2000

情况如下：
有一个页面A,上面有一些html内容和一个按钮。
点按钮弹出页面B,上面有个form.
B的form提交以后用ajax更改A的内容而不用刷新A.
怎么实现？

我只做过在同一页面的这个功能。想过用B作为一个A的div，但有一定技术问题。

dalaohu

haha 百忙中還抽空編程 啊。

這個一般現在 B 都是 DIV 啦。 不popup 獨立的browser了。

都在一頁上，你愛怎麼玩，就怎麼玩。

dalaohu

跟 battle.net 上那個登錄一樣的 效果。:)

kr2000

原帖由 dalaohu 于 2010-9-27 15:14 发表
haha 百忙中還抽空編程 啊。

這個一般現在 B 都是 DIV 啦。 不popup 獨立的browser了。

都在一頁上，你愛怎麼玩，就怎麼玩。

我就是个程序员啊，不编程没饭吃了
现在问题是A其实是一个很复杂的form，有很多个条目要更新
B是更新这些条目中的一条，还有C, D, E...如果把它们都写在A里面，A就更复杂了
还有就是其他地方也要用到B。所以就想把它弄成一个新的页面。

dalaohu

user control mate

cdfei

在A页面开个javascript方法，然后再B页面调用window.opener.方法（）

dalaohu

原帖由 kr2000 于 2010-9-27 15:21 发表

我就是个程序员啊，不编程没饭吃了
现在问题是A其实是一个很复杂的form，有很多个条目要更新
B是更新这些条目中的一条，还有C, D, E...如果把它们都写在A里面，A就更复杂了
还有就是其他地方也要用到B。所以就想把它弄成一 ...

吧那個 div 放在 一個 user control 就夠了， 你的 B, C, D , E 都call 這個control  to popup,
你call這個control 是pass in Field Id/name 就可以了， on this control submit , call a service to submit the data.

on the call back, close this div, and refresh your main form (A).

all done on client script.

kr2000

原帖由 dalaohu 于 2010-9-27 15:31 发表
user control mate

看不懂(paopaobing(77))

kr2000

原帖由 cdfei 于 2010-9-27 15:32 发表
在A页面开个javascript方法，然后再B页面调用window.opener.方法（）

这东西，我还没用过
谢谢分享。今天只有1分了，还是明天给你加吧

kr2000

原帖由 dalaohu 于 2010-9-27 15:47 发表


吧那個 div 放在 一個 user control 就夠了， 你的 B, C, D , E 都call 這個control  to popup,
你call這個control 是pass in Field Id/name 就可以了， on this control submit , call a service to submit the data ...

你说的很有道理，有部分可以用你的
但有个问题，A里面的条目不都是同一类。每一类的内容还不一样，所以要不同的form来处理。太麻烦了。

dalaohu

原帖由 kr2000 于 2010-9-27 15:54 发表

你说的很有道理，有部分可以用你的
但有个问题，A里面的条目不都是同一类。每一类的内容还不一样，所以要不同的form来处理。太麻烦了。

同類的放在一個 control 裡， 不同類的放在不同的control裡。
但也可以放在一個control 裡。 那這個control 要handle 不同的類。

kr2000

原帖由 dalaohu 于 2010-9-27 16:01 发表


同類的放在一個 control 裡， 不同類的放在不同的control裡。
但也可以放在一個control 裡。 那這個control 要handle 不同的類。

你说的这个control里的form是写在html里hidden通过js显示，还是通过js来生成？

dalaohu

原帖由 kr2000 于 2010-9-27 16:07 发表

你说的这个control里的form是写在html里hidden通过js显示，还是通过js来生成？

忘了你是寫php的吧？

。net的user control 就是 markup + code

你php裡如果沒有這東西的話， 純。js file 當作這個control 用也行。
反正這control 就是take some passed-in params, and perform db update logics

o2h2o

试试 windows.parent 和windows.opener 来控制两个页面
但是 也许有浏览器的安全限制,不一定能在 所有的 浏览器里面都更改,更改另外页面的东西

dalaohu

原帖由 kr2000 于 2010-9-27 16:07 发表

你说的这个control里的form是写在html里hidden通过js显示，还是通过js来生成？

你call service 來update db 的話，你都不需要form， 直接js 都 text box 裡的值， pass 給 service 好了。

kr2000

原帖由 dalaohu 于 2010-9-27 16:21 发表


你call service 來update db 的話，你都不需要form， 直接js 都 text box 裡的值， pass 給 service 好了。

我就是想问问你这些input fields是隐藏的，用js显示，还是用js生成。用js生成代码我觉得挺麻烦。这是我写的生成一个radio选项和一些信息

1. html +="<tr class=row";
   
2. html +=r_span;
   
3. html +="><td><input type='radio' id=existing_donor_organisation";
   
4. html +=j.id;
   
5. html +=" name="donor_organisation" value=";
   
6. html +=j.id;
   
7. html +=" onClick="donor_organisation_click()"></td><td>";
   
8. html +=name;
   
9. html +="</td><td>";
   
10. html +=j.abn;
    
11. html +="</td><td>";
    
12. html +=j.street_address;
    
13. html +="</td><td>";
    
14. html +=j.supplemental_address_1;
    
15. html +="</td><td>";
    
16. html +=j.suburb;
    
17. html +="</td><td>";
    
18. html +=j.state;
    
19. html +="</td><td>";
    
20. html +=j.postcode
    
21. html +="</td></tr>";

复制代码

里面不能加半个引号，也不能加换行，只能一行一行的＋＝起来
怎样可以生成大段html不用＋＝？
radio的id有部分是ajax获取的，搞的我连引号都没打

dalaohu

就div 加 html inputs，html 不用hide。只要div 用css hide就好了。

html inputs 不用js生成。normal的就好了。

kr2000

我上面这个radio选项是db里读出来的，选项数量不固定，只能用js生成。没办法。js生成html没有好看点的方法吗？

dalaohu

有啊
jquery有个data template plug
you can bind a a collection to a pre defined html template

Google jtemplate or something like that

coolioo

1. html = "<li id='li1'>\
   
2.            <table>\
   
3.                   <tr>\
   
4.                         <td>test</td>\
   
5.                  </tr>\
   
6.           </table>\
   
7.         </li>"

复制代码

dalaohu

不是这样的啦

晚上有空我写个小样吧。我也好久没碰这个le

dalaohu

很久以前写的一个demo， Ajax binding data collection to a template. 你看看中不中。

用到的是jQuery, jTemplate, BlockUI

   
<script type="text/javascript">
    $("#btnJTemplate").click(function()
    {
        $.ajaxDotNet(webserviceUrl + 'GetAllCustomerJSJson', {
            verb: 'POST',
            success: function(obj)
            {
                var data = {
                    name: 'Get all firstname = "Jon"',
                    //list_id: 4,
                    table: JSON.parse(obj.d)
                };
                $("#result1").setTemplateElement("template");
                $("#result1").processTemplate(data);
                //block UI
                $("#result1").block({ message: "Loading...", centerX: false, centerY: false,
                    css: { top: '0%', left: '80%',
                        height: '30px', width: '150px',
                        backgroundColor: '#ff0000', border: 'none', color: '#fff'}
                    });
                    setTimeout(unblock, 2000); //unblock after 2 secs
                },
                other: function()
                {
                    //Do Everything else
                    alert("get all Program aborted");
                }
            });
        });

    function unblock()
    {
        $("#result1").unblock()
    }
</script>

<a href="#" id="btnJTemplate">Get All FirstName='Jon'</a>

(Call WCF service, display data in table, Gmail style loading)
                <!-- Template content (Valid XHTML 1.1) -->
                    <p style="display:none">
                        <textarea id="template" rows="0" cols="0">
                        <![CDATA[
                                <strong>{$T.name}: {$T.list_id}</strong>
                                <table>
                                    <th>ID</th><th>Title</th><th>FirstName</th><th>LastName</th>
                                        {#foreach $T.table as record}
                                        <tr>
                                                        <td>{$T.record.ContactID}</td>
                                                        <td>{$T.record.Title}</td>
                                                        <td>{$T.record.FirstName}</td>
                                                        <td>{$T.record.LastName}</td>
                                        </tr>
                                        {#/for}
                                </table>
                        ]]>
                        </textarea>
                    </p>
                     <div id="result1" class="jTemplatesTest"></div>

乱码

6楼的cdfei回答了你最初的问题。

kr2000

原帖由 dalaohu 于 2010-9-27 18:50 发表
很久以前写的一个demo， Ajax binding data collection to a template. 你看看中不中。

用到的是jQuery, jTemplate, BlockUI

   

    $("#btnJTemplate").click(function()
    {
        $.ajaxDotNet(webservice ...

这个BlockUI太有用了。老大你的经验太丰富了。(paopaobing(84))

kr2000

原帖由 乱码 于 2010-9-27 21:41 发表
6楼的cdfei回答了你最初的问题。

我就想着这帖子应该会把你引进来

dalaohu

簡單的div popup 你直接手寫好了，不過blockui也挺好用的。

不建議你用那什麼windows.opener, 太傻了， 十幾年前的東西。 而且你popup一個new browser 那還叫啥ajax

kr2000

你说的有理
我试试把popup写在block里吧
之前想new browser用fancebox之类的popup，用户感觉不出来.

cdfei

还是要看情况，有一些输入复杂的还是可以用popup window，A页面的刷新可以用AJAX，看LZ的具体情况了。

典

我觉得我们项目里做的东西跟LZ说的要求很类似
一个主页面A (比如说订单列表)
用户Click某个订单的客户，就弹出客户资料(页面B, 其实是个DIV)
用户想做个处理比如加notes等并Process, 就弹出页面C,其实是同一个DIV,只是DIV的中部被替换了
用户想对某个订单输入一些附加资料，点击订单的某个地方弹出页面D,其实还是同一个DIV,只是DIV中的某些部分被替换

主页面A是保持不变的，除非因为资料输入后需要改变主页面A的内容,
这个弹出式DIV框架保持不变(HEAD / FOOT / BODY )
DIV的Body部分要替换则有多种方法，可以在Server 端直接生成HTML Part , 再传给客户端(for-example ajax_customer.aspx will return some html elements to describe customer details) ，也可以把数据传给客户端，在客户端生成HTML Element. 在客户端生成HTML Element 可以用你提到的html string （html+=）的方法，复杂的话显然应该用DOM方式( for example, create a table element, then add row elements to the table element)

[ 本帖最后由 典 于 2010-9-28 22:05 编辑 ]