faith solution: jquery

Showing posts with label jquery. Show all posts

custom jquery image slider plugin

create a js and insert this code


(function($)

{

$.slideshow=function(selector,options)

{

    var settings=

    {

    "delay":2000,

    "fadespeed":500,

    };

    $.extend(settings,options);

    var obj = $(selector);

        var img = obj.children('img');

        var count = img.length;

    img.eq(0).show(); 

  

    i=0;

    setInterval(function()

       {

       img.eq(i).fadeOut(settings.delay);

       i = (i+1==count) ? 0:i=i+1;

       img.eq(i).fadeIn(settings.fadespeed);

       },2000);

      

};

}(jQuery));

create a Html file and insert this
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bootstrap/js/jquery.js"></script>
<script src="js/slideshow.js"></script>
<link rel="stylesheet" href="css/slidshow.css">
</head>
<body>
<section class="slider">
<img src="image/1.jpg">
<img src="image/2.jpg">
<img src="image/3.jpg">
<img src="image/4.jpg">
</section>
<script>
(function($)
{
$(document).ready(function(e)
{
options=
{
"delay":2000,
"fadespeed":600,
};
$.slideshow(".slider",options);
});

}(jQuery));
</script>
</body>
</html>

delete update using jquery in codeigniter

note create a js in codeigniter foler and add jquery to it
create a database database
load url,form_validation,form to auto load.php
set database.php

Form.php(Controller)

<?php
defined('BASEPATH') OR EXIT('Dirrect Access Not Allowed');
class Form_model extends CI_Model
{
    public function __construct() {
        parent::__construct();
        $this->load->database();
    }
    public function add($data)
    {
     return $this->db->insert('exp_registeration',$data);


    }
    public function show()
    {
        $query=$this->db->query("SELECT * FROM exp_registeration");
        return $query->result();
    }
    public function remove($id)
    {
       $this->db->wehre('id',$id);
       $this->db->delete("exp_registeration");
    }
    public function update($data)
    {
        $update_data=array('name'=>$data[0],'age'=>$data[1],'emailid'=>$data[2],'phoneno'=>$data[3],'address'=>$data[4]);
$this->db->where('id',$data[5]);
$this->db->update("exp_registeration",$update_data);
    }
   }?>

form_view.php(view file)

<link href="<?php echo base_url()."/css/style.css"; ?>" rel="stylesheet">
<form method="post" action="<?php echo site_url('Form/insert'); ?>">
    <table border="1" id="table_form">
        <tr>
            <td>
                <label>Name</label>
            </td>
            <td>
                <input type="text" name="student_name" value="<?php echo set_value('student_name');?>">
            </td>
        </tr>

        <tr>
            <td>
                <label>Age</label>
            </td>
            <td>
                <input type="text" name="age" value="<?php echo set_value('age');?>">
            </td>
        </tr>

        <tr>
            <td>
                <label>Email id</label>
            </td>
            <td>
                <input type="text" name="email_id" value="<?php echo set_value('email_id');?>">
            </td>
        </tr>

        <tr>
            <td>
                <label>Phone Number</label>
            </td>
            <td>
                <input type="text" name="phone_number" value="<?php echo set_value('phone_number');?>">
            </td>
        </tr>

        <tr>
            <td>
                <label>Address</label>
            </td>
            <td>
                <input type="text" name="address"value="<?php echo set_value('address');?>">
            </td>
        </tr>

        <tr>
            <td>
                <label>Password</label>
            </td>
            <td>
                <input type="text" name="password" value="<?php echo set_value('password');?>">
            </td>
        </tr>

        <tr>
            <td>
                <label>Retype Password</label>
            </td>
            <td>
                <input type="text" name="rpassword" value="<?php echo set_value('rpassword');?>">
            </td>
        </tr>

        <tr>
            <td>
                <input type="submit" name="save" value="Save">
            </td>
            <td>
                <input type="submit" name="show" value="Show">
            </td>
        </tr>
    </table>

</form>
<?php
echo validation_errors();
?>
<?php
if(isset($_REQUEST['show']))
{
    redirect('Form/show');
}
?>

Display_student_data.php(view)

<header>

    <script src="<?php echo base_url()."js/jquery.js"?>"></script>
</header>
<form method="post" id="form1">


    <table border="1">
        <th>Name</th>
        <th>Age</th>
        <th>Email</th>
        <th>Phone NO</th>
        <th>Address</th>
        <th>Operation</th>
