Jquery - prototype botsing

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Top Low-Code Developer Gezocht!

Bedrijfsomschrijving Unieke Kansen, Uitstekende Arbeidsvoorwaarden & Inspirerend Team Wij zijn een toonaangevende, internationale organisatie die de toekomst van technologie vormgeeft door het creëren van innovatieve en baanbrekende oplossingen. Ons succes is gebaseerd op een hecht en gepassioneerd team van professionals die altijd streven naar het overtreffen van verwachtingen. Als jij deel wilt uitmaken van een dynamische, vooruitstrevende en inspirerende werkomgeving, dan is dit de perfecte kans voor jou! Functieomschrijving Als Low-Code Developer ben je een cruciaal onderdeel van ons team. Je werkt samen met collega's uit verschillende disciplines om geavanceerde applicaties te ontwikkelen en te optimaliseren met behulp van Low-code

Bekijk vacature »

N K

N K

25/08/2012 16:15:58
Quote Anchor link
Ik heb een jquery datepicker en een recurrent date generator die gebruik maakt van prototype.
Nu botsten deze twee waardoor ze allebei niet meer functioneerden.
Ik heb gezocht wat dit kon zijn en ben dit tegenkomen:

http://0xtc.com/2008/06/12/how-to-make-jquery-and-prototype-work-on-the-same-page.xhtml/

