Integrate Javascript to my Rhodes App - ruby

in my application. js is a function named
function helloWorld() {}
what should I do to call this function on an index.erb of a model?
I try to write the function in the application.js
$("#changePanel").click(function() {
var data = "foobar";
$("#panel").hide().html(data).fadeIn('fast');
});
then I change my layout erb. at the following content
<% if System::get_property('platform') == 'APPLE' || System::get_property('platform') == 'ANDROID' || System::get_property('platform') == 'WP7' || is_bb6 || System::get_property('webview_framework') =~ /^WEBKIT/ %>
<script src="/public/js/application.js" type="text/javascript"></script>
<script src="/public/jquery/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/public/jquery/jquery.json-2.3.min.js" type="text/javascript"></script>
and in my view i added
<div data-role="page">
<div data-role="header" data-position="inline">
<h1>Model001s</h1>
<a href="<%= Rho::RhoConfig.start_path %>" class="ui-btn-left" data-icon="home" data-direction="reverse" <%= "data-ajax='false'" if is_bb6 %>>
Home
</a>
<a href="<%= url_for :action => :new %>" class="ui-btn-right" data-icon="plus">
New
</a>
</div>
<div id="panel">test data</div>
<input id="incre" value="Change Panel" type="button"> </div>
</div>
I don´t know whats wrong. Please help me

I don't see any #changePanel for your click event to trigger.
I think maybe you should change:
<input id="incre" value="Change Panel" type="button"> </div>
to
<input id="changePanel" value="Change Panel" type="button"> </div>

Related

how to use Jcrop with Laravel

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 .

display individual item in ng-repeat rendered list

I am trying to display an individual item from the list generating in ng-repeat by clicking on selected item and rendering in a different div. These are the files.
http://plnkr.co/edit/4bnlJnhSHqY1mSPeYOcz?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Homepage Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="../dist/semantic.js"></script>
<script src="homepage.js"></script>
<script src="app.js"></script>
</head>
<body id="homebased" ng-controller="MyController">
<div class="ui two divided column padded grid">
<div class="six wide column">
<h2>Six Wide Column</h2>
<form action="ui form">
<div class="two fields">
<div class="field">
<div class="ui action left icon input">
<i class="search icon"></i>
<input type="text" placeholder="Start typing..." ng-model="q">
<div class="ui teal button">
<i class="large arrow right icon"></i></div>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="field">
<label>Filter by..</label>
<div class="ui selection dropdown small">
<input type="hidden" name="name">
<div class="default text">filter</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="name">Author</div>
<div class="item" data-value="year">Year</div>
</div>
</div>
<div name="stp">{{records.indexOf(item)}}</div>
</div>
</form>
</div>
</div>
<div class="ten wide column">
<h2>Search Results</h2>
<div class="ui segment right">
<a class="ui teal left ribbon label">N= {{records.length}}</a>
<div class="ui selection list">
<div class="item" ng-repeat="item in records | filter: q">
<a href="#stp {{records.indexOf(item)}}"><div class="content" >
<div class="header">{{item.name}}</div>
<div class="description">Correspondence begun in: {{item.start}}</div>
</div></a>
</div>
</div>
</div> <!--list-->
</div>
</div>
</body>
</html>
APP.JS
var myApp = angular.module('myApp', ['firebase']);
myApp.controller("MyController", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {
var ref = new Firebase('https://simpleform.firebaseio.com/records');
$scope.records = $firebaseArray(ref);
$scope.recordOrder = 'name';
}]);
I would advise you to dig around ui-router: https://github.com/angular-ui/ui-router
You define views, you define routing then your items access to the other view by using ui-sref="myitem({id: item.id})" and you're all set up!

Kendo UI Core ViewModel and Basic Databinding

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.

kendo ui mobile events in templates not fireing