<?php
$i=1;
foreach ($result as $data)
{

?>
        <tr>
            <td><input type="text" name="name" value="<?php echo $data->name;?>" id=<?php echo "name".$i;?>></td>
            <td><input type="text" name="name" value="<?php echo $data->age;?>" id=<?php echo "age".$i;?>></td>
            <td><input type="text" name="name" value="<?php echo $data->emailid;?>" id=<?php echo "email".$i;?>></td>
            <td><input type="text" name="name" value="<?php echo $data->phoneno;?>" id="<?php echo "phone".$i;?>"></td>
            <td><input type="text" name="name" value="<?php echo $data->address;?>" id="<?php echo "address".$i;?>"></td>
            <td><a href="<?php echo site_url()."/Form/edit/".$data->id; ?>" id="edit<?php echo $i;?>">Edit</a>   <a href="<?php echo site_url()."/Form/delete/".$data->id;?>" id="delete">Delete</a></td>
        </tr>
<?php
$i++;
}
?>
    </table>
</form>
<script>
    $(document).ready(function(e)
    {

    limit=<?php echo $i-1;?>;

       $('a').click(function(e){
    choice=this.id.substr(0,this.id.length-1);

           id_=this.id.slice(-1);
           entryno=this.href.slice(-1);

           e.preventDefault();
           if(choice=="edit")
           {
           name=$("#name"+id_).val();
           age=$("#age"+id_).val();
           email=$("#email"+id_).val();
           phone=$("#phone"+id_).val();
           address=$("#address"+id_).val();
           data=name+"/"+age+"/"+email+"/"+phone+"/"+address+"/"+entryno;
           $.ajax({
                    url:'edit',
                    type:'post',
                    processData: false,
                    data:'data='+data,
                    success: function (data, textStatus, jqXHR) {
                        alert('Edited');
                    },

                    });
                }
                else
                {
                   $.ajax({
                       url:'delete',
                       type:'post',
                       processData: false,
                       data:'id='+entryno,
                   });
                }
    });

    });
</script>

Form_model.php(model)

<?php
defined('BASEPATH') OR EXIT('Dirrect Access Not Allowed');
class Form_model extends CI_Model
{
    public function __construct() {
        parent::__construct();
        $this->load->database();
    }
    public function add($data)
    {
     return $this->db->insert('exp_registeration',$data);


    }
    public function show()
    {
        $query=$this->db->query("SELECT * FROM exp_registeration");
        return $query->result();
    }
    public function remove($id)
    {
       $this->db->wehre('id',$id);
       $this->db->delete("exp_registeration");
    }
    public function update($data)
    {
        $update_data=array('name'=>$data[0],'age'=>$data[1],'emailid'=>$data[2],'phoneno'=>$data[3],'address'=>$data[4]);
$this->db->where('id',$data[5]);
$this->db->update("exp_registeration",$update_data);
    }


}

?>

table structure

-- phpMyAdmin SQL Dump
-- version 3.5.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Jul 02, 2015 at 03:50 PM
-- Server version: 5.5.24-log
-- PHP Version: 5.3.13

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `database`
--

-- --------------------------------------------------------

--
-- Table structure for table `exp_registeration`
--

CREATE TABLE IF NOT EXISTS `exp_registeration` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(200) NOT NULL,
`age` int(11) NOT NULL,
`emailid` varchar(300) NOT NULL,
`phoneno` int(11) NOT NULL,
`address` varchar(300) NOT NULL,
`password` varchar(400) NOT NULL,
PRIMARY KEY (`emailid`),
UNIQUE KEY `id` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- Dumping data for table `exp_registeration`
--

INSERT INTO `exp_registeration` (`id`, `name`, `age`, `emailid`, `phoneno`, `address`, `password`) VALUES
(2, 'hithin', 25, 'hh@gmail.com', 2147483647, 'ekn njarakal', 'c8383b5122dfc6cbf715d84167656d39'),
(3, 'abcf', 25, 'hhiitthhiinn@gmail.com', 2147483647, 'kerela ernakulam njarakal', 'e2fc714c4727ee9395f324cd2e7f331f');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

how to display images and genderate popup image when click using jqueryui,php,mysql

imagedisplay.php
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<?php
@mysql_connect("localhost","root","");
@mysql_select_db("database");
$query="select * from gallery";
$temp=@mysql_query($query);
?>
      <div id="imagedisplay" >
    <img src="#" id="dialogimage">
</div>

<div id="image">
    <?php while ($result=@mysql_fetch_assoc($temp))
    {
        //echo $result["imagepath"];
        ?>
    <a href="imagedisplay.php?id=<?php echo $result["id"];?>" id="atag">
    <img src="<?php echo $result["imagepath"];?>">
    </a>
    <?php }?>
