Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
    <head>
        <title>B4 | SCode-Input</title>
        
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
​
<!--Bootstrap 4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script> <!--mandatory-->
​
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
​
​
​
​
​
<!--Datatables 2 -->
​
<script src="https://cdn.datatables.net/2.0.1/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.0.1/js/dataTables.bootstrap4.js"></script>
<script src=""></script>
​
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
​
​
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>       
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>             -->
        
        
        <style>
            .body
            {
                margin:0;
                padding:0;
                background-color:#f1f1f1;
            }
            .box
            {
                width:1270px;
                padding:20px;
                background-color:#fff;
                border:1px solid #ccc;
                border-radius:5px;
                margin-top:25px;
                margin-bottom:25px;
            }
        </style>
        
    </head>
    
    <body>
        <div class="container box">
            <h1 align="center">Source Code</h1>
            <div class="table-responsive">
                <div align="right">
                    <button type="button" id="add_button" data-toggle="modal" data-target="#scModal" class="btn btn-info btn-lg">Add</button>
                </div>
                <br/>
                <table id="user_data" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th width="10%">Image</th>
                            <th width="35%">Page Name</th>
                            <th width="35%">Framework</th>
                            <th width="10%">Edit</th>
                            <th width="10%">Delete</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </body>
</html>
​
<div id="scModal" class="modal fade">
    <div class="modal-dialog">
        <form method="POST" id="user_form" enctype="multipart/form-data"> <!-- user FORM -->
            <div class="modal-content">
                <div class="modal-header">
                     <h4 class="modal-title"></h4>
                     <button type="button" class="close" data-dismiss="modal">x</button>
                </div>
                <div class="modal-body">
                    <label>Page</label>
                    <input type="text" name="pagename" id="pagename" class="form-control" >
                    <br />
                    <label>Framework</label>
                    <input type="text" name="framework" id="framework" class="form-control" >
                    <br />
                    <label>Image</label>
                    <input type="file" name="user_image" id="user_image" >
                    <span id="user_uploaded_image"></span>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="user_id" id="user_id" >
                    <input type="hidden" name="operation" id="operation" >
                    <input type="submit" name="action" id="action" class="btn btn-success" value="Add" >
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>
​
<script type="text/javascript" language="javascript" >
​
$(document).ready(function(){
        var dataTable = $('#user_data').DataTable({
        processing:true,
        serverSide:true,
        info: true,
        ordering: true,
        paging: true,
        order:[],
        ajax:{
            url:'fetch.php',
            type:'POST'
        },
        columnDefs:[
            {
                "targets":[0, 3, 4],
                "orderable":false,
            },
        ],
​
    });
});
​
$('#add_button').click(function(){
        $('#user_form')[0].reset();
        $('.modal-title').text("Add Source Code");
        $('#action').val("Add");
        $('#operation').val("Add");
        $('#user_uploaded_image').html('');
    });
    
$(document).on('submit', '#user_form', function(event){
        event.preventDefault();
        var pagename = $('#pagename').val();
        var framework = $('#framework').val();
        var extension = $('#user_image').val().split('.').pop().toLowerCase();
        if(extension != '')
        {
            if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)
            {
                alert("Invalid Image File");
                $('#user_image').val('');
                return false;
            }
        }   
        if(pagename != '' && framework != '')
        {
            $.ajax({
                url:"insert.php",
                method:'POST',
                data:new FormData(this),
                contentType:false,
                processData:false,
                success:function(data)
                {
                    alert(data);
                    $('#user_form')[0].reset();
                    $('#scModal').modal('hide');
                    dataTable.ajax.reload();
                }
            });
        }
        else
        {
            alert("Both Fields are Required");
        }
    });
    
$(document).on('click', '.update', function(){
        var user_id = $(this).attr("id");
            $.ajax({
            url:"fetch_single.php",
            method:"POST",
            data:{user_id:user_id},
            dataType:"json",
            success:function(data)
            {
                $('#scModal').modal('show');
                $('#pagename').val(data.pagename);
                $('#framework').val(data.framework);
                $('.modal-title').text("Edit User");
                $('#user_id').val(user_id);
                $('#user_uploaded_image').html(data.user_image);
                $('#action').val("Edit");
                $('#operation').val("Edit");
            }
        })
    });
    
$(document).on('click', '.delete', function(){
        var user_id = $(this).attr("id");
        if(confirm("Are you sure you want to delete this?"))
        {
            $.ajax({
                url:"delete.php",
                method:"POST",
                data:{user_id:user_id},
                success:function(data)
                {
                    alert(data);
                    dataTable.ajax.reload();
                }
            });
        }
        else
        {
            return false;   
        }
    });
    
</script>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
stonebontpro
0viewers