Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z onchange w input file w ie
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
marrrecki
17.01.2008, 11:19:31
Witam. MAm problem. zrobiłem sobie funkcję, która po wybraniu jednego pliku poprzez input file tworzy mi w divie kolejny input. wszystko działa pod operą i ff, ale pod ie niestety nie chce.
Oto ta funkcja:
[HTML] pobierz, plaintext 
  1. function DodajElement()
  2. 	{
  3. 		var element = document.createElement('input');
  4. 		element.setAttribute('type', 'file');
  5. 		element.setAttribute('onchange', 'javascript:DodajElement();');		
  6.  
  7. 		var liczba = 0;
  8. 		var ilosc = document.forms['newsy_edit'].elements.length;
  9. 		for (var i = 0; i < ilosc; i++ )
  10. 		{
  11. 			if (document.forms['newsy_edit'].elements[i].type == 'file')
  12. 			{
  13. 				liczba += 1;
  14. 			}
  15. 		}
  16.  
  17. 		element.setAttribute('name', 'file-'+(liczba+1));
  18.  
  19. 		element.style.display = "block";
  20. 		element.style.margin= "2px";
  21.  
  22. 		var div = document.getElementById('dodatkowe');
  23. 		div.appendChild(element);
  24.  
  25. 		//alert(element.onchange);
  26.  
  27. 		document.forms["newsy_edit"].dodatkowe_ilosc.value = liczba;
  28. 	}
[HTML] pobierz, plaintext


Czy ktoś może mi powiedzieć o co biega?
gekon
17.01.2008, 18:29:15
Pokaż cały kod.

Edyta.
Nie napisałeś co Ci nie działa. Podejrzewam, że onchange. Zrób to osobnym zdarzeniem.
marrrecki
18.01.2008, 10:37:59
to jest cała funkcja. Dokładnie pod ie nie reaguje na onchange, ale pod ff i operą jest wszystko cacy. Fukcja DodajElement() wywoływana jest przy body onload() i za każdym razem jak jak wybierzemy jakiś plik przez input file.

W jaki sposób mam to wywołać osobnym zdarzeniem? Tu jest tylko jedno zdarzenie i nie mam jak inaczej się do tego zabrać.
gekon
18.01.2008, 11:13:54
Bez używania żadnej zewnętrznej biblioteki to możesz pobrać wszystkie inputy z diva #dodatkowe i w pętli zrobić przechwytywanie zdarzenia.

[HTML] pobierz, plaintext 
  1. var file-inputs = document.getElementById("dodatkowe").getElementsByTagName("input");
  2.  
  3. for(var i =0; i < file-inputs.length; i++){
  4.  file-inputs[i].onchange = function(){
  5. //  tu piszesz co ma sie dziac...
  6.  }
  7. }
[HTML] pobierz, plaintext


PS. Usuń jeden wpis, bo się zdublowały.
marrrecki
18.01.2008, 16:06:56
niestety to co podałeś nie chce działać. Może jakieś inne pomysły?
gekon
18.01.2008, 17:17:25
A pokaż jak to zrobiłeś u siebie.
marrrecki
18.01.2008, 17:50:57 
[HTML] pobierz, plaintext 
  1. var filez = document.getElementById("dodatkowe").getElementsByTagName("input");
  2.  
  3. for(var i =0; i < filez.length; i++){
  4.  filez[i].onchange = function(){
  5.    DodajElement();
  6.  }
  7. }
[HTML] pobierz, plaintext

Wstawiałem to zarówno w sekcję head jak i w body. Próbowałem również tak:
[HTML] pobierz, plaintext 
  1. var filez = document.getElementById("dodatkowe").getElementsByTagType("file");
  2.  
  3. for(var i =0; i < filez.length; i++){
  4.  filez[i].onchange = function(){
  5.    DodajElement();
  6.  }
  7. }
[HTML] pobierz, plaintext

