IT adventure / KJ in IT: 2013-03-17

jQuery / JSON / get some date from other file

How to retrieve some information from other page using JSON?

Example of how to use JSON.

1. index.php

<html>
<head>
<title>jQuery</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
 
    $(document).ready(function()
    {
        $("#J_action_getData").click( function()        
        {
            $.post("fileWithData.php", { "getData": "cars" }, function(data)
            {
                var obj = jQuery.parseJSON(data);
                $("#mymsg").html( obj[0] + " " + obj[1] ); 
            });            
        });        
    });
 
</script>

</head>

<body> 
    
    <a id="J_action_getData" href="javascript:void(0)" >Show message</a>

    <div id="mymsg">
        
    </div>

</body>
</html>

2. fileWithData.php

<html>
<head>
<title>j</title>

</head>

<body> 
<?php
    if($_POST['getData'] == "cars")
    {
        $cars = array();
        $cars[1] = "Mercedes";
        $cars[2] = "Audi";
        echo json_encode($cars);
    }        
?>
</body>
</html>

Some details about parse JSON here.
Details of encoding and decoding JSON in PHP here.

jQuery / adding CSS style dynamically

How to add some css styles dynamically with jQuery?

jQuery comes with css() function to do that.

Example shows how to change dynamically text color.

<html>
<head>
<title>jQuery</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
 
    $(document).ready(function()
    {
        $("#J_action_addCssStyle").click( function()
        {
            $("#mymsg").css("color", "red");
        });        
    });
 
</script>

</head>

<body> 
    
    <a id="J_action_addCssStyle" href="javascript:void(0)" >Show message</a>

    <div id="mymsg">
        This is my text.
    </div>

</body>
</html>

Official documentation of jQuery css is here.

jQuery / dynamic removing CSS class

How to remove some css class dynamically with jQuery?

jQuery comes with removeClass() function to do that.

Example of dynamically removing css class.

<html>
<head>
<title>jQuery</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<style type="text/css">
    .backgroundGreen{
        background-color: #00ff00;
    }
 </style>

<script type="text/javascript">
 
    $(document).ready(function()
    {
        $("#J_action_removeCssClass").click( function()
        {
            $("#mymsg").removeClass("backgroundGreen");
        });        
    });
 
</script>

</head>

<body> 
    
    <a id="J_action_removeCssClass" href="javascript:void(0)" >Show message</a>

    <div id="mymsg" class="backgroundGreen">
        This is my text.
    </div>

</body>
</html>

Official documentation of jQuery removeClass is here.

jQuery / dynamic adding CSS class

How to add some css class dynamically with jQuery?
jQuery comes with addClass() function to do that.

Example of dynamically adding css class.

<html>
<head>
<title>jQuery</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<style type="text/css">
    .redFont{ 
        color: #FF0000;
    }
 </style>

<script type="text/javascript">
 
    $(document).ready(function()
    {
        $("#J_action_addCssClass").click( function()
        {
            $("#mymsg").addClass("redFont");
        });        
    });
 
</script>

</head>

<body> 
    
    <a id="J_action_addCssClass" href="javascript:void(0)" >Show message</a>

    <div id="mymsg">
        This is my text.
    </div>

</body>
</html>

Official documentation is here.

jQuery library from Google - online

How to use jQuery library from Google?

It is free to use and you can use it on your page if it is connected to the web.

Just put below code to your www page between <head></head> tags.

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>

</body>
</html>

Search for a new libraries here.

jQuery click() function.

jQuery click()
Simple Hello World display on mouse click.

When "Show message" link is clicked it calls jQuery click() function.

Example of jQuery click() function

<html>
<head>
<title>jQuery</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
 
    $(document).ready(function()
    {
        $("#J_action_showMessage").click( function()
        {
            $("#mymsg").html("Hello World");
        });        
    });
 
</script>

</head>

<body> 
    
    <a id="J_action_showMessage" href="javascript:void(0)" >Show message</a>

    <div id="mymsg">

    </div>

</body>
</html>

Official documentation of jQuery click() function here.

IT adventure / KJ in IT

Pages

Tuesday, March 19, 2013