SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Too many JS scripts in <head> ???

    Hey,

    I am trying to run a page with 2 types of Javascript plugins. Now if i remove one the other works.. They both dont work at the same time, why is this?

    I have the following in my head tag:-

    <script src="js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>

    <script src="js/jquery.history_remote.pack.js" type="text/javascript"></script>

    <script src="js/jquery.tabs.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {

    $('#container-1').tabs();
    $('#container-2').tabs(2);
    $('#container-3').tabs({ fxSlide: true });
    $('#container-4').tabs({ fxFade: true, fxSpeed: 'fast' });
    $('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
    $('#container-6').tabs({
    fxFade: true,
    fxSpeed: 'fast',
    onClick: function() {
    alert('onClick');
    },
    onHide: function() {
    alert('onHide');
    },
    onShow: function() {
    alert('onShow');
    }
    });
    $('#container-7').tabs({ fxAutoHeight: true });
    $('#container-8').tabs({ fxShow: { height: 'show', opacity: 'show' }, fxSpeed: 'normal' });
    $('#container-9').tabs({ remote: true });
    $('#container-10').tabs();
    $('#container-11').tabs({ disabled: [3] });

    $('<p><a href="#">Disable third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
    $(this).parents('div').eq(1).disableTab(3);
    return false;
    });
    $('<p><a href="#">Activate third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
    $(this).parents('div').eq(1).triggerTab(3);
    return false;
    });
    $('<p><a href="#">Enable third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
    $(this).parents('div').eq(1).enableTab(3);
    return false;
    });

    });
    </script>

    <script src="js/jquery.validate.js" type="text/javascript"></script>

    <script src="js/cmxforms.js" type="text/javascript"></script>
    <script type="text/javascript">
    //$.validator.setDefaults({
    // submitHandler: function() { alert("submitted!"); }
    //});

    $().ready(function() {
    // validate the comment form when it is submitted
    $("#advertise").validate();

    // validate signup form on keyup and submit
    $("#signupForm").validate({
    rules: {
    firstname: "required",
    lastname: "required",
    username: {
    required: true,
    minlength: 2
    },
    password: {
    required: true,
    minlength: 5
    },
    confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#password"
    },
    email: {
    required: true,
    email: true
    },
    topic: {
    required: "#newsletter:checked",
    minlength: 2
    },
    agree: "required"
    },
    messages: {
    firstname: "Please enter your firstname",
    lastname: "Please enter your lastname",
    username: {
    required: "Please enter a username",
    minlength: "Your username must consist of at least 2 characters"
    },
    password: {
    required: "Please provide a password",
    minlength: "Your password must be at least 5 characters long"
    },
    confirm_password: {
    required: "Please provide a password",
    minlength: "Your password must be at least 5 characters long",
    equalTo: "Please enter the same password as above"
    },
    email: "Please enter a valid email address",
    agree: "Please accept our policy"
    }
    });

    // propose username by combining first- and lastname
    $("#username").focus(function() {
    var firstname = $("#firstname").val();
    var lastname = $("#lastname").val();
    if(firstname && lastname && !this.value) {
    this.value = firstname + "." + lastname;
    }
    });

    // check if confirm password is still valid after password changed
    $("#password").blur(function() {
    $("#confirm_password").valid();
    });

    //code to hide topic selection, disable for demo
    var newsletter = $("#newsletter");
    // newsletter topics are optional, hide at first
    var inital = newsletter.is(":checked");
    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
    var topicInputs = topics.find("input").attr("disabled", !inital);
    // show when newsletter is checked
    newsletter.click(function() {
    topics[this.checked ? "removeClass" : "addClass"]("gray");
    topicInputs.attr("disabled", !this.checked);
    });
    });

    </script>
    I need all the javascript to work..

    The first set of code is enabling UI tabs, and the second bit is validated a form.

    Any ideas why ia m having this problem?

    Regards

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    Aveiro, Portugal
    Posts
    165
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The first thing that comes to mind is maybe the 2 scripts plus your inline code are conflicting in some way.

    We can't tell what it is with the code you posted. We don't know what's in the JS files.

    Do you use firefox? Try installing firebug and checking what error message appear.

    HTH
    Yours truely
    Mário Ramos


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
  •