Develop Reference

How do you save contenteditable forms generated from the mongodb in meteor?

After a form is submitted, you can go to a manage page to edit the forms. The forms are displayed with the inputs submitted with the original form. I am using 'contenteditable' for the first time instead of using an 'edit' button for 'editmode.' The issue I'm having is saving the changes made.
I have a save button as a submit, but I get an error when it's trying to find the value. I've tried switching the html around with the value = to the collection instead of having it written in the actual cell. But then it shows nothing.
<form id="editInvoice">
...
<div class="row invoice-report-details-container" style="margin-top: 50px; clear: both">
<div class="col s4">
<span class="invoice-report-header-item-title">To</span>
<p id="recipient" class="invoice-report-header-item-content" contenteditable="true" ><u>{{details.recipient}}</u></p>
</div>
<div class="col s4">
<span class="invoice-report-header-item-title">Order Taken By</span>
<p id="orderTakenBy" class="invoice-report-header-item-content" contenteditable="true" >{{details.orderTakenBy}}</p>
</div>
</div>
...
</form>
Template.SingleInvoiceDetails.helpers({
details: ()=>{
let id = FlowRouter.getParam('id');
return Invoices.findOne({_id:id});
},
});
Template.SingleInvoiceDetails.events({
'submit #editInvoice': function(event,template){
event.preventDefault();
const target = event.target;
const updateRecipient = target.recipient.value;
const updateOrderTakenBy = target.orderTakenBy.value;
Meteor.call('updateJobInvoice',updateRecipient,updateOrderTakenBy)
}
});
I get an error message:
Cannot read property 'value' of undefined
at Object.submit #editInvoice (SingleInvoiceDetails.js:143)
Line 143 is code: const updateRecipient = target.recipient.value;
Meteor.methods({
updateJobInvoice: function(
updateRecipient,
updateOrderTakenBy
){
Invoices.update({
$set: {
recipient: updateRecipient,
orderTakenBy: updateOrderTakenBy,
}
});
},
});

In my opinion you should use input field with type and name properties and use new FormData():
<form id="editInvoice">
...
<div class="row invoice-report-details-container" style="margin-top: 50px; clear: both">
<div class="col s4">
<span class="invoice-report-header-item-title">To</span>
<input type="text name="recipient" value={{details.recipient}}class="invoice-report-header-item-content"/>
</div>
<div class="col s4">
<span class="invoice-report-header-item-title">Order Taken By</span>
<input type="text" name="orderTakenBy" value={{details.orderTakenBy}} class="invoice-report-header-item-content"/>
</div>
</div>
...
</form>
Template.SingleInvoiceDetails.events({
'submit #editInvoice': function(event,template){
event.preventDefault();
let data = new FormData(event.target)
for(let i of data.entries()){
data[i[0]] = i[1]
}
Meteor.call('updateJobInvoice',data.updateRecipient,data.updateOrderTakenBy)
}
});
Or if you want use p tag with contenteditable prop only I can find out is:
Template.SingleInvoiceDetails.events({
'submit #editInvoice': function(event,template){
event.preventDefault();
const updateRecipient = document.getElementById('recipient').innerText;
const updateOrderTakenBy = document.getElementById('orderTakenBy').innerText;
const invoiceID = ....some invoice id....
Meteor.call('updateJobInvoice',invoiceID, updateRecipient,updateOrderTakenBy)
}
});
UPDATE:
Remember that your updateJobInvoice method should be on server side and from my point of view $set method should have id property. Hence, you should pass this invoiceID from client side (Template.SingleInvoiceDetails). I dont know you app structures and data flow, so I can't definitely solve your problem. But I some time ago I wrote simple CRUD App in meteor. It may be useful to you: https://github.com/varrior/meteorJS-To-do-app/tree/master/imports
server side e.g. (.../api/invoice.js)
Meteor.methods({
updateJobInvoice: function(invoiceID, updateRecipient,updateOrderTakenBy){
Invoices.update(invoiceID, {
$set: {
recipient: updateRecipient,
orderTakenBy: updateOrderTakenBy,
}
});
},
})

Delete object on laravel

I'm learning laravel, and now i trying to delete object without form.
i want to use js to detect when user click delete's button and return notify to controller. Then controller with delete object with id has returned from JS file.
This is blade file
#extends ('layouts.master')
#section ('head.title')
Blog
#stop
#section ('body.content')
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
</div>
</div>
<form class="form-show">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h2> {{ $article->title}} </h2>
<p> {{ $article->content}} </p>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Update
<button id="delete-button" type="submit" class="btn btn-primary">Delete</button>
</div>
</div>
</div>
</form>
</div>
<script src="{{ asset('/js/jshow.js') }}"></script>
#stop
And this is controller file
class ArticlesController extends Controller
{
protected $articleModel;
public function __construct(Article $article){
$this->articleModel = $article;
}
public function index(){
$articles = $this->articleModel->getListArticles();
// $articles = Article::paginate(10);
return view('articles.index',compact('articles'));
}
public function show($id){
// $article = Article::find($id);
$article = $this->articleModel->getArticleWithID($id);
return view('articles.show',compact('article'));
}
public function delete($id){
$this->articleModel->deleteArticle($id);
return redirect()->route('articles.index');
}
}
And here is JS file
var deleteButton = document.getElementById("delete-button");
var idPost = document.getElementById("")
deleteButton.onclick = function() {
alert('Click to delete');
return false;
}

