• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 664
  • Last Modified:

Mootools to get html data

Dear Expert,

I try one tutorial example  for mootools to just want to extract html data of example.html into div tag, but
it always no response and no javascript error .

Please advise what is mistake ? is it related to library i include
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
that is outdated. Coud you try it at your side ?


DUncan

<html>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>

<script type="text/javascript">



function GetMyAJAXFile() {
  var myHTMLRequest = new Request.HTML({
     url:'http://www.mywebsite/example.html',
     onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
        // This will b e triggered after the document is loaded succesfully
        //
        $('MyDiv').innerHTML = responseHTML;
     }
}).post();
}
</script>


<body>

<input type='button' onclick='GetMyAJAXFile();' value='click me' />
<div id="MyDiv">loading</div>
</body>
</html>

Open in new window

0
duncanb7
Asked:
duncanb7
  • 4
  • 3
  • 2
2 Solutions
 
CodebotCommented:
First manually check page
http://www.mywebsite/example.html
to see if it is giving some results.
then use alert(responseHTML);
before
$('MyDiv').innerHTML = responseHTML;

Also change onclick='GetMyAJAXFile();'
to
onclick="GetMyAJAXFile();"

double quotes
0
 
CodebotCommented:
or use this when.
I tested this one and working fine
Just change the page name according to your needs.
<html>


<script type="text/javascript" src="http://demos111.mootools.net/demos/mootools.svn.js"></script>
      <script type="text/javascript" src="http://demos111.mootools.net/scripts/demos.js"></script>


<script type="text/javascript">
            window.addEvent('domready', function(){
                  $('button1').addEvent('click', function(e) {
                        e = new Event(e).stop();
                  
                        var url = "http://demos111.mootools.net/demos/Ajax/lipsum.html";
                  
                        /**
                         * The simple way for an Ajax request, use onRequest/onComplete/onFailure
                         * to do add your own Ajax depended code.
                         */
                        new Ajax(url, {
                              method: 'get',
                              update: $('MyDiv')
                        }).request();
                  });
                  
            });
      </script>



<body>

<input type='button' id="button1" onclick='GetMyAJAXFile();' value='click me' />
<div id="MyDiv">loading</div>
</body>
</html>
0
 
RobOwner (Aidellio)Commented:
Hi Duncan,

you need to remove the http://www.... from the url

it should just be

url: "/example.html"
...

@Codebot: single or double quotes shouldn't be a problem
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
duncanb7Author Commented:
Dear CobeBot, it works for your code after I test, but the question
is why when I url  other html file into mysite, It won't response to the
 content change  of the html file I made . It always displays previous innHTML
content until I go to web other wbesite and come back again and run your code
again in the same IE7 windows OR I quit IE7 and restart your code again, the innerHTML content is updated according to the change I made in the html file

I try your code in FireFox that is not working at all.

Please advise and attach code is replcament for   var url = "http://demos111.mootools.net/demos/Ajax/lipsum.html";, it call Sales1.htm, its div
tag is  <div id="Book1_25322" align=center x:publishsource="Excel">ABCD/div>

I made "ABCD" change to random character for testing Ajax.



Duncan





<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 12">
<link rel=File-List href="sales1_files/filelist.xml">
</head>

<body>
<!--[if !excel]>&nbsp;&nbsp;<![endif]-->
<!--The following information was generated by Microsoft Office Excel's Publish
as Web Page wizard.-->
<!--If the same item is republished from Excel, all information between the DIV
tags will be replaced.-->
<!----------------------------->
<!--START OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD -->
<!----------------------------->

<div id="Book1_25322" align=center x:publishsource="Excel">ABCD/div>


<!--------------------<img src="sales1_files/Book1_25322_image001.gif" alt=Chart1>--------->
<!--END OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD-->
<!----------------------------->
</body>

</html>

Open in new window

0
 
duncanb7Author Commented:
Re-sent for typing mistake


Dear CobeBot, it works for your code after I test, but the question
is why when I use  other url  html file into mysite, It won't response to the
 content change  of the html file I made . It always displays previous innHTML
content until I go to web other wbesite and come back again and run your code
again in the same IE7 windows OR I quit IE7 and restart your code again in new IE
 that the problem will be gone and the innerHTML content is updated according to the change I made in the html file

I try your code in FireFox that is not working at all

Please advise and attach code is replcament for   var url = "http://demos111.mootools.net/demos/Ajax/lipsum.html";, it call Sales1.htm, its div
tag is  <div id="Book1_25322" align=center x:publishsource="Excel">ABCD</div>

I made "ABCD" change to random character for testing Ajax.



Duncan

<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 12">
<link rel=File-List href="sales1_files/filelist.xml">
</head>

<body>
<!--[if !excel]>&nbsp;&nbsp;<![endif]-->
<!--The following information was generated by Microsoft Office Excel's Publish
as Web Page wizard.-->
<!--If the same item is republished from Excel, all information between the DIV
tags will be replaced.-->
<!----------------------------->
<!--START OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD -->
<!----------------------------->

<div id="Book1_25322" align=center x:publishsource="Excel">ABCD</div>


<!--------------------<img src="sales1_files/Book1_25322_image001.gif" alt=Chart1>--------->
<!--END OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD-->
<!----------------------------->
</body>

</html>

Open in new window

0
 
CodebotCommented:
try to change
<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">

First line with my code
0
 
duncanb7Author Commented:
coud you say in detail, I can't catch it
0
 
RobOwner (Aidellio)Commented:
sorry @Codebot this is linked with another question which is why it could be so confusing

there's no point changing the sales1.htm excel file because you'll overwrite it each time.

THE ISSUE IS THAT INTERNET EXPLORER CACHES AJAX REQUESTS

this is the big problem you are having.  to fix it you need to make your "request" unique each time

so using your code from the question i've added the following


     data: 'ignoreMe='+new Date().getTime(),

<html>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>

<script type="text/javascript">



function GetMyAJAXFile() {
  var myHTMLRequest = new Request.HTML({
     url:'http://www.mywebsite/example.html',
     data: 'ignoreMe='+new Date().getTime(),
     onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
        // This will b e triggered after the document is loaded succesfully
        //
        $('MyDiv').innerHTML = responseHTML;
     }
}).post();
}
</script>


<body>

<input type='button' onclick='GetMyAJAXFile();' value='click me' />
<div id="MyDiv">loading</div>
</body>
</html>

Open in new window

0
 
duncanb7Author Commented:
Thanks for all of your help,

It seems I am getting into
Ajax world, learning at
the beigining is hard but worth it
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now