CODEWITHSUNDEEP
javascripthtmlonclickruby-on-rails-4
Tao
Tao

Reputation: 990

javascript for clicking on a link doesn't work, but works after reloading the page

I have an html page, in the head I refer to the js file

<head>
   <script src="/queue.js"></script>
</head>

and in the body I have a link 

<a href="#" onclick="get_ajax()">click me</a>

the js file is as follows (using jQuery)

function get_ajax(){
    $.get("/queue/get_ajax", function(data){
       $("#div_id").html(data);
    });
}

clicking on the link doesn't trigger the js function, but reloading the page makes it working.

Is the problem caused by the way I refer to the js file?

It is a page of a rails 4 application.

the full head is like

 <head> 
<title>XXXX</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery/jquery.mobile-1.2.1.min.css" />
<link rel="stylesheet" href="my.css" />
    <script src="/queue.js"></script>
<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="jquery/jquery.mobile-1.2.1.min.js"></script>
  </head>

and I've found the resulting html page doesn't have <script src="/queue.js"></script> included, when I inspect the page source code in browser

Upvotes: 1

Views: 1134

Answers (4)

Yabada
Yabada

Reputation: 1758

You're including your js file which uses jquery BEFORE you include jquery. So the page doesn't know what you're "talking about" when parsing queue.js.

Include jquery first then queue.js, it should do the trick.

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20408

Try this

Change the order of your js files (library first)

<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="/queue.js"></script>

Then

<a href="javascript:void(0)" onclick="get_ajax()">click me</a>

Upvotes: 1

user1636522
user1636522

Reputation:

To prevent page from reloading you could also do this :

<a href="#" onclick="get_ajax(event)">click me</a>

function get_ajax(e) {
    e.preventDefault();
    $.get("/queue/get_ajax", function(data){
        $("#div_id").html(data);
    });
}

Upvotes: 0

Code Lღver
Code Lღver

Reputation: 15603

Instead of the:

<a href="#" onclick="get_ajax()">click me</a>

Use this:

<a href="javascript:void(0)" onclick="get_ajax()">click me</a>

javascript:void(0) will stop to reload the page.

Upvotes: 0

Related Questions