Issue with JsonForm in mvc - javascript

I am trying to use the JSONForm libary from Github to generate a html markup from a json schema. I am trying to do this in an MVC view that does not have a default form tag. I added one with html.beginform but still the markup is not generated and i get the following javascript error in console :TypeError: _ is null . Could someone help me out ?
Below is the code in the view :
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Html.BeginForm())
{
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="~/Scripts/json-form.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/underscore.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script type="text/javascript">
$('form').jsonForm({
schema: {
name: {
type: 'string',
title: 'Name',
required: true
},
age: {
type: 'number',
title: 'Age'
}
},
onSubmit: function (errors, values) {
if (errors) {
}
else {
}
}
})
$(document).ready(function () {
alert('udayan');
});
</script>
<h2>Index</h2>
}

json-form.js depends upon underscore (_). You therefore need to move:
<script type="text/javascript" src="~/Scripts/underscore.js"></script>
... so that it is above:
<script type="text/javascript" src="~/Scripts/json-form.js"></script>

Related

Typeahead JS Autocomplete not working - can't find anything

I want to make a autocomplete function on my input with existing titles from database, but seems that doesn't work. I don't know what's the problem but when I try to write something, notting happens.
Here is my controller
public function search()
{
return view('search-me');
}
public function autocomplete(Request $request)
{
$data = Models::select("email")->where("email", "LIKE","%{$request->input("query")}%")->get();
return response()->json($data);
}
Here is my route
Route::get('search-me', array('as' => 'search', 'uses' => 'AdminNewsController#search'));
Route::get('autocomplete',array('as' => 'autocomplete', 'uses' => 'AdminNewsController#autocomplete'));
Here is my view
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
</head>
<body>
<div class="container">
<h1> test</h1>
<input type="text" class="typeahead form-control">
</div>
</body>
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.typeahead').typeahead({
source: function (query, process){
return $.get(path, { query: query}, function (data) {
return process(data);
});
}
});
</script>
</html>
I'm using Laravel 5.2 but I guess is working on mine too. Here is the tutorial : https://www.youtube.com/watch?v=3AiMsvobceY

Linkedin login with js

I am trying to implement login with linked in my web app. Here is my code..
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: 'key here'
</script>
</head>
<body>
<script>
IN.User.authorize(function (e) {
console.log(e);
}, function (e) {
console.log(e);
});
</script>
</body>
But its giving me error 'Cannot read property 'then' of undefined at Object.authorize (in.js:18)'
i have also tried this way..
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: 'key here'
onLoad: 'onLinkedInLoad'
authorize: true
</script>
</head>
<body>
<!-- LinkedIn signin button -->
<script type="in/Login"></script>
<script type="text/javascript">
// Setup an event listener to make an API call once auth is complete
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
</script>
</body>
but its giving me errror
'in.js:7 Uncaught (in promise) TypeError: Could not instantiate tag for 'login': Cannot read property 'on' of null
at new (Login.js?version=0.1.149:7)
at in.js:18'
The documentation and examples for linkedIn show api_key and onLoad function not being set as a string delimeter.
api_key: 0192afsdj10
onLoad: onLinkedInLoad
Secondly, you have not added in a function for the getProfileData function.
Here is an example of the should look like.
function getProfileData() {
IN.API.Profile("me").fields("id", "first-name", "last-name", "headline", "location", "picture-url", "public-profile-url", "email-address").result(displayProfileData);
}
function displayProfileData(profiles){
var member = profiles.values[0];
console.log(member);
}
See code referenced here

MVC controller return JSON list

I'm trying to return a JSON list in my controller. Not sure where I am going wrong. Any help would be greatly appreciated. I am trying to implement a grid a found online.
Here is my controller:
//[HttpPost]
public JsonResult JqueryTest()
{
var estimateDetails = db.EstimateDetail
.Include(x => x.EstimationItem)
.Include(x => x.EstimateHeader);
return Json(estimateDetails, JsonRequestBehavior.AllowGet);
}
Here is my view:
#model IEnumerable < EstimationTools.Models.Entities.EstimateDetail >
ViewBag.Title = "JqueryTest";
}
<h2>JqueryTest</h2>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
<!-- This is the localization file of the grid controlling messages, labels, etc.
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap.css" />
<script>
$.jgrid.defaults.width = 780;
$.jgrid.defaults.styleUI = 'Bootstrap';
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<title>jqGrid Loading Data - JSON</title>
</head>
<body>
<div style="margin-left:20px">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'EstimationTool/plugins/jqGrid',
datatype: "json",
colModel: [
{ label: 'Estimate', name: 'Estimate', width: 75 },
{ label: 'Contingency', name: 'Contingency', width: 90 },
{ label: 'Comment', name: 'Comment', width: 100 },
{ label: 'Subactivity', name: 'EstimationItem.Subactivity', width: 100 },
{ label: 'EstimationArea', name: 'EstimationItem.Area.EstimationArea', width: 100 },
{ label: 'Description', name: 'EstimationItem.GeneralActivity.Description', width: 100 }
// sorttype is used only if the data is loaded locally or loadonce is set to true
],
viewrecords: true, // show the current page, data rang and total records on the toolbar
width: 780,
height: 200,
rowNum: 30,
loadonce: true, // this is just for the demo
pager: "#jqGridPager"
});
});
</script>
</body>
</html>
First thing first... as stephen.vakil states, there is an error in your url, as you are pointing to an action so called "jqGrid":
url: 'EstimationTool/plugins/jqGrid'
The usual syntax is: '{Controller}/{Action}/'
Which in your case, the action name is "JqueryTest" as stated above. So, I don't know the name of your Controller, but I hope you've got the idea. Something like this:
url: 'YourController/JqueryTest'
On the other hand, within your Action, you should return a list instead... so, just add .ToList() at the end of the query or append it to your parameter:
return Json(estimateDetails.**ToList()**, JsonRequestBehavior.AllowGet);
Regards,

Error in browserbox javascript email code?

I tried using emailjs browserbox to connect to an imap server but the sample script with the correct port and host and username and password just throws out errors and doesn't work in a client-side html file?
https://github.com/whiteout-io/browserbox is a link to the api. What's wrong with how I wrote the code?
<html>
<head>
<title>Test</title>
<!-- Required for non-Unicode encodings -->
<script src="encoding-indexes.js"></script>
<script src="encoding.js"></script>
<script src="stringencoding.min.js"></script>
<script src="browserbox.js"></script>
<script src="browserbox-imap.js"></script>
<script> var client = new BrowserBox('host', port, {
auth: {
user: 'testuser',
pass: 'testpass'
},
id: {
name: 'My Client',
version: '0.1'
} });
</script>
</head>
<body>
</body>
</html>

Passing input data from view to controller

Hello I'm new to MVC and AJAX.
I have a problem sending input data from view to controller.
What is the wrong thing in this code ? :
Thanks in advance.
Head :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
View :
<div id="inputdiv">
<p>Display name: <input type="text" id="name1" /> </p>
<p><button id="submitbutton">Submit</button></p>
</div>
<script type="text/javascript" language="javascript">
$(function () {
$("#submitbutton").click(function () {
var nameEntered = $("#name1").val()
$.post(
'<%= Url.Action("SimplePost") %>',
{ submittedName: nameEntered },
handleSuccess
);
});
});
function handleSuccess(content) {
$("#inputdiv").html(content);
$("#inputdiv").addClass("easy-notification");
}
</script>
Controller :
[HttpPost]
public ContentResult SimplePost(string submittedName)
{
string result = string.Format("Hello {0}!?", submittedName);
return new ContentResult { Content = result };
}

Categories