</div>
      <script type="text/javascript">
      $(document).ready(function(e){
           $( "#imagedisplay" ).dialog({
               autoOpen: false,
               width:700,
               height:00,
               model:true,
               resizable:false
            });
            $(".ui-button").click(function(e){
               $("#image").show();
            });
          $("a").click(function(e){
              e.preventDefault();

              var id="imagedisplayscript.php?id="+this.href.slice(-1);

             $.ajax(
                     {
                         url:id,
                 processData: false,
                 cache: false,
                 type: 'POST',
                 success: function (data, textStatus, jqXHR) {

                     $("#dialogimage").attr("src",data);
                       //$("#imagedisplay").css(" background-image", 'url("'+data+'")');
                       $("#dialogimage").css("height","500px");
                       $("#dialogimage").css("width","500px");
                         $( "#imagedisplay" ).dialog( "open" );
                         $("#image").hide();
                    }
                     });
                     });
      });
      </script>

stylesheet.css
#image
{
    width: 500px;
    height: 500;
    border-bottom-style: inset;
    border-bottom-width: 1px;
    border-bottom-color: black;
}
img
{
    height: 200px;
    width: 200px;
    border: black;
    border-bottom-style: double;
}
.ui-widget-header,ui-state-default,ui-button
{
            background:activeborder;
               // #b9cd6d;
            border: 1px solid black;
            color: #FFFFFF;
            font-weight: bold;

}
.ui-dialog ,ui-widget,ui-widget-content,ui-corner-all,ui-front ,ui-draggable,ui-resizable
{
    height: 800px;
    width: 800px;
}
.ui-dialog-content,ui-widget-content
{

    height: 520px;
    width: 495px;
}

imagedisplayscript.php
<?php
@mysql_connect("localhost","root","");
@mysql_select_db("database");
$query="select * from gallery where id=".$_REQUEST["id"];
$temp=@mysql_query($query);
$result=@mysql_fetch_assoc($temp);
echo $result["imagepath"];
?>

how to create a autocomplete text box using php,jquery,mysql

select.php
<?php
@mysql_connect("localhost","root","");
@mysql_select_db("example");
$query="select * from auto";
$tempdata=@mysql_query($query);
$name=array();
while($data=@mysql_fetch_assoc($tempdata))
{
$name[]=$data["name"];
}
echo json_encode($name);
?>

page.php
<head>
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

    <div class="ui-widget">
    <input type="text" id="automplete-1">
    </div>

<script type="text/javascript">
$(document).ready(function()
{
    var name=<?php include 'select.php'; ?>;
    $("#automplete-1").autocomplete({
        source: name,
        autoFocus:true
    });
});
</script>

how to upload and display image before submiting using php and jquery

main.php
<head>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<form method="post" enctype="multipart/form-data" action="upload.php" id="form1">
    <div id="imagePreview">

    </div>
<input id="uploadFile" type="file" name="image" class="img" />
<input type="submit" name="save" id="save">
</form>
<script type="text/javascript">
$(document).ready(function(){
    $("#uploadFile").on("change", function()
    {
        var files = !!this.files ? this.files : [];
         // no file selected, or no FileReader support

        // only image file
            var reader = new FileReader(); // instance of the FileReader
            reader.readAsDataURL(files[0]); // read the local file
          reader.onloadend = function()
            { // set image data as background of div
                $("#imagePreview").css("background-image", "url("+this.result+")");
            }

    });
    $("#form1").on("submit",function (e)
    {
        e.preventDefault();
        $.ajax(
                {
                    url:"upload.php",
                    type:"post",
                    cache: false,
                    contentType: false,
                    processData: false,
                    data:new FormData(this),
                    success: function (data, textStatus, jqXHR) {
                        alert(data);
                    }
                });
    }
                );


});
</script>

upload.php
<?php
if(is_array($_FILES))
{
    $destination="image/".$_FILES["image"]["name"];
    $source=$_FILES["image"]["tmp_name"];
   if( move_uploaded_file($source, $destination))
   {
       echo "image uploaded";
   }

}

?>

style.css
#imagePreview
{
width: 180px;
    height: 180px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
}

How to load json data into a page using jquery and ajax

jason.php

<script type="text/javascript" src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(e) {
    $.ajax(
    {
        url:"country.json",dataType:"json",success: function(response)
    {
        $("#result").html("First name="+response.first_name);
        $("#result2").html("Last Name="+response.last_name);
    }
    });
});
</script>
<div id="result"></div>
<div id="result2"></div>

country.json

{
"first_name":"Hithin ",
"last_name":"Chandran",
"third":"3.yyy"
}

how to display a textfile data using jquery ajax techniqe

Seach