oraz
[HTML] pobierz, plaintext 
  1. var filez = document.getElementById("dodatkowe").getElementsByTagName("input");
  2.  
  3. for(var i =0; i < filez.length; i++){
  4.  filez[i].onchange =DodajElement();
  5. }
[HTML] pobierz, plaintext
gekon
18.01.2008, 18:01:13
To co podałem to JavaScript, nie PHP.
marrrecki
20.01.2008, 15:21:14
wiem. nie ten taqg w forum zaznaczylem i forum samo dodalo tagi php.
John
20.01.2008, 15:26:42
dla ie musi być onChange nie onchange :-) i tak samo dla wszystkich ( onClick etc. )
gekon
20.01.2008, 22:17:45
@marrrecki: Pokaż cały kod.
marrrecki
21.01.2008, 11:39:23
Korzystam z szablonów smarty, ale te nie mają żadnego wpływu na działanie skryptów. Zastosowałem się do porady @Johna, ale to tez nic nie dało.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <title>{$lang_TITLE}</title>
  5. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
  6. <meta name="author" content="jetshop">
  7. <meta name="Keywords" content="{$lang_META_KEYWORDS}">
  8. <meta name="description" content="{$lang_META_DESCRIPTION}">
  9. <meta name="robots" content="noodp">
  10. <link rel="shortcut icon" href="templates/{$current_template}/images/favicon.ico">
  11. <link rel="stylesheet" type="text/css" href="templates/{$current_template}/styles/stylesheet.css">
  12. <script language="JavaScript" src="js/overlib_mini.js"></script>
  13. <script language="JavaScript" src="js/kalendarz.js"></script>
  14. {literal}
  15. <script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
  16. <script language="javascript" type="text/javascript">
  17. 		tinyMCE.init({
  18. 			mode : "textareas",
  19. 			elements : "ajaxfilemanager",
  20. 			theme : "advanced",
  21. 			plugins : "table,advhr,advimage,advlink,flash,paste,fullscreen,noneditable,contextmenu",
  22. 			theme_advanced_buttons1_add_before : "newdocument,separator",
  23. 			theme_advanced_buttons1_add : "fontselect,fontsizeselect",
  24. 			theme_advanced_buttons2_add : "separator,forecolor,backcolor,liststyle",
  25. 			theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,",
  26. 			theme_advanced_buttons3_add_before : "tablecontrols,separator",
  27. 			theme_advanced_buttons3_add : "flash,advhr,separator,fullscreen",
  28. 			theme_advanced_toolbar_location : "top",
  29. 			theme_advanced_toolbar_align : "left",
  30. 			extended_valid_elements : "hr[class|width|size|noshade]",
  31. 			file_browser_callback : "ajaxfilemanager",
  32. 			paste_use_dialog : false,
  33. 			theme_advanced_resizing : true,
  34. 			theme_advanced_resize_horizontal : true,
  35. 			apply_source_formatting : true,
  36. 			force_br_newlines : true,
  37. 			force_p_newlines : false,	
  38. 			relative_urls : true
  39. 		});
  40.  
  41. 		var ajaxfilemanagerurl = "../../plugins/ajaxfilemanager/ajaxfilemanager.php";
  42. 		function ajaxfilemanager(field_name, url, type, win) {
  43. 			switch (type) {
  44. 				case "image":
  45. 					ajaxfilemanagerurl += "?type=img";
  46. 					break;
  47. 				case "media":
  48. 					ajaxfilemanagerurl += "?type=media";
  49. 					break;
  50. 				case "flash": //for older versions of tinymce
  51. 					ajaxfilemanagerurl += "?type=media";
  52. 					break;
  53. 				case "file":
  54. 					ajaxfilemanagerurl += "?type=files";
  55. 					break;
  56. 				default:
  57. 					return false;
  58. 			}
  59. 			var fileBrowserWindow = new Array();
  60. 			fileBrowserWindow["file"] = ajaxfilemanagerurl;
  61. 			fileBrowserWindow["title"] = "Ajax File Manager";
  62. 			fileBrowserWindow["width"] = "782";
  63. 			fileBrowserWindow["height"] = "440";
  64. 			fileBrowserWindow["close_previous"] = "no";
  65. 			tinyMCE.openWindow(fileBrowserWindow, {
  66. 			  window : win,
  67. 			  input : field_name,
  68. 			  resizable : "yes",
  69. 			  inline : "yes",
  70. 			  editor_id : tinyMCE.getWindowArg("editor_id")
  71. 			});
  72.  
  73. 			return false;
  74. 		}
  75. 	</script>
  76. <script type="text/javascript">
  77. 	function DodajElement()
  78. 	{
  79. 		var element = document.createElement('input');
  80. 		element.setAttribute('type', 'file');
  81. 		element.setAttribute('onChange', 'javascript:DodajElement();');		
  82.  
  83. 		var liczba = 0;
  84. 		var ilosc = document.forms['newsy_edit'].elements.length;
  85. 		for (var i = 0; i < ilosc; i++ )
  86. 		{
  87. 			if (document.forms['newsy_edit'].elements[i].type == 'file')
  88. 			{
  89. 				liczba += 1;
  90. 			}
  91. 		}
  92.  
  93. 		element.setAttribute('name', 'file-'+(liczba+1));
  94.  
  95. 		element.style.display = "block";
  96. 		element.style.margin= "2px";
  97.  
  98. 		var div = document.getElementById('dodatkowe');
  99. 		div.appendChild(element);
  100.  
  101. 		document.forms["newsy_edit"].dodatkowe_ilosc.value = liczba;
  102. 	}
  103. 	</script>
  104. {/literal}
  105. </head>
  106. <body onload="javascript:DodajElement();">
