Linux за българи: Форуми

Програмиране => Web development => Темата е започната от: nov_chovek в Jan 16, 2011, 17:23


Титла: jquery datepicker да се зареди от трети файл
Публикувано от: nov_chovek в Jan 16, 2011, 17:23
Здравейте! Имам проблем при извивкането на jquery datepicker в модален диалог (пак jquery).

Идеята е следната:

Със следният скприпт се парсва външен файл, който съдържа формата на модалния диалог:


Код
GeSHi (Javascript):
  1. $(document).ready(dialogForms);
  2.  
  3.  
  4.  
  5. function dialogForms() {
  6.  
  7.   $('a#dialog-link').click(function() {
  8.  
  9.  
  10.  
  11.     var a = $(this);
  12.  
  13.     $.get(a.attr('href'),function(resp){
  14.  
  15.  
  16.  
  17.       var dialog = $('<div>').attr('id','').html($(resp).find('form:first').parent('div').html());
  18.  
  19.       $('body').append(dialog);
  20.  
  21.       $('body').append(dialog);
  22.  
  23.       dialog.find(':submit').hide();
  24.  
  25.       dialog.dialog({
  26.  
  27.         title: a.attr('title') ? a.attr('title') : '',
  28.  
  29.         modal: true,
  30.  
  31.         buttons: {
  32.  
  33.           'Save': function() {submitFormWithAjax($(this).find('form'));$(this).dialog('close');},
  34.  
  35.           'Cancel': function() {$(this).dialog('close');}
  36.  
  37.         },
  38.  
  39.         close: function() {$(this).remove();},
  40.  
  41.         width: '300px'
  42.  
  43.       });
  44.  
  45.     }, 'html');
  46.  
  47.     return false;
  48.  
  49.   });
  50.  
  51.  
  52.  
  53. }
  54.  
  55. function submitFormWithAjax(form) {
  56.  
  57.   form = $(form);
  58.  
  59.   $.ajax({
  60.  
  61.     url: form.attr('action'),
  62.  
  63.     data: form.serialize(),
  64.  
  65.     type: (form.attr('method')),
  66.  
  67.     dataType: 'script'
  68.  
  69.  
  70.  
  71.  
  72.  
  73.       });
  74.  
  75.   return false;
  76.  
  77. }



Скрипта го намерих из нета, не съм го писал аз.

Та горния скприпт парсва форма, която е в отделен втори файл и помага за събмитването и.

В този втори файл има datepicker, който обаче не се зарежда.


Код
GeSHi (Javascript):
  1. $(function(){
  2.        	$("#date1").datepicker({
  3. 			dateFormat: 'dd.mm.yy',
  4. 			firstDay: 1,
  5. 			showOn: "button",
  6. 			buttonImage: "../images/datepicker.gif",
  7. 			buttonImageOnly: true
  8. 		});
  9. 	$("#date1").datepicker('setDate', '<? echo $date1; ?>');	
  10.  
  11. 	$("#date2").datepicker({
  12. 			dateFormat: 'dd.mm.yy',
  13. 			firstDay: 1,
  14. 			showOn: "button",
  15. 			buttonImage: "../images/datepicker.gif",
  16. 			buttonImageOnly: true
  17. 		});
  18. 	$("#date2").datepicker('setDate', '<? echo $date2; ?>');	
  19. 	});



Проблемът е че формата се зарежда и се събмитва, но дейтпикъра не се зарежда! Проббвах да добавя в този втория файл нови връзки към jquery, понеже си мислех че не се зарежда:


Код
GeSHi (Javascript):
  1. <link type="text/css" href="css/smoothness/jquery-ui-1.8.8.custom.css" rel="stylesheet" />
  2. <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  3. <script type="text/javascript" src="js/jquery-ui-1.8.8.custom.min.js"></script>


Обаче, пак не се получава. Някой може ли да помогне?
Код
GeSHi (Javascript):
  1.  

Титла: Re: jquery datepicker да се зареди от трети файл
Публикувано от: neter в Jan 17, 2011, 20:01
Няма да се случи така. Кодът на datepicker-а (и въобще важи за всякакъв javascript) трябва не само да се излее като съдържание в html-а, но и да се изпълни. Имаш два варианта - да вкараш кода за инициализиране на datepicker-а в основния (парсващия) файл, за да се изпълнява след кликване върху линка, или да вкараш кода за инициализиране в една функция във втория (парсвания) файл и да викаш тази функция след парсването. Избери си кое ще ти е по-удобно ;)

Титла: Re: jquery datepicker да се зареди от трети файл
Публикувано от: nov_chovek в Jan 18, 2011, 14:41
мерси neter :)

Не съм много вещ в JS , но ще се пробвам. Ако имам проблем да се съветваме пак? :)

Титла: Re: jquery datepicker да се зареди от трети файл
Публикувано от: neter в Jan 19, 2011, 10:57
//извън темата

