Why does my jquery $.get() not display any response

Question

here's my shop.html snippet:

<li><a id="linkShop" href="shop.html">shop</a></li>
<div id="paneMiddle"></div>

and here's my main.js snippet:

$("a[id=linkShop]").click(function(){
 $.get("data1.html", function(response){
  $("div[id=paneMiddle]").html(response);
  alert("hi"+ response);
 }); 

});

data1.html has this content:

<p>data 1 - test</p>

i really don't know why this happened now, i've tried $.get in php before, but now, i'm trying to use jquery w/ jsp, running in tomcat server. idk why nothing goes out in my $.get() function.

help me..pls... T.T

Answer 1

You are not canceling the click event's default action on the clicked link so when you click the link, you'll just reload the page before the $.get gets any response.

Try

$("a[id=linkShop]").click(function(){
        $.get("data1.html", function(response){
                $("div[id=paneMiddle]").html(response);
                alert("hi"+ response);
        });     
        return false;
});

or

$("a[id=linkShop]").click(function(evt){
        $.get("data1.html", function(response){
                $("div[id=paneMiddle]").html(response);
                alert("hi"+ response);
        });     
        evt.preventDefault();
});

Answer 2

how about not using an < A > tag as your click target .. maybe just use a span instead ?

<li><span id='linkShop' style='cursor:pointer'>shop</span></li>
<div id="paneMiddle"></div>

and then simply

$("#linkShop").click(function() {
    $("#paneMiddle").load("data.html");
});

Answer 3

Try to cancel the default action of your link with event.preventDefault:

$("a[id=linkShop]").click(function(event){ 
        event.preventDefault(); 
        $.get("data1.html", function(response){ 

                $("div[id=paneMiddle]").html(response); 
                alert("hi"+ response); 
        });      
});

You can test live your script here, and you can modify your ajax loaded content here.

Answer 4

Try this one

$("a#linkShop").click(function(){
    $.get("data1.html", function(response){
            $("div#paneMiddle").html(response);
            alert("hi"+ response);
    });

});