I using this approach for my new app.
http://blogs.telerik.com/blogs/14-03-27/structuring-hybrid-mobile-applications
But I running in a problem with click events when I calling templates in my view.
Everything else like data binding init kendo widgets works fine.
What I missing here?
<div data-role="view" id="home" data-model="APP.home.model" data-init="APP.home.events.init" data-after-show="APP.home.events.afterShow" style="display: none;">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#categories" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title"></span>
<div data-role="button" data-bind="click: hello" data-align="right" data-icon="compose">a</div>
</div>
</header>
<div>TEST me</div>
<div data-role="button" data-bind="click: hello" data-align="right" data-icon="compose">a</div>
<div id="testMe">
</div>
<div id="home-grid" class="grid home-grid"></div>
</div>
<script>
var events = {
init: function (e) {
navbar = e.view.header.find('.km-navbar').data('kendoMobileNavBar');
var template = kendo.template($("#testMe_tmp").html());
$("#testMe").html(template({}));
kendo.mobile.init($("#testMe"));
},
afterShow: function (e) {
navbar.title("b");
}
};
</script>
Thanks in advance
T.S
I found a solution
after
kendo.mobile.init($("#testMe"));
add this
kendo.bind($("#content"),model);
I don't understand why then I never find a sample source need this.
T.S

Adding Facebook like button hides other site content

I am using the latest version of BlogEngine.NET, and I want the share buttons of Facebook, linked in, Google Buzz, etc. to go below the menu, but after adding the Facebook, LinkedIn, and Buzz button code, the content next to it disappears. It seems BlogEngine.NET prevents entering script tags or something so this would be a limiting issue. How can this be fixed?
The code is below, see the BUTTON CODE section.
<code>
<div class="login">
<span runat="server" id="aUser"></span><a runat="server" id="aLogin" />
</div>
<ul>
<li><a1 href="<%=Utils.AbsoluteWebRoot %>" rel="home"><%=Resources.labels.home %></a></li>
<li><a1 href="<%=Utils.AbsoluteWebRoot %>archive.aspx"><%=Resources.labels.archive %></a></li>
<li><a1 href="<%=Utils.AbsoluteWebRoot %>contact.aspx"><%=Resources.labels.contact %></a></li>
<li><img src="<%=Utils.ApplicationRelativeWebRoot %>pics/rssButton.png" alt="Feed" /><%=Resources.labels.subscribe %></li>
<li><%=Resources.labels.filterByApml %></li>
<% if (Utils.IsMobile)
{ %>
<li><blog:MobileThemeSwitch ID="MobileThemeSwitch1" runat="server" /></li>
<%
}
%>
</ul>
</div>
</code>
<!--BUTTON CODE -START-->
<code>
<div id="Div1">
<script src='linkedinurl' type='text/javascript' /> <script data-counter='right' data-url='mysiteurl' type='in/share' />
</div>
</code>
<!--BUTTON CODE -END-->
<code>
<div id="content">
<blog:SearchOnSearch runat="server" MaxResults="3" Headline="You searched for" Text="Here are some results for the search term on this website" />
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
<p id="footer">
Powered by BlogEngine.NET <%=BlogSettings.Instance.Version() %><br />
Theme by Mads Kristensen
</p>
</div>
</code>
You need to encode it:
Like this:
site.master
<div style="float:right; padding-left:10px" class="TwitterButton">
<div>
<a href="http://twitter.com/share" class="twitter-share-button" data-url=
<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %> data-text="
<%=Server.UrlEncode(Post.Title) %>"> Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
</div>
</div>
The output would look like this:
<div style="float:right; padding-left:10px" class="TwitterButton">
<div>
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="http://www.kbdavis07.bloggersonline.com/post/Using-HitSniffercom-
with-BlogEngineNet.aspx" data-text="Using HitSniffer.com with BlogEngine.Net"
data-count="horizontal">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
</div>
</div>
This code above is for Twitter, and I don't have a working example of LinkedIn code.
But it should be about the same.

Resources