Witam, mam 2 pola selectbox po wybraniu wojewodztwa pobierane sa z bazy danych miasta dla danego i sa do wyboru w drugim:


Fragment kodu JS:

  1. $('#woj').live('change', function() {
  2. var idWoj = $("#woj").val();
  3. var postURL = "index.php?search";
  4. $.ajax({
  5. cache: false,
  6. async: false,
  7. type: "POST",
  8. data: 'wojId='+idWoj,
  9. url: postURL,
  10. success: function(msg) {
  11. $('#cityTeam').html(msg);
  12. $('#cityTeam').show();
  13. }
  14. });
  15. return false;
  16. });

  1. if(isset($_GET['search'])) {
  2.  
  3. if(isset($_POST['wojId']))
  4. {
  5. $wojId = Utils::escape($_POST['wojId']);
  6. $n = new Main($dbh);
  7. $result = $n->getAllCities($wojId);
  8. ?>
  9.  
  10. <select class='styled' name='city'>
  11. <option value=''>Wszystkie</option>
  12. <?php foreach ($result as $r) { ?>
  13. <option value='<?=$r['city']; ?>'><?= $r['city']; ?></option>
  14. <?php } ?>
  15. </select>
  16.  
  17. <?php exit();
  18.  
  19. }
  20. }



i html:

  1. <h2>Wyszukaj gracza</h2>
  2. <form name="searchPlayer" class="st" action="">
  3. <p><select name="chooseWoj" class="styled"><option>Warmińsko-Mazurskie</option><option>Mazowieckie</option><option>Kujawsko-Pomorskie</option></select></p>
  4. <p><select name="chooseCity" class="styled"><option>Olsztyn</option><option>Olsztynek</option><option>Ostróda</option></select></p>



Skrypt dziala poprawnie jak chodzi ładowanie danych. Problem polega na tym że moje selecty posiadaja klasę styled i obrobione sa przy pomocy pliku input.js (neistandardowe) i po wykonaniu 'success' input drugi nie jest ostylowany,
tak jak byl przed wyborem.

Czy wie ktoś jak wykonć ten plik (js) jeszcze raz po wczytaniu klauzulu success: ?

O to ten plik js:


  1.  
  2.  
  3.  
  4. CUSTOM FORM ELEMENTS
  5.  
  6. Created by Ryan Fait
  7. www.ryanfait.com
  8.  
  9. The only things you may need to change in this file are the following
  10. variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
  11.  
  12. The numbers you set for checkboxHeight and radioHeight should be one quarter
  13. of the total height of the image want to use for checkboxes and radio
  14. buttons. Both images should contain the four stages of both inputs stacked
  15. on top of each other in this order: unchecked, unchecked-clicked, checked,
  16. checked-clicked.
  17.  
  18. You may need to adjust your images a bit if there is a slight vertical
  19. movement during the different stages of the button activation.
  20.  
  21. The value of selectWidth should be the width of your select list image.
  22.  
  23. Visit http://ryanfait.com/ for more information.
  24.  
  25. */
  26.  
  27. var checkboxHeight = "25";
  28. var radioHeight = "25";
  29. var selectWidth = "227";
  30.  
  31.  
  32. /* No need to change anything after this */
  33.  
  34.  
  35. document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
  36.  
  37. var Custom = {
  38. init: function() {
  39. var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
  40. for(a = 0; a < inputs.length; a++) {
  41. if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
  42. span[a] = document.createElement("span");
  43. span[a].className = inputs[a].type;
  44.  
  45. if(inputs[a].checked == true) {
  46. if(inputs[a].type == "checkbox") {
  47. position = "0 -" + (checkboxHeight*2) + "px";
  48. span[a].style.backgroundPosition = position;
  49. } else {
  50. position = "0 -" + (radioHeight*2) + "px";
  51. span[a].style.backgroundPosition = position;
  52. }
  53. }
  54. inputs[a].parentNode.insertBefore(span[a], inputs[a]);
  55. inputs[a].onchange = Custom.clear;
  56. if(!inputs[a].getAttribute("disabled")) {
  57. span[a].onmousedown = Custom.pushed;
  58. span[a].onmouseup = Custom.check;
  59. } else {
  60. span[a].className = span[a].className += " disabled";
  61. }
  62. }
  63. }
  64. inputs = document.getElementsByTagName("select");
  65. for(a = 0; a < inputs.length; a++) {
  66. if(inputs[a].className == "styled") {
  67. option = inputs[a].getElementsByTagName("option");
  68. active = option[0].childNodes[0].nodeValue;
  69. textnode = document.createTextNode(active);
  70. for(b = 0; b < option.length; b++) {
  71. if(option[b].selected == true) {
  72. textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
  73. }
  74. }
  75. span[a] = document.createElement("span");
  76. span[a].className = "select";
  77. span[a].id = "select" + inputs[a].name;
  78. span[a].appendChild(textnode);
  79. inputs[a].parentNode.insertBefore(span[a], inputs[a]);
  80. if(!inputs[a].getAttribute("disabled")) {
  81. inputs[a].onchange = Custom.choose;
  82. } else {
  83. inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
  84. }
  85. }
  86. }
  87. document.onmouseup = Custom.clear;
  88. },
  89. pushed: function() {
  90. element = this.nextSibling;
  91. if(element.checked == true && element.type == "checkbox") {
  92. this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
  93. } else if(element.checked == true && element.type == "radio") {
  94. this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
  95. } else if(element.checked != true && element.type == "checkbox") {
  96. this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
  97. } else {
  98. this.style.backgroundPosition = "0 -" + radioHeight + "px";
  99. }
  100. },
  101. check: function() {
  102. element = this.nextSibling;
  103. if(element.checked == true && element.type == "checkbox") {
  104. this.style.backgroundPosition = "0 0";
  105. element.checked = false;
  106. } else {
  107. if(element.type == "checkbox") {
  108. this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
  109. } else {
  110. this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
  111. group = this.nextSibling.name;
  112. inputs = document.getElementsByTagName("input");
  113. for(a = 0; a < inputs.length; a++) {
  114. if(inputs[a].name == group && inputs[a] != this.nextSibling) {
  115. inputs[a].previousSibling.style.backgroundPosition = "0 0";
  116. }
  117. }
  118. }
  119. element.checked = true;
  120. }
  121. },
  122. clear: function() {
  123. inputs = document.getElementsByTagName("input");
  124. for(var b = 0; b < inputs.length; b++) {
  125. if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
  126. inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
  127. } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
  128. inputs[b].previousSibling.style.backgroundPosition = "0 0";
  129. } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
  130. inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
  131. } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
  132. inputs[b].previousSibling.style.backgroundPosition = "0 0";
  133. }
  134. }
  135. },
  136. choose: function() {
  137. option = this.getElementsByTagName("option");
  138. for(d = 0; d < option.length; d++) {
  139. if(option[d].selected == true) {
  140. document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
  141. }
  142. }
  143. }
  144. }
  145. window.onload = Custom.init;
  146.