Стига да намирам време, че напоследък доста окъся, с удоволствие ;) Не че аз съм кой знае колко вещ в JS, ама е забавна материя :)

Титла: Re: jquery datepicker да се зареди от трети файл
Публикувано от: VladSun в Jan 21, 2011, 02:58
Дай всички участващи файлове (JS, HTML и т.н.), по-лесно ще ни е.

Титла: Re: jquery datepicker да се зареди от трети файл
Публикувано от: nov_chovek в Jan 22, 2011, 17:47
окей...

Накратко, визуализирам дати от базаданни, като всяка дата е линк. Като се кликне на нея, излиза модален диалог с форма и дейтпикър. Във формата се променя датата, чрез дейтпикъра и се събмитва php с новата стойност на датата, която се променя в базата. Това е :)

ето ги и файловете:

Файлът, в който като се кликне на линк и се отваря модалния диалог (index.php)

Код
GeSHi (PHP):
  1. <html>
  2. <link type="text/css" href="css/smoothness/jquery-ui-1.8.8.custom.css" rel="stylesheet" />
  3.  
  4. <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  5. <script type="text/javascript" src="js/jquery-ui-1.8.8.custom.min.js"></script>
  6. <script type="text/javascript" src="js/ajax-dialog-forms.js"></script>
  7.  
  8.  
  9. <div>
  10.     <a href="index.php?date=<? echo $date; ?>" class="dialog-form" id="dialog-link" title="Change details">Click to change date</a>
  11. </div>
  12. </html>
  13.  

Файлът който се зарежда в модалния диалог (form.php)

Код
GeSHi (PHP):
  1. <?  
  2. $date=$_GET['date'];
  3.  
  4. include 'config.php';
  5.  
  6. $sql="SELECT * FROM date WHERE date='$date' ";
  7. $result = mysql_query($sql);
  8. $row = mysql_fetch_array($result);
  9. $date1=$row["date"];
  10. ?>
  11.  
  12. <script>
  13. $(function(){
  14.        	$("#date1").datepicker({
  15. 			dateFormat: 'dd.mm.yy',
  16. 			firstDay: 1,
  17. 			showOn: "button",
  18. 			buttonImage: "../images/datepicker.gif",
  19. 			buttonImageOnly: true
  20. 		});
  21. 	$("#date1").datepicker('setDate', '<? echo $date1; ?>');	
  22. }); 
  23. </script>
  24.  
  25. <div id="dialog" title="Basic dialog">
  26.  
  27. <form method="post" action="calendar/update-date.php">
  28.       Date 1:
  29. <input type="text" name="date1" id="date1">  
  30. </form>
  31. </div>
  32.  


И пак скрипта който парсва външния файл(form.php и го изплюва в модлания диалог:

Код
GeSHi (Javascript):
  1.  
  2. $(document).ready(dialogForms);
  3.  
  4. function dialogForms() {
  5.  
  6.   $('a#dialog-link').click(function() {
  7.  
  8.     var a = $(this);
  9.  
  10.     $.get(a.attr('href'),function(resp){
  11.  
  12.       var dialog = $('<div>').attr('id','').html($(resp).find('form:first').parent('div').html());
  13.  
  14.       $('body').append(dialog);
  15.  
  16.       $('body').append(dialog);
  17.  
  18.       dialog.find(':submit').hide();
  19.  
  20.       dialog.dialog({
  21.  
  22.         title: a.attr('title') ? a.attr('title') : '',
  23.  
  24.         modal: true,
  25.  
  26.         buttons: {
  27.  
  28.           'Save': function() {submitFormWithAjax($(this).find('form'));$(this).dialog('close');},
  29.  
  30.           'Cancel': function() {$(this).dialog('close');}
  31.  
  32.         },
  33.  
  34.         close: function() {$(this).remove();},
  35.  
  36.         width: '300px'
  37.  
  38.       });
  39.  
  40.     }, 'html');
  41.     return false;
  42.   });
  43. }
  44.  
  45. function submitFormWithAjax(form) {
  46.  
  47.   form = $(form);
  48.  
  49.   $.ajax({
  50.  
  51.     url: form.attr('action'),
  52.  
  53.     data: form.serialize(),
  54.  
  55.     type: (form.attr('method')),
  56.  
  57.     dataType: 'script'
  58.  
  59.  
  60.  
  61.  
  62.  
  63.       });
  64.  
  65.   return false;
  66.  
  67. }

Титла: Re: jquery datepicker да се зареди от трети файл
Публикувано от: nov_chovek в Jan 22, 2011, 21:18
намерих решението...изгубих с този проблем доста време..

та...

във външния файл принтираме $date в <input type="hidden"> и после

в скрипта, който парсва външния файл, трябва да вземем стойността на hidden <input>-а с това:

$('input[name=date]').val()

и така парсващия файл получава php променливата през скития <input>

незнам дали е бързо и елегантно, но върши работа :)


Powered by SMF 2.0 Beta 4 | SMF © 2006, Simple Machines LLC