javascript - how to get div content from another page using ajax -
i have local 2 html files, want use ajax call in first html change content of div html file div, how function alert, content in div doesnt change alert return (object object) here use in 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 other html file want content of 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"> <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>
you can use jquery's .load() reason.
$('#another-page-div-loads-here').load('another-page.html #some-div-on-other-page'); here example in particular.
$('#fill').load('loadquiz.html #test');
Comments
Post a Comment