[HTML] pobierz, plaintext


A tak wygląda div o id dodatkowe:
[HTML] pobierz, plaintext 
  1. <div id="dodatkowe"><input type="hidden" name="dodatkowe_ilosc"></div>
[HTML] pobierz, plaintext
John
21.01.2008, 15:43:47
ponownie body onLoad=funkcja()
marrrecki
21.01.2008, 16:01:28
akurat tutaj to nie ma znaczenia, bo pierwszy element ładuje się bez żadnego problemu przy ładowaniu okna. dopiero następne przy onchange nie chcą (nadal zaznaczam że wszystko pod IE się dzieje)
gekon
21.01.2008, 17:59:30
@marrrecki: 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <title>{$lang_TITLE}</title>
  4. <script type="text/javascript">
  5. function DodajElement(){
  6.   var element = document.createElement('input');
  7.   element.setAttribute('type', 'file');
  8.  
  9.   var liczba = 0;
  10.   var ilosc = document.forms['newsy_edit'].elements.length;
  11.   for (var i = 0; i < ilosc; i++ )  {
  12.     if (document.forms['newsy_edit'].elements[i].type == 'file'){
  13.     liczba += 1;
  14.     }
  15.   }
  16.  
  17.   element.setAttribute('name', 'file-'+(liczba+1));
  18.  
  19.   element.style.display = "block";
  20.   element.style.margin= "2px";
  21.  
  22.   var div = document.getElementById('dodatkowe');
  23.   var lastInput = div.appendChild(element);
  24.  
  25.   document.forms["newsy_edit"].dodatkowe_ilosc.value = liczba;
  26.  
  27.   lastInput.onchange = function(){
  28.     DodajElement();
  29.   }
  30. }
  31. window.onload = function (){
  32.  DodajElement();
  33. }
  34. </script>
  35. </head>
  36. <body>
  37. 	<form id="newsy_edit" action="#" method="post">
  38. 		<fieldset>
  39.       <input type="text" name="dodatkowe_ilosc" />
  40. 			<div id="dodatkowe">
  41.  
  42. 			</div>
  43. 		</fieldset>
  44. 	</form>
  45. </body>
  46. </html>
[HTML] pobierz, plaintext


@John: http://www.w3.org/TR/html401/interact/scripts.html#events - widzisz tu gdzie onLoad? Bo ja tylko onload itd.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.