I have some troubles with TabStrip in relative position div, tabs doesn't switch, if I use them in the way as:
<div style="position: relative">
<div style="padding: 100px 100px 100px 100px; position: absolute">
<div id="myTabs">
<ul>
<li class="k-state-active">item1</li>
<li>item2</li>
</ul>
<div>
<input type="text" value="" class="k-textbox" style="width: 100px" />
</div>
<div>
<input type="text" value="" class="k-textbox" style="width: 100px" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#myTabs").kendoTabStrip();
}
</script>
May be some one faced with such problem, or there is a mistake in my example ?
If document.ready is removed, the code works fine. Please check this JSFiddle: http://jsfiddle.net/Lu9Qf/20/
<script type="text/javascript">
$("#myTabs").kendoTabStrip();
</script>
Related
I'm trying to build a basic chat function for a site and am following along with this tutorial...
(https://www.youtube.com/watch?v=tHbCkikFfDE&list=WL&index=4)... but socket.io doesn't seem to be loading on the page. I used the most recent CDN. I have a feeling my file path is off but I'm not quite sure how to repair it. I'm new, be gentle.
<html>
<head>
<title>IO Chat</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<style>
body {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="well">
<h3>Online Users</h3>
<ul id="users" class="list-group"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea class="form-control" id="message">
</textarea>
<br />
<input type="submit" class="btn btn-primary" value="Send Message" />
</div>
</form>
</div>
</div>
</div>
<script>
$(function(){
var socket = io.connect();
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $message.val());
$message.val('');
});
socket.on('new message', function(data){
$chat.append('<div class="well">'+data.msg+'</div>')
})
})
</script>
</body>
</html>
I'm trying to avoid the sidenav to refresh each time I choose a category and only change the content section of the page. Can anyone help? TIA
Here's what I have so far
<body>
#include('layouts.header')
<main>
<div class="container" style="background-color: white; height: 100%;">
<div class="row">
<div class="col-md-2" id="verticalNav">
#include('layouts.verticalNav')
</div>
<div class="col-md-8 text-center" id="content">
#yield('content')
</div>
<div class="col-md-2 text-center">
<h5>ADBANNERS!</h5>
</div>
</div>
</div>
</main>
#include('layouts.footer')
and here's my script
<script>
$("#verticalNav").click(function(event){
event.preventDefault();
$('#content').load($(this).attr('href'));
});
</script>
the problem here is when I put # sidenav wont even click
I have watched this https://www.youtube.com/watch?v=aflTCbGdzDc tutorial for using jcrop, but it is for Php, when I'm using it with Laravel, the program stops at Validation, says image filed is required, like I haven't chosen an image, but I do have ! , and I'm seeing the image in the box . Note: when I push the upload button in crop modal, I get this error :
POST http://localhost:8000/server/ctrl.php?fileapi155837244028211 404 (Not Found) , it seems i need to set a post rout , but how ? i don't know . does anyone know how we should work with jcrop in laravel ?
here is my code :
<link href="{{asset('crop-userpic\style.css')}}" rel="stylesheet"/>
<link href="{{asset('crop-userpic\jcrop\jquery.jcrop.min.css')}}" rel="stylesheet"/>
<form method="post" action="{{route('testing')}}" enctype="multipart/form-data">
#csrf
<div class="container">
<div id="userpic" class="userpic">
<div class="js-preview userpic__preview"></div>
<div class="btn btn-success js-fileapi-wrapper">
<div class="js-browse">
<span class="btn-txt">انتخاب عکس</span>
<input type="file" name="image" id="image">
</div>
<div class="js-upload" style="display: none;">
<div class="progress progress-success">
<div class="js-progress bar"></div>
</div>
<span class="btn-txt">در حال بارگذاری</span>
</div>
</div>
</div>
</div>
<div id="popup" class="popup" style="display: none">
<div class="popup__body">
<div class="js-img"></div>
</div>
<div style="margin: 0 0 5px;text-align: center">
<div class="js-upload btn btn_browse btn_browse_small">بارگذاری</div>
</div>
</div>
<input type="submit" name="submit" value="sumbit" />
</form>
<script src="{{asset('crop-userpic\jquery.min.js')}}"></script>
<script src="{{asset('crop-userpic\jquery.easing.min.js')}}"></script>
<script>
var FileAPI = {
debug: true,
media: true,
staticPath: '{{asset('crop-userpic\FileAPI')}}'
};
</script>
<script src="{{asset('crop-userpic\FileAPI\FileAPI.min.js')}}"></script>
<script src="{{asset('crop-userpic\FileAPI\FileAPI.exif.js')}}"></script>
<script src="{{asset('crop-userpic\jquery.Fileapi.js')}}"></script>
<script src="{{asset('crop-userpic\jcrop\jquery.Jcrop.min.js')}}"></script>
<script src="{{asset('crop-userpic\statics\jquery.modal.js')}}"></script>
<script src="{{asset('crop-userpic\script.js')}}"></script>
and this is the image : https://drive.google.com/open?id=1qgEmA9RlKy_eilZohCLajGmnVfqWSB9E
as you can see the image is in the box , but when i push submit , i get the validation error image field is required , like i don't have an image at all
please help me . i don't know what to do . and i love this Jcrop .
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.
and how can I trasmit data between popup and page that have called popup?
I would like to do a ajax form for user registration inside popup "reveal" in zurb foundation.
Do you think is possible?
This answer might be a little late, but you can absolutely put a form into the reveal popup. For instance, if you wanted a login dialog to show up when they click a login button:
At the bottom of your HTML (after all the rows), create the content for the popup:
<div id="login-modal" class="reveal-modal" style="width: 400px; background: black; color: white;">
<h2>Login</h2>
<form id="login-form" class="six">
<div class="row">
<label for="username">Username</label>
<input type="text" name="username" />
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div class="row">
<div class="right" style="margin-top: 20px;">
<button type="reset" class="button radius alert">Reset</button>
<button type="submit" class="button radius">Login</button>
</div>
</div>
</form>
<a class="close-reveal-modal">×</a>
</div>
Then you can display it using one of their methods. The new foundation 3.0 let you display it super easy like:
<a href="#"
data-reveal-id="login-modal"
data-animation="fadeAndPop"
data-animationspeed="300"
data-closeonbackgroundclick="true"
data-dismissmodalclass="close-reveal-modal">Login</a>
Hope that helps!
try this in app.js.
Then use reveal class on any anchor
$('a.reveal').click(function(event) {
event.preventDefault();
var $div = $('<div>').addClass('reveal-modal').appendTo('body'),
$this = $(this);
$div.empty().html('<p align="center"><img src="application/public/loading.gif" /></p>').append('<a class="close-reveal-modal">×</a>').reveal();
$.get($this.attr('href'), function(data) {
return $div.empty().html(data).append('<a class="close-reveal-modal">×</a>').reveal();
});
});