Nu heb ik het een en ander aangepast waardoor in ieder geval de datepicker weer werkt maar de generator nog niet. Nu zit ik nog te zoeken hoe ik de recurrent date generator weer werkend kan krijgen.
Onderstaand een stukje code.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/datepicker.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.ui.all.css" />
<script src="scripts/jquery-1.8.0.js"></script>
<script type='text/javascript' src='scripts/jquery.ui.core.js'></script>
<script language="JavaScript" type="text/javascript">
jQuery.noConflict();
var $j = jQuery;
</script>
<script type='text/javascript' src='scripts/jquery.ui.widget.js'></script>
<script type='text/javascript' src='scripts/jquery.ui.datepicker.js'></script>
    <script>
    $j(function() {
    $j("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
    });
    </script>
<script type='text/javascript' src='scripts/prototype.js'></script>
<script type='text/javascript' src='scripts/date.js'></script>
<script type='text/javascript' src='scripts/recurrence.js'></script>

<script type='text/javascript'>
      function generate_recurrence () {
        var pattern = {};

        // gather pattern
        ['start', 'every', 'unit', 'end_condition', 'until', 'rfor', 'nth', 'occurrence_of'].each(function(k) {
          pattern[k] = $(k).value;
        });

        // gather selected days
        pattern.days = $$('input.week_days').collect(function(d) {
          if (d.checked) return d.value;
          return null;
        }).compact();

        try {
          var r = new Recurrence(pattern);
          var dates = r.generate((this.value == '') ? undefined : this.value);
        } catch (e) {
          $('output').value = e.message;
          return;
        }

        $('output').value = "";
      

        $('output').value += dates.collect(function(d) {
          return d.toString('yyyy-MM-dd');
        }).join("\n");
      }

      document.observe('dom:loaded', function ( ) {
        $('end_condition').observe('change', function () {
          $$('#for_span, #until_span').invoke('hide');
          $(this.value + '_span').show();
        });

        $('unit').observe('change', function () {
          $$('#week_span, #month_span').invoke('hide');
          if (this.value == 'w') $('week_span').show();
          if (this.value == 'm') $('month_span').show();
        });      
      });
    </script>

</head>

<body>
<div class="demo">
<input type="text" id="datepicker" />
</div>

Elke <input id="every" type="text" value="1" size="2" maxlength="2" class="recurringinput"/>
    <select id="unit" class="recurringselect">
      <option value="d">dag(en)</option>
      <option value="w">we(e)k(en)</option>
      <option value="m">maand(en)</option>
      <option value="y">ja(a)r(en)</option>
    </select>
    <span id="month_span" style="display:none">
      op de
      <select id="nth" class="recurringselect">
        <option value="1">eerste</option>
        <option value="2">tweede</option>
        <option value="3">derde</option>
        <option value="4">vierde</option>
        <option value="-1">laatste</option>
      </select>
      <select id="occurrence_of" class="recurringselect">
        <option value="0">zondag</option>
        <option value="1">maandag</option>
        <option value="2">dinsdag</option>
        <option value="3">woensdag</option>
        <option value="4">donderdag</option>
        <option value="5">vrijdag</option>
        <option value="6">zaterdag</option>
        <option value="-1">dag</option></select>
      </select>
    </span>

    <span id="week_span" style="display:none">
      op
      <input class="week_days" type="checkbox" value="0"> Zon
      <input class="week_days" type="checkbox" value="1"> Maa
      <input class="week_days" type="checkbox" value="2"> Din
      <input class="week_days" type="checkbox" value="3"> Woe
      <input class="week_days" type="checkbox" value="4"> Don
      <input class="week_days" type="checkbox" value="5"> Vri
      <input class="week_days" type="checkbox" value="6"> Zat
    </span>
    <br/>
    <select id="end_condition" class="recurringselect">
    <option value="for">voor</option>
    <option value="until">tot/met</option>
    </select>
    <span id="for_span"><input id="rfor" type="text" value="10" maxlength="2" size="3" class="recurringinput"/> keer</span>
    <span id="until_span" style="display:none">
        <div class="demo">
        <input type="text" id="datepicker" />
        </div>
    </span>
    <br/>
<a href="javascript:;" onclick="generate_recurrence();">Klik hier om de datums te controleren.</a>
<p>
<textarea class="recurrencetextarea" id="output" name="datums"  readonly="yes" ></textarea>
</p>
</body>
</html>


Mijn vraag is eigenlijk waar ik nu het beste kan beginnen.
Ik heb geprobeerd om in het script van de generator ook de dollartekens aan te passen maar dit werkt helaas niet. (Wellicht door mijn onkunde)
Ik heb vrijwel geen kennis van jquery/javascript, misschien hebben jullie een idee?
 
PHP hulp

PHP hulp

25/11/2024 14:41:00
 
Kris Peeters

Kris Peeters

28/08/2012 17:24:26
Quote Anchor link
Probeer dit eens:

- laad eerst jQuery.js, dan prototype.js (zoals het nu staat, is het goed)

- alles van jQuery groepeer je binnen document.ready.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
jQuery(document).ready(function($) {
  $("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
  // alles wat jQuery is, moet hier binnen.
});


Binnen document.ready is $ jQuery; buiten document.ready is $ prototype
Gewijzigd op 28/08/2012 17:26:53 door Kris Peeters
 
N K

N K

28/08/2012 19:13:57
Quote Anchor link
Hoi Kris

Ik heb nu dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/datepicker.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.ui.all.css" />
<script src="scripts/jquery-1.8.0.js"></script>
<script type='text/javascript' src='scripts/jquery.ui.core.js'></script>
<script type='text/javascript' src='scripts/jquery.ui.widget.js'></script>
<script type='text/javascript' src='scripts/jquery.ui.datepicker.js'></script>
<script>
jQuery(document).ready(function($) {
  $("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
  // alles wat jQuery is, moet hier binnen.
});
    </script>
<script type='text/javascript' src='scripts/prototype.js'></script>
<script type='text/javascript' src='scripts/date.js'></script>
<script type='text/javascript' src='scripts/recurrence.js'></script>
<script type='text/javascript'>
      function generate_recurrence () {
        var pattern = {};

        // gather pattern
        ['start', 'every', 'unit', 'end_condition', 'until', 'rfor', 'nth', 'occurrence_of'].each(function(k) {
          pattern[k] = $(k).value;
        });

        // gather selected days
        pattern.days = $$('input.week_days').collect(function(d) {
          if (d.checked) return d.value;
          return null;
        }).compact();

        try {
          var r = new Recurrence(pattern);
          var dates = r.generate((this.value == '') ? undefined : this.value);
        } catch (e) {
          $('output').value = e.message;
          return;
        }

        $('output').value = "";
      

        $('output').value += dates.collect(function(d) {
          return d.toString('yyyy-MM-dd');
        }).join("\n");
      }

      document.observe('dom:loaded', function ( ) {
        $('end_condition').observe('change', function () {
          $$('#for_span, #until_span').invoke('hide');
          $(this.value + '_span').show();
        });

        $('unit').observe('change', function () {
          $$('#week_span, #month_span').invoke('hide');
          if (this.value == 'w') $('week_span').show();
          if (this.value == 'm') $('month_span').show();
        });      
      });
    </script>

</head>

<body>
<div class="demo">
<input type="text" id="datepicker" />
</div>

Elke <input id="every" type="text" value="1" size="2" maxlength="2" class="recurringinput"/>
    <select id="unit" class="recurringselect">
      <option value="d">dag(en)</option>
      <option value="w">we(e)k(en)</option>
      <option value="m">maand(en)</option>
      <option value="y">ja(a)r(en)</option>
    </select>
    <span id="month_span" style="display:none">
      op de
      <select id="nth" class="recurringselect">
        <option value="1">eerste</option>
        <option value="2">tweede</option>
        <option value="3">derde</option>
        <option value="4">vierde</option>
        <option value="-1">laatste</option>
      </select>
      <select id="occurrence_of" class="recurringselect">
        <option value="0">zondag</option>
        <option value="1">maandag</option>
        <option value="2">dinsdag</option>
        <option value="3">woensdag</option>
        <option value="4">donderdag</option>
        <option value="5">vrijdag</option>
        <option value="6">zaterdag</option>
        <option value="-1">dag</option></select>
      </select>
    </span>

    <span id="week_span" style="display:none">
      op
      <input class="week_days" type="checkbox" value="0"> Zon
      <input class="week_days" type="checkbox" value="1"> Maa
      <input class="week_days" type="checkbox" value="2"> Din
      <input class="week_days" type="checkbox" value="3"> Woe
      <input class="week_days" type="checkbox" value="4"> Don
      <input class="week_days" type="checkbox" value="5"> Vri
      <input class="week_days" type="checkbox" value="6"> Zat
    </span>
    <br/>
    <select id="end_condition" class="recurringselect">
    <option value="for">voor</option>
    <option value="until">tot/met</option>
    </select>
    <span id="for_span"><input id="rfor" type="text" value="10" maxlength="2" size="3" class="recurringinput"/> keer</span>
    <span id="until_span" style="display:none">
        <div class="demo">
        <input type="text" id="datepicker" />
        </div>
    </span>
    <br/>
<a href="javascript:;" onclick="generate_recurrence();">Klik hier om de datums te controleren.</a>
<p>
<textarea class="recurrencetextarea" id="output" name="datums"  readonly="yes" ></textarea>
</p>
</body>
</html>


Maar dat werkt nog niet..De datepicker doet het goed. De recurring date genrator niet.
 
Reshad F

Reshad F

28/08/2012 19:17:02
Quote Anchor link
je hebt hiervoor de jQuery noconflict(); functie. wat je kan gebruiken :)
 
N K

N K

28/08/2012 19:25:48
Quote Anchor link
Hoi Reshad,

Die had ik in mijn eerste post gebruikt maar dat werkt niet.
Ik kan het ook verkeerd geinterpreteerd hebben hoe ik hem moet gebruiken:

1. Jquery no conflict toegepast zoals bovenstaand ( zie 1e post)
Toen dat niet werkte heb ik
2. Jquery no conflict functie in elk Jquery bestand helemaal bovenaan de pagina geplaatst.

Beiden werkte niet. De kans is groot dat ik iets fout doe maar wat precies...
 
Kris Peeters

Kris Peeters

29/08/2012 12:25:13
Quote Anchor link
Okay, ik ken eigenlijk niets van prototype; maar ja ... het blijft wel javascript.

Kan je eens zeggen waar je volgende dingen hebt gevonden:
- date.js
- recurrence.js
- (eventueel) generate_recurrence()
Gewijzigd op 29/08/2012 12:26:49 door Kris Peeters
 
N K

N K

29/08/2012 12:53:38
Quote Anchor link
Hoi Kris,

Dat was hier:
http://freecode.com/projects/javascript-recurring-dates-generator
download: https://github.com/mooman/recurring_dates

Het is jammer dat Jquery niet zoiets heeft. Het is eigenlijk de enige die ik gevonden heb op het net wat dit kan..


Edit:
Er is sinds kort wel een jquery oplossing
http://regebro.wordpress.com/2012/02/01/release-announcement-jquery-recurrenceinput-and-plone-formwidget-recurrence/

Ik krijg hem alleen niet aan de praat. ( En vraag me tevens af hoe in deze oplossing een database omgaat met recurrences tot in het oneindige...)
Gewijzigd op 29/08/2012 12:59:54 door N K
 
N K

N K

07/09/2012 12:06:43
Quote Anchor link
Heeft iemand nog een idee wat er hier mis gaat?
Ik heb al een workaround met een PHP datepicker maar een jquery datepicker zou alleen wat mooier zijn.
 
Kris Peeters

Kris Peeters

07/09/2012 12:43:39
Quote Anchor link
Zeg, is dit niet ongeveer wat je nodig hebt?

ooit geschreven voor iemand hier; ik vind het topic niet meer terug.
De bedoeling was dat enkel maandag en vrijdag te selecteren zijn.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
  <head>
    <style>a:hover {font-style:italic}</style>
    <title>Datepicker demonstratie</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script>
      $(function() {
        $( "#datepicker" ).datepicker({
          showOtherMonths: true,
          selectOtherMonths: true,
          firstDay: 1,                   // eerste dag: maandag
          dateFormat: 'yy-mm-dd',
          beforeShowDay: function(date){
            var day = date.getDay();
            return [ day == 1 || day == 5, ""]
          },
        });
      });
    </script>
  </head>
  <body>
    <h2>Datepicker demonstratie</h2>
      Date:
      <input id="datepicker" type="text" />
  </body>
</html>


Dan is het gewoon helemaal jQuery en zijn er geen botsingen meer.
Gewijzigd op 07/09/2012 12:45:11 door Kris Peeters
 
N K

N K

07/09/2012 13:21:13
Quote Anchor link
mmm, zou kunnen maar die is een stuk minder uitgebreid.
Ik denk dat ik het anders ga aanpakken en gewoon de gebruiker zelf meerdere data ga laten invullen. Dit lijkt me wel een mooie daarvoor:

http://multidatespickr.sourceforge.net/
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.