hello i checked http://fineuploader.com/demos.html
and in 'Manually Trigger Uploads & Edit File Names'
i tried the code and recreate it on my pc
but i don't see anything in browser, just blank
here's the code(all the code in one html file only, github just cut the code here):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery
====================================================================== -->
<script src="js/jquery.min.js"></script>
<!-- Fine Uploader New/Modern CSS file
====================================================================== -->
<link href="css/fine-uploader-new.min.css" rel="stylesheet">
<!-- Fine Uploader jQuery JS file
====================================================================== -->
<script src="js/jquery.fine-uploader.min.js"></script>
<!-- Fine Uploader Thumbnails template w/ customization
====================================================================== -->
<script type="text/template" id="qq-template-manual-trigger">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="buttons">
<div class="qq-upload-button-selector qq-upload-button">
<div>Select files</div>
</div>
<button type="button" id="trigger-upload" class="btn btn-primary">
<i class="icon-upload icon-white"></i> Upload
</button>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
<div class="qq-progress-bar-container-selector">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
<style>
#trigger-upload {
color: white;
background-color: #00ABC7;
font-size: 14px;
padding: 7px 20px;
background-image: none;
}
#fine-uploader-manual-trigger .qq-upload-button {
margin-right: 15px;
}
#fine-uploader-manual-trigger .buttons {
width: 36%;
}
#fine-uploader-manual-trigger .qq-uploader .qq-total-progress-bar-container {
width: 60%;
}
</style>
<title>Fine Uploader Manual Upload Trigger Demo</title>
<!-- Fine Uploader DOM Element
====================================================================== -->
<!-- Your code to create an instance of Fine Uploader and bind to the DOM/template
====================================================================== -->
<script>
$('#fine-uploader-manual-trigger').fineUploader({
template: 'qq-template-manual-trigger',
request: {
endpoint: '/server/uploads'
},
thumbnails: {
placeholders: {
waitingPath: '/source/placeholders/waiting-generic.png',
notAvailablePath: '/source/placeholders/not_available-generic.png'
}
},
autoUpload: false
});
$('#trigger-upload').click(function() {
$('#fine-uploader-manual-trigger).fineUploader('uploadStoredFiles');
});
</script>
</body>
</html>
i also have the js and css in the folders
how to make this work??? thanks
Related
I have a Spring MVC controller and bootstrap page.
When I submit the form and send some payload to this endpoint if some condition is not met I would like to display confirmation window:
API:
#PostMapping(value = "/pairs")
public String addPair(#ModelAttribute StepForm addPairStepForm,
Model model) {
....... // do some check
}
Bootstrap page:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<main>
<!-- Modal -->
<div class="modal fade" id="validationModal" tabindex="-1" aria-labelledby="validationModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="validationModalLabel">Confirmation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Pair already exists for the same exchange.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-md-10">
<form id="add_pair_form" class="form-inline" action="#" th:action="#{/pairs}"
th:object="${stepForm}"
autocomplete="off"
method="post">
<div class="row g-3 align-items-center mb-1 mt-1">
<div class="col-auto">
<label for="pair" class="form-label">New</label>
</div>
<div class="col-auto">
<input id="pair" class="form-control" name="pair" type="text"
placeholder="Pair to be added."
th:field="*{pair}"
required
autofocus>
......................................
</div>
</div>
<div class="form-group mb-1 mt-1">
<button type="submit" class="btn btn-primary submit_btn">Submit</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#validationModal">
Validate
</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</main>
</body>
</html>
How I can open the modal dialog window when I submit the form and Post some payload to Spring BE?
I want to add responsive 2 or 3 bootstarp column in Magento 2 static block using simple html,css code.I use Magento2 FreeGo theme. when i link bootstrap file in conflict the layout.Please give me best solution.
I want use following simple code Form Ui in Magento static block.
<div class="container">
<div class="row" style="border: 1px; border-style: solid; padding: 20px;
background-color: #f5f5f5;
border-color: #dedede;">
<div class="col-sm-6">
<h3>Acrylic</h3>
<div class="form-group">
Material
<select class="form-control" id="sel1">
<option>Choose an Option...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
Thickness in mm
<select class="form-control" id="sel1">
<option>Choose an Option...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
Type
<select class="form-control" id="sel1">
<option>Choose an Option...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div style="margin-bottom: 30px; margin-top: 30px;">
Product
<input type="file" class="form-control-file" id="">
</div>
<div>
<button type="submit" class="btn btn-info">Add to Cart</button>
<button type="submit" class="btn btn-info">Close</button>
</div>
</div>
<div class="col-sm-6">
<h3>Product</h3>
<img src="http://thecuttingcenter.com/staging/pub/media/wysiwyg/home/blog-
1.png" class="img-responsive">
</div>
</div>
</div>
This is it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
<style>
.a {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.b {
border: 1px;
border-style: solid;
padding: 20px;
background-color: #f5f5f5;
border-color: #dedede;
}
</style>
</head>
<body>
<div>
<div class="a">
<div class="b">
<h3>Acrylic</h3>
<div>
Material
<select class="form-control" id="sel1">
<option>Choose an Option...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
Thickness in mm
<select class="form-control" id="sel1">
<option>Choose an Option...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
Type
<select class="form-control" id="sel1">
<option>Choose an Option...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div>
Product
<input type="file" class="form-control-file" id="">
</div>
<div>
<button type="submit" class="btn btn-info">Add to Cart</button>
<button type="submit" class="btn btn-info">Close</button>
</div>
</div>
<div class="b">
<h3>Product</h3>
<img src="http://thecuttingcenter.com/staging/pub/media/wysiwyg/home/blog-
1.png" class="img-responsive">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
https://jsfiddle.net/sugandhnikhil/9nu5j103/
I'm trying to create a bootstrap modal in laravel to edit sa post, the problem is that when I click the button or anchor the modal doesn't appears and in some cases it appears but then quickly it disappears I don't know where is the problem I'm new to laravel and I think the problem is with the links ...
app2.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
<div style="color: white; padding-left: 50px; padding-top: 5px; font-size: 20px; background-color: grey; width: 100%; height: 50px; text-align: left;" >Brand</div>
<div class="container">
#yield('content')
</div>
<!--<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
<!--<script type="text/javascript" src="{{asset('js/app.js')}}"></script>-->
<script type="text/javascript" src="{{asset('js/jquery-3.1.1.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/bootstrap.js')}}"></script>
<script type="text/javascript" src="{{asset('js/app_new.js')}}"></script>
</body>
</html>
dashboard.blade.php
#extends('layouts.app2')
#section('title')
dashboard
#endsection
#section('content')
<h1>Dashboard</h1><br>
<div class="row">
<div class="col-md-6 col-md-offset-6">
<div>
<form action="{{url('/post')}}" method="post">
{{csrf_field()}}
<div class="form-group">
<textarea class="form-control" name="body" id="" cols="50" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<!--<input type="hidden" value="{{Session::token()}}" name="_token">-->
</form>
</div>
</div>
</div><br><br>
#foreach($posts as $post)
<div class="row">
<div class="col-md-6 col-md-offset-6">
<h3>{{$post->body}}</h3>
<p>posted by {{$post->User->name}} on {{$post->created_at->diffForHumans()}}</p>
Edit | Delete | Like | Dislike
</div>
</div>
<br>
#endforeach
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endsection
app_new.js
$('#edit').click(function(){
$('#edit-modal').modal();
});
Use preventDefault() when you click on link.
$('#edit').click(function(e){
e.preventDefault();
$('#edit-modal').modal();
});
And add id='edit-modal' for your div with modal class.
try this
Edit
where #modalEdit is id of modal tag like
<div class="modal" tabindex="-1" role="dialog" id="#modalEdit">
This is one way to call a modal using jquery please try
$('#myModal').modal('show');
I am completely new to bootstrap. And I have made an website in Bootstrap 3.0.
the website was working properly on my laptop. But when I hosted that website some of the images are not loaded in webpage. And further when i try to open the website in mobile device the carousel images are not fitted to carousel i mean it leaves some blank space it does not cover the entire carousel space. And while loading the website on the mobile device the background image is also not fully fitted to screen. Please help me out I am totally stuck. my website url is WWW.krishzone.com
and my code is
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Krishh Kidss Zone</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="css/lightbox.css" rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="background: url(../img/background1.png) no-repeat center center fixed"
style="-webkit-background-size: cover"
style="moz-background-size: cover"
style="-o-background-size: cover"
style="background-size: cover">
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top " role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Krishh Kidss Zone</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Why Krishh Kidss
</li>
<li>Admissions
</li>
<li>Events
</li>
<li>Gallery
</li>
<li>Achivements
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="../img/school.jpg" alt="learn" style="max-width:100%" style="height:auto" class="img-responsive">
<div class="carousel-caption">
<h2>Krishh Kidss Zone...</h2>
</div>
</div>
<div class="item">
<img src="../img/learning.JPG" alt="Fun" style="max-width:100%" style="height:auto" class="img-responsive">
<div class="carousel-caption">
<h2>Where Learning is...</h2>
</div>
</div>
<div class="item">
<img src="../img/playing.jpg" alt="play" style="max-width:100%" style="height:auto" class="img-responsive">
<div class="carousel-caption">
<h2>Fun</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
<!-- Page Content -->
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Krishh Kidss Zone
</h1>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Vision</h4>
</div>
<div class="panel-body">
<p>
"To make your child grow into complete personality and develop the strength to meet the challenges ahed."
<br/>
<br/>
<br/>
<br/>
</p>
<div class="text-center">
Read More
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>About Us</h4>
</div>
<div class="panel-body">
<p>We have started Krishh Kidss Zone pre school in 11th February 2010 with motto to give best primary education to children with out any burden. We adopt the simple and effective slogan “Where learning is Fun” , where we always focus on the children’s learning with the help of fun.</p>
<div class="text-center">
Read More
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Events</h4>
</div>
<div class="panel-body">
<p>
We celebrate almost each and every festivals and days as a part of our curriculam. That will help the children to know and understand the impotance of the festivals and days. We try to fill the colours in education by celebrating such events.
<br/>
<br/>
</p>
<div class="text-center">
See More
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<!-- /.row -->
<hr>
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div class="col-md-8">
<h3> Contact Us:</h3>
<p>Adress:<br/>
18 Sarita Vihar,<br/>
Opp. Kartavya Bunglows,<br/>
Anand Nadiad Road,<br/>
Lambhvel, 387-310<br/>
Anand, Gujarat</p><br/>
</div>
<div class="col-md-4">
<p>Contact Details<br/>
Ph.No. +91 99799 64200 <br/>
Like Us On Facebook
<ul class="list-unstyled list-inline list-social-icons">
<li>
<i class="fa fa-facebook-square fa-2x"></i>
</li>
</ul></p>
<p>Copyright © Krishh Kidss Zone 2015</p>
<p>Developed By: Shree InfoTech Ltd.</p>
</div>
</div>
</div>
<hr>
<!-- Footer -->
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lightbox.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
You have multiple div and nav tags that are duplicates or out of place completely. Your images inside the carousel contain multiple style tags style="max-width:100%" style="height:auto" which should be style="max-width:100%; height:auto;" but are unnecessary and should go into a stylesheet if you do need to apply rules.
This example should provide a better starting point for you.
$('.carousel').carousel({
interval: 5000 //changes the speed
})
body {
background: url(http://placehold.it/1350x1050/5E58D1/fff/) no-repeat center center fixed;
background-size: cover;
}
html,
body {
height: 100%;
}
.navbar.navbar-default {
font-size: 16px;
background-color: #3A368C;
border-width: 0px;
border-radius: 0px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #FAF2F2;
background-color: #161263;
}
.navbar.navbar-default .navbar-nav > li > a:hover {
color: #FAF2F2;
background-color: #3C3880;
}
.navbar.navbar-default .navbar-brand,
.navbar.navbar-default .navbar-brand:hover {
color: #fff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #5E58D1;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
left: 0 !important;
opacity: 0;
top: 0;
position: absolute;
width: 100%;
display: block !important;
z-index: 1;
}
.carousel.fade .item:first-child {
top: auto;
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
-moz-transition: opacity ease-in-out .7s;
-o-transition: opacity ease-in-out .7s;
-webkit-transition: opacity ease-in-out .7s;
transition: opacity ease-in-out .7s;
z-index: 2;
}
.carousel-control {
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav id="#custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> Krishh Kidss Zone</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Why Krishh Kidss
</li>
<li>Admissions
</li>
<li>Events
</li>
<li>Gallery
</li>
<li>Achivements
</li>
<li>Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://desktop-pictorials.com/SingleScreen/SinglePage01/Island002-1920x1080.jpg');"></div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://img.phombo.com/img1/photocombo/4448/The_Best_HD_HQ_Hi-Res_Wallpapers_Collection_-_Cityscape_by_tonyx__145_pictures-61.jpg_HDTV_monaco_1920x1080.jpg');"></div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('https://interfacelift.com/wallpaper/7yz4ma1/01407_harboursunset_1920x1080.jpg');"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</header>
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"> Krishh Kidss Zone </h1>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Vision</h4>
</div>
<div class="panel-body">
<p>"To make your child grow into complete personality and develop the strength to meet the challenges ahed."
<br/>
<br/>
<br/>
<br/>
</p>
<div class="text-center"> Read More
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>About Us</h4>
</div>
<div class="panel-body">
<p>We have started Krishh Kidss Zone pre school in 11th February 2010 with motto to give best primary education to children with out any burden. We adopt the simple and effective slogan “Where learning is Fun” , where we always focus on the children’s
learning with the help of fun.</p>
<div class="text-center"> Read More
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Events</h4>
</div>
<div class="panel-body">
<p>We celebrate almost each and every festivals and days as a part of our curriculam. That will help the children to know and understand the impotance of the festivals and days. We try to fill the colours in education by celebrating such events.
<br/>
<br/>
</p>
<div class="text-center"> See More
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<!-- /.row -->
<hr>
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div class="col-md-8">
<h3> Contact Us:</h3>
<p>Adress:
<br/>18 Sarita Vihar,
<br/>Opp. Kartavya Bunglows,
<br/>Anand Nadiad Road,
<br/>Lambhvel, 387-310
<br/>Anand, Gujarat</p>
<br/>
</div>
<div class="col-md-4">
<p>Contact Details
<br/>Ph.No. +91 99799 64200
<br/>Like Us On Facebook
<ul class="list-unstyled list-inline list-social-icons">
<li> <i class="fa fa-facebook-square fa-2x"></i>
</li>
</ul>
</p>
<p>Copyright © Krishh Kidss Zone 2015</p>
<p>Developed By: Shree InfoTech Ltd.</p>
</div>
</div>
</div>
<hr>
<!-- Footer -->
</div>
<!-- /.container -->
I am having trouble getting basic databinding working.
It seems that I have to use .fetch for databinding to work. I feel this way isn't correct, plus the save method isn't called. Also the TabStrip has stopped working when using this method.
Is it always necessary to use the kendo application constructor at the end of each page? In another page if I use it the page does not show ???
I'm very new to Kendo.
The Json returned is
[{"JobID":8,"JobDescription":"Lets try these for apples","JobTemplateID":1,"JobTemplateName":"Standard Service","JobSignature":null,"JobNotes":null,"AssetName":null,"SiteName":"??? ","LocationName":"??? ","Priority":"???","JobLoggedOn":"2015-01-09T15:28:14","JobEstimatedStart":"2015-01-09T15:28:04.76","JobCompletedOn":null,"AssignedToName":"???"}]
and the code is
<!DOCTYPE html>
<html>
<head>
<title>Job Details</title>
<link rel="stylesheet" href="Content/Styles/Kendo/kendo.common.min.css" />
<link rel="stylesheet" href="Content/Styles/Kendo/kendo.default.min.css" />
<link rel="stylesheet" href="Content/Styles/Kendo/kendo.dataviz.mobile.min.css" />
<link rel="stylesheet" href="Content/Styles/Kendo/kendo.mobile.all.min.css" />
<script src="Scripts/Kendo/jquery.min.js"></script>
<script src="Scripts/Kendo/kendo.core.min.js"></script>
<script src="Scripts/Kendo/kendo.ui.core.min.js"></script>
<script src="Scripts/Kendo/kendo.mobile.button.min.js"></script>
<script src="Scripts/Kendo/kendo.mobile.listview.min.js"></script>
<script src="Scripts/Kendo/kendo.mobile.tabstrip.min.js"></script>
<script src="Scripts/Kendo/kendo.mobile.modalview.min.js"></script>
<script src="Scripts/Signature/jSignature.min.js"></script>
</head>
<body>
<div data-role="view" id="tabstrip-details" data-title="Details" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>General Details
<ul>
<li>Site <span class="value" data-bind="text: jobDetails.SiteName"></span></li>
<li>Location <span class="value" data-bind="text: jobDetails.LocationName"></span></li>
<li>Asset <span class="value" data-bind="text: jobDetails.AssetName"></span></li>
<li>Priority <span class="value" data-bind="text: jobDetails.Priority"></span></li>
<li>Template <span class="value" data-bind="text: jobDetails.JobTemplateName"></span></li>
</ul>
</li>
<li>Dates and Assignee
<ul>
<li>Assigned To <span class="value" data-bind="text: jobDetails.AssignedToName"></span></li>
<li>Estimated Start <span class="value" data-bind="text: jobDetails.JobEstimatedStart"></span></li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-notes" data-title="Notes" data-layout="mobile-tabstrip">
</div>
<div data-role="view" id="tabstrip-steps" data-title="Steps" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Before Starting
<ul>
<li>
<label>
<input type="checkbox" />Step 1</label></li>
<li>
<label>
<input type="checkbox" />Step 2</label></li>
<li>
<label>
<input type="checkbox" />Step 3</label></li>
</ul>
</li>
<li>Step by Step
<ul>
<li>
<label>
<input type="checkbox" />Do This</label></li>
<li>
<label>
<input type="checkbox" />Do This</label></li>
<li>
<label>
<input type="checkbox" />Do This</label></li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-parts" data-title="Parts" data-layout="mobile-tabstrip">
</div>
<div data-role="view" id="tabstrip-photos" data-title="Photos" data-layout="mobile-tabstrip">
<input type="file" accept="image/*" capture>
<canvas></canvas>
</div>
<div data-role="view" id="tabstrip-done" data-title="Finish Job" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Completed On
<ul>
<li>
<label>
Date
<input type="date" data-bind="value: jobDetails.JobCompletedOn" />
</label>
</li>
<li>
<label>
Time
<input type="time" data-bind="value: jobDetails.JobCompletedOn" />
</label>
</li>
</ul>
</li>
<li>Sign Off
<ul>
<li>Signature <span class="value"><a data-role="button" data-rel="modalview" href="#modalview-sign">Sign Here</a></span></li>
</ul>
</li>
<li>Submit
<button data-bind="click: save">Job Done</button>
</li>
</ul>
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<a class="nav-button" data-align="left" href="Home.html#JobList.html">Back</a>
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
Details
Notes
Steps
Parts
Photos
Finish Job
</div>
</div>
</div>
<div data-role="modalview" id="modalview-sign" style="width: 90%; height: 70%">
<div data-role="header">
<div data-role="navbar">
<a data-align="right" data-click="closeModalView" data-role="button">Close</a>
</div>
</div>
<div id="signature"></div>
</div>
<style scoped>
.value {
float: right;
margin-top: 8px;
color: #bbb;
}
</style>
<script>
$("#signature").jSignature();
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/job/getjob/8",
dataType: "json"
},
update: {
type: "POST",
url: "/api/job/SaveJob",
},
}
});
dataSource.fetch(function () {
var data = dataSource.data();
var job = data[0];
var viewModel = kendo.observable({
jobDetails: job,
save: function () {
this.dataSource.sync();
}
});
kendo.bind(document.body, viewModel);
});
var app = new kendo.mobile.Application(document.body);
</script>
<script>
function closeModalView() {
$("#modalview-sign").kendoMobileModalView("close");
}
</script>
</body>
</html>
Many thanks.