Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Mootools to get html data

Posted on 2010-11-17
9
Medium Priority
?
652 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 1400 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 600 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one 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

916 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