Solved

Mootools to get html data

Posted on 2010-11-17
9
630 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 42

Expert Comment

by:Rob Jurd, EE MVE
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
 
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now