Solved

Mootools to get html data

Posted on 2010-11-17
9
639 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Suggested Courses

627 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