SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    multiple js script

    Greetings!

    Is the order of my external and internal js has something to do with the effectiveness of my code? I asked it because my datepickerUI tools didn't work when I started to integrate it with other script, but when I tried in a single page it does.

    Code:
    <script src="date/jquery-1.7.1.js"></script>
    	<script src="date/jquery.ui.core.js"></script>
    	<script src="date/jquery.ui.widget.js"></script>
    	<script src="date/jquery.ui.datepicker.js"></script>
    	<script src="js/jquery.min.js"></script>
    	<script src="js/jquery.placeholder.js"></script>
    	<script type="text/javascript" src="js/mootools.js"></script>
    	<script type="text/javascript">
    		window.addEvent('domready', function(){
    	                $('registerForm').addEvent('submit', function(e) {
    	                    new Event(e).stop();
    	                    var log = $('log_res').empty().addClass('ajax-loading');
    	                    this.send({
    	                        update: log,
    	                        onComplete: function() {
    	                            log.removeClass('ajax-loading');
    	                        }
    	                    });
    	                });
    	            });
    	</script>
    <script>
    	$(function() {
    		$( "#datepicker" ).datepicker();
    	});
    	</script>

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The problem is that your using Mootools and jQuery which both take advantage of the $ variable, to release jQuery from it read though the following documentation http://api.jquery.com/jQuery.noConflict/

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    There are details on how to handle this in post #102 of our tips and techniques sticky thread.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    did I get it right? seems like everything is new to me.

    Code:
    <script type="text/javascript">
    		window.addEvent('domready', function(){
    	                $('registerForm').addEvent('submit', function(e) {
    	                    new Event(e).stop();
    	                    var log = $('log_res').empty().addClass('ajax-loading');
    	                    this.send({
    	                        update: log,
    	                        onComplete: function() {
    	                            log.removeClass('ajax-loading');
    	                        }
    	                    });
    	                });
    	            });
    	</script>
    	<script>jQuery.noConflict();</script>
    	<script>
    	$(function() {
    		$( "#datepicker" ).datepicker();
    	});
    	</script>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by claro View Post
    did I get it right?
    Not quite. Once you issue the noconflict command, jQuery no longer has access to the global $ argument. Instead, you have to use the jQuery object instead, and provide $ as an argument so that you can then use that from within the function.

    For example:

    Code javascript:
    jQuery.noConflict();
    jQuery(function ($) {
        // jQuery's $ can be used in here, due to the function argument
        ...
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I did not still get it.

    <script>
    jQuery.noConflict();
    jQuery(function($) {
    $( "#datepicker" ).datepicker();
    });
    </script>

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Do you have a link we can use to see the code in action as i feel like there is more then just this one conflict that's causing your resource issues.

  8. #8
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    As much as I want it, I don't have it as of now. I tried it in other page, datepicker works, when I integrate it with mootols it doesn't work now. I really believed that the problem that jquery and mootols can't work at the same timee, because when I comment out the mootols, datepicker works. Below is my actual code.

    <script src="date/jquery-1.7.1.js"></script>
    <script src="date/jquery.ui.core.js"></script>
    <script src="date/jquery.ui.widget.js"></script>
    <script src="date/jquery.ui.datepicker.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.placeholder.js"></script>
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript">
    window.addEvent('domready', function(){
    $('registerForm').addEvent('submit', function(e) {
    new Event(e).stop();
    var log = $('log_res').empty().addClass('ajax-loading');
    this.send({
    update: log,
    onComplete: function() {
    log.removeClass('ajax-loading');
    }
    });
    });
    });
    </script>
    <script>
    jQuery.noConflict();
    jQuery(function ($){

    $(function() {
    $( "#datepicker" ).datepicker();
    })
    };
    </script>

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    What you have above currently won't work as you don't have a closing ) on };, also what you do have now is redundant as your wrapping a DOM ready function within a DOM ready function which is running 2 DOM ready events instead of one. What you posted before my previous post should be working fine regardless of whether Mootools exists in the page or not, unless we can get a demo of the demo it's really difficult to see what the actual issue is. The only other thing i can offer is you try the following code which makes use of a custom jQuery reference.

    Code JavaScript:
    $jq = jQuery.noConflict();
     
    $jq(function($) {
        $( "#datepicker" ).datepicker();
    });

  10. #10
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I hope posting my entire code would help.
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>New Student</title>
    <meta http-equiv="refresh" url="stud_new.php"/>
    <link rel="stylesheet" href="date/demos.css">
    <link rel="stylesheet" href="date/jquery.ui.all.css">
    <script src="date/jquery-1.7.1.js"></script>
    <script src="date/jquery.ui.core.js"></script>
    <script src="date/jquery.ui.widget.js"></script>
    <script src="date/jquery.ui.datepicker.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.placeholder.js"></script>
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript">
    window.addEvent('domready', function(){
    $('registerForm').addEvent('submit', function(e) {
    new Event(e).stop();
    var log = $('log_res').empty().addClass('ajax-loading');
    this.send({
    update: log,
    onComplete: function() {
    log.removeClass('ajax-loading');
    }
    });
    });
    });
    </script>
    <script>
    $jq = jQuery.noConflict();
    $jq(function($) {
    $( "#datepicker" ).datepicker();
    });
    </script>
    </head>
    <body>
    <br/>
    <br/>
    <br/>
    <div id="container">
    <form method="post" id="registerForm" action="register.php">

    <P><strong><LABEL for="Id">Student ID/LABEL></strong>
    <input name="Id" type="text" class="input" id="Id" value="" placeholder= "Student ID" required setfocus/></P>

    <P><strong><LABEL for="FName">First name/LABEL></strong>
    <input name="FName" type="text" class="input" id="FName" value="" placeholder= "First Name" required /></p>

    <p><strong><LABEL for="LFame">Last name/LABEL></strong>
    <input name="LName" class="input" type="text" id="LName" value="" placeholder= "Last Name" required /></p>

    <p><strong><LABEL for="Sex">Gender/LABEL></strong>
    <select name = "Sex" class="input" >
    <option value = ""><--Select--></option>
    <option value = "Male">Male</option>
    <option value = "Female">Female</option>
    </select></p>

    <p><strong><LABEL for="Program">Program</LABEL></strong>
    <select name = "Program" class="input" >
    <option value = ""><--Select--></option>
    <option value = "Day">Day</option>
    <option value = "Evening">Evening</option>
    <option value = "Sunday">Sunday</option>
    </select>
    </p>

    <p><strong><LABEL for="Course">Course/LABEL></strong>
    <input name="Course" class="input" type="text" id="Course" value="" placeholder= "Course"/></p>

    <P><strong><LABEL for="Date">Date/LABEL></strong>
    <input type="text" id="datepicker" class="input" name= "Date" value = "" ></P>

    <P ><input type="image" name="register" class="submit-btn" src="image/submit.png" alt="submit" title="submit" />
    </P>


    </form>
    </div>
    <div id="log">
    <div id="log_res">
    <!-- SPANNER -->
    </div>
    </div>

    </body>
    </html>

  11. #11
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Do'h , i completly missed the issue. The problem is your including your Mootools code right between the jQuery library and your jQuery code, if you simply move your jQuery code before the Mootools code but keep the noConflict references it should work fine.

  12. #12
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Like this? still no work.
    <link rel="stylesheet" href="date/demos.css">
    <link rel="stylesheet" href="date/jquery.ui.all.css">
    <script src="date/jquery-1.7.1.js"></script>
    <script src="date/jquery.ui.core.js"></script>
    <script src="date/jquery.ui.widget.js"></script>
    <script src="date/jquery.ui.datepicker.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.placeholder.js"></script>
    <script>
    $jq = jQuery.noConflict();
    $jq(function($) {
    $( "#datepicker" ).datepicker();
    });
    </script>
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript">
    window.addEvent('domready', function(){
    $('registerForm').addEvent('submit', function(e) {
    new Event(e).stop();
    var log = $('log_res').empty().addClass('ajax-loading');
    this.send({
    update: log,
    onComplete: function() {
    log.removeClass('ajax-loading');
    }
    });
    });
    });
    </script>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •