how to get div content from another page using ajax

Question

i have a local 2 html files, what i want to do is use ajax call in the first html to change the content of a div from another html file div, but some how the function alert, but the content in the div doesnt change also the alert return (object object) here is what i use in the first html

function loadQuiz(){ 
        $.ajax({
            url: 'loadQuiz.html',
            success: function(data) {
                            data=$(data).find('div#test');
                $('#fill').html(data);
                alert(data);
             }
            });


<span id="fill">
        </span>

here is the other html file that i want to get the content of the div

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/styling.css" />
    <link rel="stylesheet" href="css/colors.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="jquery.sortable.js"></script>
  </head>
  <body>
<div id="bar">
<li class="disabled"><span id="noQuestions"><a href="#top" class"toplink"=""> 
Top</a></span> </li> 
<!-- <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li id="quest-header"><a href="#top"> Top</a></li> <li id="quest1"><a href="#Question1Edit"><i id="q1" class="icon-remove"></i> Question 1</a></li> <li id="quest2"><a href="#Question2Edit"><i id="q2" class="icon-remove"></i> Question 2</a></li> <li id="quest3"><a href="#Question3Edit"><i id="q3" class="icon-remove"></i> Question 3</a></li> <li id="quest4"><a href="#Question4Edit"><i id="q4" class="icon-remove"></i> Question 4</a></li> <li id="quest5"><a href="#Question5Edit"><i id="q5" class="icon-remove"></i> Question 5</a></li> --> 
<li id="nav1" draggable="true"> Question 1</li><li id="nav2" draggable="true"> Question 2</li><li id="nav3" draggable="true"> Question 3</li>
</div>

<div id="test">
   <div class="editBar" id="Question1Edit"><img class="trash" src="images/trashcan_closed.png" onmouseover="this.src='images/trashcan_open.png'" onmouseout="this.src='images/trashcan_closed.png'" alt="Trash" onclick="deleteQuestion(1)"> 
   <img class="edit" src="images/edit.png" onclick="editQuestion(1)" alt="edit"> 1. True or False: loaded question 1 (7 Points) <br><br><div class="answerField"><div class="answerField"><input type="radio" name="Answer1Value" value="True" checked="checked"> True<br><input type="radio" name="Answer1Value" value="False"> False<br></div></div></div><br><div class="editBar" id="Question2Edit"><img class="trash" src="images/trashcan_closed.png" onmouseover="this.src='images/trashcan_open.png'" onmouseout="this.src='images/trashcan_closed.png'" alt="Trash" onclick="deleteQuestion(2)"> <img class="edit" src="images/edit.png" onclick="editQuestion(2)" alt="edit"> 2. Multiple Choice: loaded question 2 (6 Points) <br><br><div class="answerField"><div class="answerField"><input type="checkbox" name="Answer2Value" value="Answer1"> a <br><input type="checkbox" name="Answer2Value" value="Answer2" checked="checked"> b <br><input type="checkbox" name="Answer2Value" value="Answer3"> c <br></div></div><br><div class="editBar" id="Question3Edit"><img class="trash" src="images/trashcan_closed.png" onmouseover="this.src='images/trashcan_open.png'" onmouseout="this.src='images/trashcan_closed.png'" alt="Trash" onclick="deleteQuestion(3)"> <img class="edit" src="images/edit.png" onclick="editQuestion(3)" alt="edit"> 3. Fill After: loaded question 3 (6 Points) <br><br><div class="answerField"><textarea name="Answer3Value" cols="40" rows="5">annswer</textarea></div></div><br></div>
</div>  
  </body>
</html>

From api.jquery.com/load, $('#result').load('ajax/test.html #container'); — jonhopkins
– jonhopkins, Commented Aug 1, 2013 at 0:36
what can i need to fix if i need to stick with the ajax call — user1968057
– user1968057, Commented Aug 1, 2013 at 0:47
Does $('#fill').html(data.html()); work? .find('div#text') returns a jQuery object, so I think you actually have to extract the html out of it before assigning it to #fill — jonhopkins
– jonhopkins, Commented Aug 1, 2013 at 0:54

Bill Criswell · Accepted Answer · 2013-08-01 00:35:51Z

3

You can use jQuery's .load() for this very reason.

$('#another-page-div-loads-here').load('another-page.html #some-div-on-other-page');

Here it is for your example in particular.

$('#fill').load('loadQuiz.html #test');

answered Aug 1, 2013 at 0:35

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1968057 Over a year ago

yes i know that can be done easy, but my prof is looking for ajax call.

Bill Criswell Over a year ago

This is using ajax. However, if you want to stick with your code, you probably want to do $(data).contents().find('div#test').

Bill Criswell Over a year ago

Actually, just change your code from $(data).find('div#test'); to $(data).filter('div#test');

Collectives™ on Stack Overflow

how to get div content from another page using ajax

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related