SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Ajax tutorial not working with my changes

    I was following this tutorial to create an ajax page (my first one): http://www.tizag.com/ajaxTutorial/ajaxphp.php -- this is the last page of the series of tuts.

    However, I changed one thing - instead of a php page, I used an HTML page containing only:

    <script>
    document.write("Hello World!");
    </script>

    I was hoping that the string would appear in the "time" box. But nothing appears there. I had also updated the script to reflect the HTML filename.

    I'm not using PHP, ASP or anything like that. I'd just like to stick to HTML, CSS, and JS (but not Jquery). How do I adjust the tutorial code to pull information from a page other than PHP or ASP -- preferably a JS page?

    My goal eventually is to add a + button to a page that will increase the font size with CSS. This code will go into an Android app. I believe I need to learn Ajax to make this happen. Because it's going in a device, I can't use PHP or ASP, which several Ajax tuts I've looked at, all use.

    Thanks!

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think I'm doing this all wrong. I think I can do what I want with LocalStorage.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi Steven,

    First, it makes no difference what technology creates the response, xmlhttprequest only ever returns XML or plain text which is usually HTML, or a JSON string which can be parsed back into a javascript object. Your page can just contain the text "Hello World!" without the script tags.

    If you followed along you should have code like this.
    log the responseText to make sure the code is working and it should read Hello World!
    Code:
    ajaxRequest.onreadystatechange = function(){
    	if(ajaxRequest.readyState == 4){
                    console.log(ajaxRequest.responseText);
    		document.myForm.time.value = ajaxRequest.responseText;
    	}
    }
    My goal eventually is to add a + button to a page that will increase the font size with CSS. This code will go into an Android app. I believe I need to learn Ajax to make this happen. Because it's going in a device, I can't use PHP or ASP, which several Ajax tuts I've looked at, all use.
    Of course you can
    All browsers understand is HTML, CSS and Javascript, it doesn't matter how it's generated.

    You don't need ajax either for a font-size switcher. Just alternate stylesheets and a small script to alternate them.
    http://www.alistapart.com/articles/relafont/

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It looks like the font-size switcher above depends on the user changing the font size for each page. I want the user to go to a designated page in the app, tap a 2x or 3x button and see (via Ajax) a sample of the pages' type changing. The user's preference is logged in localStorage, then every page will pull the value from localStorage and render itself according to the value previously entered.

    <div id="style"></div>
    <input type="button" onclick="changeLink1()" value="Default Size">
    <input type="button" onclick="changeLink2()" value="2x default">
    <input type="button" onclick="changeLink3()" value="3x default">

    <script>
    function changeLink1()
    {
    document.getElementById('style').innerHTML="";
    }
    function changeLink2()
    {
    document.getElementById('style').innerHTML="<style type='text/css'>p{font-size:1.3em;}</style>";
    }
    function changeLink3()
    {
    document.getElementById('style').innerHTML="<style type='text/css'>p{font-size:1.6em;}</style>";
    }
    </script>

    Right now, I don't know how to get the value into localStorage so the other pages can render the styles.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You misunderstand what Ajax does. It communicates with the server.

    In this case you don't need to, that script I posted saves the preference as a cookie - which is similar to localstorage but works for everyone.
    http://www.alistapart.com/d/relafont/styleswitcher.js
    HTML Code:
    <input type="button" onclick="setActiveStyleSheet('A')" value="Default Size">
    <input type="button" onclick="setActiveStyleSheet('A+')" value="2x default">
    <input type="button" onclick="setActiveStyleSheet('A++')" value="3x default">
    Please try following that tutorial because it does exactly what you want.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •