Solved

Mootools to get html data

Posted on 2010-11-17
9
634 Views
Last Modified: 2012-05-10
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
Comment
Question by:duncanb7
  • 4
  • 3
  • 2
9 Comments
 
LVL 6

Expert Comment

by:Codebot
ID: 34162862
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
 
LVL 6

Accepted Solution

by:
Codebot earned 350 total points
ID: 34162939
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
 
LVL 43

Expert Comment

by:Rob
ID: 34162944
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 13

Author Comment

by:duncanb7
ID: 34165900
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
 
LVL 13

Author Comment

by:duncanb7
ID: 34166038
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
 
LVL 6

Expert Comment

by:Codebot
ID: 34166325
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
 
LVL 13

Author Comment

by:duncanb7
ID: 34166391
coud you say in detail, I can't catch it
0
 
LVL 43

Assisted Solution

by:Rob
Rob earned 150 total points
ID: 34168341
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
 
LVL 13

Author Closing Comment

by:duncanb7
ID: 34168551
Thanks for all of your help,

It seems I am getting into
Ajax world, learning at
the beigining is hard but worth it
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question