You need to use $.ajax from the jQuery JS library.
Try to understand and to do something, then come back if you any have difficulties.
Like Jerodev said, AJAX calls can be done without jQuery, but I find the jQuery method more understandable. Check here to read more about AJAX using plain JavaScript.

AJAX Request in Jquery is that for you ...
first learn how AJAX Work to request server .
use jquery to easy that for you .
remake delete function to make it more able with AJAX Request to just delete the object and response data .
public function delete(Request $req)
{
$this->articleModel->deleteArticle($id);
return response()->json(['msg' => 'some Msg help]);
}
make route for this function .
then make the ajax request to get this route and delete the object and return the msg you make .
but you must first Learn AJAX .

WYSIWYG shortcode to AngularJS function

I have a custom WordPress shortcode that when used in a WYSIWYG returns a bunch of html with an Angular function attached.
Below is an example of what I am trying to do.
Shortcode:
add_shortcode('example', function($atts) {
extract(shortcode_atts([
'string' => 'This is default text'
], $atts));
ob_start();
?>
<div class="example-layout">
<div class="container">
<button ng-click="do_something('<?= $string; ?>')">
Click here
</button>
</div>
</div>
<?php
return ob_get_clean();
});
Usage: [example string="Override default string"]
Returns:
<div class="example-layout">
<div class="container">
<button ng-click="do_something('Override default string')">
Click here
</button>
</div>
</div>
Angular function:
$scope.do_something = function(string) {
alert(string);
};
This isn't going to work, but I am struggling to find a sensible solution.
Any help or advice would be great.

Try this way
<div class="container" ng-controller="TodoCtrl">
<button ng-click="do_something('testClick')">CLICK ME</button>
</div>
On Angular :
function TodoCtrl($scope) {
$scope.do_something = function (name){
angular.isFunction($scope[name])
$scope[name]()
}
$scope.testClick = function(){
alert("Called");
}
}

Redirecting to specific slug from textfield in ember

I am totally new to ember so please be nice :)
I have an Ember app where i want to redirect to a specific slug taken from an textfield input. In my .hbs i have the following code:
<div class="liquid-container">
<div class="liquid-child">
<div class="desktop-layout-scroll-container">
<div class="overlay-info-layout">
<div class="overlay-info-layout-content">
<h1 class="expired-overlay-status">{{t 'code.title'}}</h1>
<h2 class="expired-overlay-explanation">
{{t 'code.description'}}<br>
</h2>
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<input name="txtSlug" type="text" id="txtSlug" class="field" />
<input type="submit" name="btnGo" value="" id="btnGo" class="btn" onclick="javascript:SubmitForm()" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function SubmitForm(){
var Slugtxt = document.getElementById("txtSlug").value;
window.location = "http://www.google.com/" + Slugtxt;
}
</script>

You should never embed JavaScript in an Ember .hbs file. This code should really go in your controller for this class. First, generate your controller:
ember g controller <name_of_route>
Then inside your controller, you want to define two things. The slugtxt variable, and the redirecting as an action. That would look something like this:
import Ember from 'ember';
export default Ember.Controller.extend({
slugtxt: '',
actions: {
redirect() {
window.location = "http://www.google.com/" + this.get('slugtxt');
}
}
}
Then, back in your template, you would want to change your input to be mapped to the slugtxt variable from your controller, and set the action of the button to the redirect action that you defined in your controller. That would look something like this:
{{input value=slugtxt}}
<button {{action "redirect"}}>Submit</button>
No need to worry about using the <input> tag, you generally wont be using form data with ember.

Return key not working on input text tag

I have the following code
<div class="framepage">
<header>
<script type="text/javascript">
function getBaseUrl() {
return "#Url.Content("~/paging")";
}
function LocationSearch(baseUrl) {
window.location = getBaseUrl() + "/LocationSearch?searchstring=" + (document.getElementById('vestigingen').value);
}
</script>
</div>
</div>
</div>
</header>
<section id="maintest">
<ul id="menu">
<li>
<form class="navbar-search">
<div class="icon-search icon-white"></div>
<input type="text" class="search-query span3" id="vestigingen">
</form>
<input type="button" class="buttonzz" value="zoeken" onclick="LocationSearch()"/>
</li>
<li>Lijst</li>
<li>Lijst</li>
</ul>
<div class="fence">
#RenderBody()
</div>
My problem concerns the return key. Whenever I press the return key my inserted value in the input( type=text) tag is lost.
For instance I type New York and want to get result in NY , my field is empty.
If I type it in and use my submit button everything is fine. Can anyone help me here?

You don't need any javascript for this. Simply use HTML helpers to generate your search form:
#using (Html.BeginForm("LocationSearch", "SomeController", FormMethod.Get, new { #class = "navbar-search" }))
{
<div class="icon-search icon-white"></div>
#Html.TextBox("searchstring")
<input type="submit" value="Search" />
}

You could change the type to submit rather than button and this will set the button to default.

Return key submits your form and in your case your page will refresh. Try to prevent this default action. There are plenty of tricks for that!