Wednesday 25 July 2018

Load more button in jquery (listing)

Load more button in jquery (listing)

$rowperpage = 6;

$allcount = $allcount_fetch['allcount'];   // all record

 <div class="post" id="post_(parameter)">

content here 

</div>

            <input type="hidden" id="row" value="0">
            <input type="hidden" id="all" value="<?php echo $allcount; ?>">

<section class="blog_posts_view">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<button type="button" class="btn hvr-bounce-to-right load-more">view more</button>
</div>
</div>
</div>
</section>

<script>
$(document).ready(function(){
    $('.load-more').click(function(){
        var row = Number($('#row').val());
        var allcount = Number($('#all').val());
        row = row + 6;
        if(row <= allcount){
            $("#row").val(row);
            $.ajax({
                url: 'getData.php',
                type: 'post',
                data: {row:row},
                beforeSend:function(){
                    $(".load-more").text("Loading...");
                },
                success: function(response){
                    setTimeout(function() {
                        $(".post:last").after(response).show().fadeIn("slow");
                        var rowno = row + 6;
                        if(rowno > allcount){
$('.load-more').css("display","none");
                            //$('.load-more').text("Hide Post");
                           // $('.load-more').css("background","darkorchid");
                        }else{
                            $(".load-more").text("View more");
                        }
                    }, 2000);
                }
            });
        }else{
            $('.load-more').text("Loading...");
            setTimeout(function() {
                $('.post:nth-child(6)').nextAll('.post').remove().fadeIn("slow");
                $("#row").val(0);
                $('.load-more').text("View more");
                $('.load-more').css("background","#15a9ce");
            }, 2000);
        }
    });
});

</script>

Jquery POST fetching data on keyup

Jquery POST fetching data on keyup :


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

<input type="text" name="search" id="search"/>
<br />
<div class="result"></div>

<script>
    $(document).ready(function() {
        $(document).on('keyup', 'input#search', function() {
            if($(this).val().length > 0) {
                $.post('gettest.php', {"search":$(this).val()}, function(data) {
                    $('div.result').html(data);
                });
            }
        });
    });

</script>

Wednesday 16 May 2018

Data table search in laravel

<script src="<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

 <script> $("#search").keyup(function(){ _this = this; $.each($(".table1 tbody tr"), function() { if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) $(this).hide(); else $(this).show(); }); }); </script>


<input type="text" autocomplete="off" id="search" class="form-control input-lg" placeholder="Enter RESERVATIONS Id, firstname, lastname, Email Here">

Tuesday 9 January 2018

Create custom post type in wordpress.

Create custom post type in wordpress.Please paste the code in finction.php


function custom_post_type() {

// Set UI labels for Custom Post Type
    $labels = array(
        'name'                => _x( 'Question', 'Post Type General Name', 'twentythirteen' ),
        'singular_name'       => _x( 'Question', 'Post Type Singular Name', 'twentythirteen' ),
        'menu_name'           => __( 'Questions', 'twentythirteen' ),
        'parent_item_colon'   => __( 'Parent Movie', 'twentythirteen' ),
        'all_items'           => __( 'All Questions', 'twentythirteen' ),
        'view_item'           => __( 'View Question', 'twentythirteen' ),
        'add_new_item'        => __( 'Add New Question', 'twentythirteen' ),
        'add_new'             => __( 'Add New', 'twentythirteen' ),
        'edit_item'           => __( 'Edit Question', 'twentythirteen' ),
        'update_item'         => __( 'Update Question', 'twentythirteen' ),
        'search_items'        => __( 'Search Question', 'twentythirteen' ),
        'not_found'           => __( 'Not Found', 'twentythirteen' ),
        'not_found_in_trash'  => __( 'Not found in Trash', 'twentythirteen' ),
    );
   
// Set other options for Custom Post Type
   
    $args = array(
        'label'               => __( 'Questions', 'twentythirteen' ),
        'description'         => __( 'Questions and reviews', 'twentythirteen' ),
        'labels'              => $labels,
        // Features this CPT supports in Post Editor
        'supports'            => array( 'title', 'author',),
        // You can associate this CPT with a taxonomy or custom taxonomy.
        'taxonomies'          => array( 'genres' ),
        /* A hierarchical CPT is like Pages and can have
        * Parent and child items. A non-hierarchical CPT
        * is like Posts.
        */
        'hierarchical'        => false,
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_nav_menus'   => true,
        'show_in_admin_bar'   => true,
        'menu_position'       => 5,
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => false,
        'publicly_queryable'  => true,
        'capability_type'     => 'page',
    );
   
    // Registering your Custom Post Type
    register_post_type( 'Questions', $args );

}


