[問題]JQuery + php@callback and reload data

Programmer

搞左好耐都唔得
我想整3/4個 dropdown list box (Product category....), 當user change category ge 時候,
會用 php 重新去 database load 過 d product, 但唔要跳畫面
e + 入到 call back success function
但個 Page 無轉到....
有無 example?

kau

Check this out!
http://remysharp.com/2007/09/18/ ... tiple-select-boxes/

Programmer

Check this out!
kau 發表於 2010-11-24 16:26

Thank you for your help...
試左, 唔知點轉做 drop down list box and
唔知點轉 reload page, 個sample 只係 upload 另一個 list box..

kau

唔知點轉做 drop down list box
Programmer 發表於 2010-11-25 10:02

    Dropdown:

1. <select id="categorySelect" name="category" size="5">
   
2. vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
   
3. <select id="categorySelect" name="category">

複製代碼

當user change category ge 時候,
會用 php 重新去 database load 過 d product, 但唔要跳畫面

唔知點轉 reload page, 個sample 只係 upload 另一個 list box..

你想dynamically generated的data用非select的方式顯示？
html table?咁你可以改select-chain.js，改做auto-generate html table都ok架

Programmer

Dropdown:

你想dynamically generated的data用非select的方式顯示？
html table?咁你可以改select-c ...
kau 發表於 2010-11-25 12:28

Thank you
    I don't know how to detect the dropdownlist on change event. and where and how should I place the coding on (Client or server side)?

kau

回復 6# Programmer
in select-chain.php, it *imports/requires/includes* jQuery and the select-chain package when it is rendered in browsers to enable the magic.

You can then find the following JS code. It is the select-chain-package-controller.

You will need to configure it, set the target to fit your design.

1.     <script type="text/javascript">
   
2.     <!--
   
3.     $(function () {
   
4.         var cat = $('#categorySelect');
   
5.         var el = $('#elementSelect');
   
6.         var attr = $('#attributeSelect');
   
7.         
   
8.         el.selectChain({
   
9.             target: attr,
   
10.             url: 'select-chain.php',
    
11.             data: { ajax: true, anotherval: "anotherAction" }            
    
12.         });        
    
13. 
    
14.         // note that we're assigning in reverse order
    
15.         // to allow the chaining change trigger to work
    
16.         cat.selectChain({
    
17.             target: el,
    
18.             url: 'select-chain.php',
    
19.             data: { ajax: true }
    
20.         }).trigger('change');
    
21. 
    
22.     });
    
23.     //-->
    
24.     </script>

複製代碼

By default, the remysharp jQuery module auto-populates the dynamic data using the HTML Select-Option tag.

If you want to display them as Table or whatever, you need to edit select-chain.js. The magic begins on line 31. Below is the code block to inject the dynamic data to the predefined "target" in controller.

1.                     success: function (j) {
   
2.                         var options = [], i = 0, o = null;
   
3.                         
   
4.                         for (i = 0; i < j.length; i++) {
   
5.                             // required to get around IE bug (http://support.microsoft.com/?scid=kb%3Ben-us%3B276228)
   
6.                             o = document.createElement("OPTION");
   
7.                             o.value = typeof j[i] == 'object' ? j[i][settings.key] : j[i];
   
8.                             o.text = typeof j[i] == 'object' ? j[i][settings.value] : j[i];
   
9.                             settings.target.get(0).options[i] = o;
   
10.                         }

複製代碼

So you may want to modify the for-loop to suit your need

Programmer

回復  Programmer
in select-chain.php, it *imports/requires/includes* jQuery and the select-chain pa ...
kau 發表於 2010-11-25 14:12

Thank you
I have been try a day, finally I got a lot of error. one of that is "Object doesn't support this property or method" in php file. May I request again, Please tell me if you have simple example.

Programmer

Push

zetalau

ajax + $(xxx).html() !??