Custom Javascript Won't Run in Joomla

Question

I am using Joomla-3 for my websites and I have created a simple small JavaScript(ajax) file which I attached through the template config file(as seen on the template's documentation).

I also added my html in an article(without TinyMCE etc so I know it accepts my code). The script works fine in a simple .html or .php file but it doesn't work along with Joomla.

My script has 2 dependent ajax dropdown menus(static content). Do you have any ideas on what could go wrong?

Thank you in advance!

PS. You can find the code of my JavaScript here.

Here's the code:

$(window).load(function () {
  var services = [];

  services['service1'] = [{
      "name": "Giannis",
      "url": "giannis"
    }, {
      "name": "Kostas",
      "url": "kostas"
    }, {
      "name": "Fillipos",
      "url": "fillipos"
    }
  ];
  services['service2'] = [{
      "name": "Maria",
      "url": "maria"
    }, {
      "name": "Peter",
      "url": "peter"
    }, {
      "name": "Jack",
      "url": "jack"
    }
  ];

  services['service3'] = [{
      "name": "Dimitris",
      "url": "dimitris"
    }, {
      "name": "Takis",
      "url": "takis"
    }, {
      "name": "Gianna",
      "url": "gianna"
    }
  ];


  jQuery(document).ready(function () {
    jQuery("#services").change(function () {
      var selectedService = $(this).val();
      $('#doctors').children().remove();
      $('#doctors').append('<option value="Null">Click to select a Doctor</option>');
      jQuery.each(services[selectedService], function (ind, val) {
        $('#doctors').append('<option value="' + this.url + '">' + this.name + '</option>');
      })
    });

    jQuery("#doctors").change(function () {
      var redirServ = $('#services option:selected').val();
      var thePersonObject = services[redirServ];
      var goThere = $(this).val();
      var fullurl = 'http://www.website.com/our-services/' + redirServ + '/item/' + goThere;
      alert(fullurl);
      //location.href = 'http://www.website.com/our-services/' + redirServ + '/item/' + goThere; 
    });
  });
});

how can I check it? If i type in the console "jQuery("#services").change('service1');", it just returns "[select#services.classselect]" — manosim, Apr 09 '13 at 04:00
I've already opened it but don't know what to look for. Sorry. — manosim, Apr 09 '13 at 04:02
No. I also tried it in another single file (test.php for example) and it works. The problem is only with joomla. — manosim, Apr 09 '13 at 04:08
Actually I tried the Chrome console and I see that it returs an error. "Uncaught SyntaxError: Unexpected end of input" — manosim, Apr 09 '13 at 04:13
I Finally figured it out. The issue was that I didn't close the function properly. Thanks for your help with the console! — manosim, Apr 09 '13 at 04:17

score -1 · Answer 1 · answered Apr 09 '13 at 10:27

-1

Tried this? $(window).on(‘load’, function(){ // AWESOMENESS })

answered Apr 09 '13 at 10:27

BodgeIT

401
4
14

Custom Javascript Won't Run in Joomla

1 Answers1