Witam,

staram się przerobić funkcje http://codeassembly.com/Simple-chained-com...gin-for-jQuery/ na swoje potrzeby.

Generalnie ma to działać tak, że po wybraniu kategorii pojawia się kolejny combobox z podkategoria (i tak w kółko).

W związku z tym musze dokonać modyfikacji:
- dynamiczne przekazywanie danych z BD - z tym nie mam problemów
- zamiast ukrywać pola formularza, dynamicznie je dodawać - z tym też powinienem sobie poradzić
- wywoływać funkcje z powyższego linku rekurencyjnie. Obecnie działa to tak, że w sekcji head funkcja ta jest wywoływana 2 razy - dla każdego z pół formularza z podkategoriami. Tutaj mam problem - nie wiem za bardzo jak to rozwiązać. Wyobrażam to sobie tak, że wewnątrz wywołania funkcji w momencie wybrania kategorii, funkcja wywoływana jest z kolejnymi atrybutami.

Czy takie rozwiązanie zadziała?

Oryginalne wywołanie:
  1. <script language="JavaScript" type="text/javascript">
  2. $(function()
  3. {
  4. $('#country').chainSelect('#state','/examples/jquerycombo/combobox.php',
  5. {
  6. before:function (target) //before request hide the target combobox and display the loading message
  7. {
  8. $("#loading").css("display","block");
  9. $(target).css("display","none");
  10. },
  11. after:function (target) //after request show the target combobox and hide the loading message
  12. {
  13. $("#loading").css("display","none");
  14. $(target).css("display","inline");
  15. }
  16. });
  17. $('#state').chainSelect('#city','/examples/jquerycombo/combobox.php',
  18. {
  19. before:function (target)
  20. {
  21. $("#loading").css("display","block");
  22. $(target).css("display","none");
  23. },
  24. after:function (target)
  25. {
  26. $("#loading").css("display","none");
  27. $(target).css("display","inline");
  28. }
  29. });
  30. });


Czy zmodyfikowanie definicji funkcji tak, żeby parametry before i after były predefiniowane i parametr after wywoływał rekurencyjnie tą funkcje, będzie działac?

Definicja funkcji:
  1. /**
  2. * Chained Selects for jQuery
  3. * Copyright (C) 2008 Ziadin Givan www.CodeAssembly.com
  4. *
  5. * This program is free software: you can redistribute it and/or modify
  6. * it under the terms of the GNU General Public License as published by
  7. * the Free Software Foundation, either version 3 of the License, or
  8. * (at your option) any later version.
  9. *
  10. * This program is distributed in the hope that it will be useful,
  11. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  12. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  13. * GNU General Public License for more details.
  14. *
  15. * You should have received a copy of the GNU General Public License
  16. * along with this program. If not, see http://www.gnu.org/licenses/
  17. *
  18. *
  19. * settings = { usePost : true, before:function() {}, after: function() {}, default: null, parameters : { parameter1 : 'value1', parameter2 : 'value2'} }
  20. * if usePost is true, then the form will use POST to pass the parameters to the target, otherwise will use GET
  21. * "before" function is called before the ajax request and "after" function is called after the ajax request.
  22. * If defaultValue is not null then the specified option will be selected.
  23. * You can specify additional parameters to be sent to the the server in settings.parameters.
  24. *
  25. */
  26. jQuery.fn.chainSelect = function( target, url, settings )
  27. {
  28. return this.each( function()
  29. {
  30. $(this).change( function( )
  31. {
  32. settings = jQuery.extend(
  33. {
  34. after : null,
  35. before : null,
  36. usePost : false,
  37. defaultValue : null,
  38. parameters : {
  39. '_name' : $(this).attr('name'),
  40. '_id' : $(this).attr('id')
  41. }
  42. } , settings);
  43.  
  44. settings.parameters._value = $(this).val();
  45.  
  46. if (settings.before != null)
  47. {
  48. settings.before( target );
  49. }
  50.  
  51. ajaxCallback = function(data, textStatus)
  52. {
  53. $(target).html("");//clear old options
  54. data = eval(data);//get json array
  55. for (i = 0; i < data.length; i++)//iterate over all options
  56. {
  57. for ( key in data[i] )//get key => value
  58. {
  59. $(target).get(0).add(new Option(data[i][key],[key]), document.all ? i : null);
  60. }
  61. }
  62.  
  63. if (settings.defaultValue != null)
  64. {
  65. $(target).val(settings.defaultValue);//select default value
  66. } else
  67. {
  68. $("option:first", target).attr( "selected", "selected" );//select first option
  69. }
  70.  
  71. if (settings.after != null)
  72. {
  73. settings.after(target);
  74. }
  75.  
  76. $(target).change();//call next chain
  77. };
  78.  
  79. if (settings.usePost == true)
  80. {
  81. $.post( url, settings.parameters, ajaxCallback );
  82. } else
  83. {
  84. $.get( url, settings.parameters, ajaxCallback );
  85. }
  86. });
  87. });
  88. };


Wiem, że dosyć chaotycznie to opisałem - JS znam niestety tylko na tyle, żeby wstawić skrypt na strone i pierwszy raz musze coś bardziej zmodyfikować.

Czy ustawienie takich parametrów funkcji zadziała?

  1. jQuery.fn.chainSelect = function( target, url, settings )
  2. {
  3. return this.each( function()
  4. {
  5. $(this).change( function( )
  6. {
  7. settings = jQuery.extend(
  8. {
  9. after : function(){
  10. $("#loading").css("display","block");
  11. //$(target).css("display","inline");
  12. addComboBox(target,target,"comboBoxSpan");
  13. //recursive call
  14. $("#"+target).chainSelect($_GET['_value'],url);
  15. },


jako target bedzie przekazywany integer ze zmiennej tablicy: $_GET['_value']