/* Adds a box to the main column on the Post and Page edit screens */
function dynamic_add_custom_box() {
          add_meta_box(
        'dynamic_sectionid',
        'Right Answer',
        'dynamic_inner_custom_box',
        'questions',
        'advanced',
        'high'
    );
}

How to upload multiple image in php

Step : (1) Create index.phpfile paste the code .

<!DOCTYPE html>
<html>
<head>
<title>Upload Multiple Images Using jquery and PHP</title>
<!-------Including jQuery from Google ------>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
<!------- Including CSS File ------>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="maindiv">
<div id="formdiv">
<h2>Multiple Image Upload Form</h2>
<form enctype="multipart/form-data" action="" method="post">
First Field is Compulsory. Only JPEG,PNG,JPG Type Image Uploaded. Image Size Should Be Less Than 100KB.
<div id="filediv"><input name="file[]" type="file" id="file"/></div>
<input type="button" id="add_more" class="upload" value="Add More Files"/>
<input type="submit" value="Upload File" name="submit" id="upload" class="upload"/>
</form>
<!------- Including PHP Script here ------>
<?php include "manjeet.php"; ?>
</div>
</div>
</body>

</html>


Step : (2) Create manjeet.js file paste the code .

var abc = 0;     
$(document).ready(function() {

$('#add_more').click(function() {
$(this).before($("<div/>", {
id: 'filediv'
}).fadeIn('slow').append($("<input/>", {
name: 'file[]',
type: 'file',
id: 'file'
}), $("<br/><br/>")));
});

$('body').on('change', '#file', function() {
if (this.files && this.files[0]) {
abc += 1; // Incrementing global variable by 1.
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='abcd" + abc + "' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
$("#abcd" + abc).append($("<img/>", {
id: 'img',
src: 'x.png',
alt: 'delete'
}).click(function() {
$(this).parent().parent().remove();
}));
}
});

function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
};
$('#upload').click(function(e) {
var name = $(":file").val();
if (!name) {
alert("First Image Must Be Selected");
e.preventDefault();
}
});

});

Step : (3) Create manjeet.css file paste the code .

form{
background-color:#fff
}
#maindiv{
width:960px;
margin:10px auto;
padding:10px;
font-family:'Droid Sans',sans-serif
}
#formdiv{
width:500px;
float:left;
text-align:center
}
form{
padding:40px 20px;
box-shadow:0 0 10px;
border-radius:2px
}
h2{
margin-left:30px
}
.upload{
background-color:red;
border:1px solid red;
color:#fff;
border-radius:5px;
padding:10px;
text-shadow:1px 1px 0 green;
box-shadow:2px 2px 15px rgba(0,0,0,.75)
}
.upload:hover{
cursor:pointer;
background:#c20b0b;
border:1px solid #c20b0b;
box-shadow:0 0 5px rgba(0,0,0,.75)
}
#file{
color:green;
padding:5px;
border:1px dashed #123456;
background-color:#f9ffe5
}
#upload{
margin-left:45px
}
#noerror{
color:green;
text-align:left
}
#error{
color:red;
text-align:left
}
#img{
width:17px;
border:none;
height:17px;
margin-left:-20px;
margin-bottom:91px
}
.abcd{
text-align:center
}
.abcd img{
height:100px;
width:100px;
padding:5px;
border:1px solid #e8debd
}
b{
color:red

}


Step : (4) Create manjeet.php file paste the code .

<?php
if (isset($_POST['submit'])) {
$j = 0;     // Variable for indexing uploaded image.
$target_path = "/sumit/";     // Declaring Path for uploaded images.
for ($i = 0; $i < count($_FILES['file']['name']); $i++) {
// Loop to get individual element from the array
$validextensions = array("jpeg", "jpg", "png");      // Extensions which are allowed.
$ext = explode('.', basename($_FILES['file']['name'][$i]));   // Explode file name from dot(.)
$file_extension = end($ext); // Store extensions in the variable.
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext) - 1];     // Set the target path with a new name of image.
$j = $j + 1;      // Increment the number of uploaded images according to the files in array.
if (($_FILES["file"]["size"][$i] < 100000)     // Approx. 100kb files can be uploaded.
&& in_array($file_extension, $validextensions)) {
if (move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
// If file moved to uploads folder.
echo $j. ').<span id="noerror">Image uploaded successfully!.</span><br/><br/>';
} else {     //  If File Was Not Moved.
echo $j. ').<span id="error">please try again!.</span><br/><br/>';
}
} else {     //   If File Size And File Type Was Incorrect.
echo $j. ').<span id="error">***Invalid file Size or Type***</span><br/><br/>';
}
}
}

?>