CODEWITHSUNDEEP
jquerycoldfusion
user891859
user891859

Reputation: 293

JQuery .load() Issue

I am trying to get the following .load() method to work. The current code does not display the requested page within the div as I would think it should. Thoughts? Also what is the best way to test the .load() method and find out if it is working?

ParentPage.cfm

<script>
$("#go_val").click(function() {
  $('#test_div').load('htdocs/mysite/index.cfm?event=test #container');
}
</script>
<form name="parent_form" id="parent_form">
<input type="text" name="myText" id="my_Text" value="TestValue">
<input type="button" name="go" id="go_val" value="GO">
</form>
<div id="test_div"></div>

test.cfm (aka index.cfm?event=test)

<html>
<head>
<title>test</title>
</head>
<body>
<div id="container">Yippee</div>
</body>
</html>

Thanks ahead of time. All suggestions are appreciated.

Upvotes: 3

Views: 980

Answers (4)

Michael BW
Michael BW

Reputation: 1070

When I duplicated your code I saw an error in the firebug console so Adam had the correct way to debug the problem.

*

missing ) after argument list

*

I changed the function to :

$("#go_val").click(function() {
   $('#test_div').load('index.cfm?event=test #container');
})

Note the ending parenthesis and that you only need to have the reference to index.cfm (no path) since it is in the same directory as the parent page.

I have done this so many times and firebug is the only way I have made it through to the other side. Best of Luck.

Upvotes: 0

TheDelChop
TheDelChop

Reputation: 7998

You need to specify the click function is registered after the document is ready, since it doesn't exist when you declare it.

<script>
  $(document).ready(){
    $("#go_val").click(function() {
      $('#test_div').load('htdocs/mysite/index.cfm?event=test #container');
    }
  }
</script>

Upvotes: 1

Johan
Johan

Reputation: 35194

Try

$.ajax({
    url: 'htdocs/mysite/index.cfm?event=test',
    dataType: 'html',
    success: function(htmldata){
        $('#test_div').html($(htmldata).find('#container').html());
    },
    error: function(a,b,c) {
        alert('Something went wrong: ' + b);
    }
});

Upvotes: 0

Adam Merrifield
Adam Merrifield

Reputation: 10407

You have to set it on load.

$(function(){
$("#go_val").click(function() {
  $('#test_div').load('htdocs/mysite/index.cfm?event=test #container');
}
});

Also best way to test is to use http://getfirebug.com/ and view the console to see if the request is being made.

Upvotes: 2

Related Questions