I have my controller in the folder controllers with the name AdController
and my action name is
/**
* action ajaxValue
*
* #param string $argument
* #return void
*/
public function ajaxValueAction($argument = NULL) {
}
and my template file is on location Resources/Private/Templates/Ad/ajaxValue.html
with the name ajaxValue.html
{namespace t=Helhum\TyposcriptRendering\ViewHelpers}
<f:layout name="Default" />
This Template is responsible for creating a table of domain objects.
If you modify this template, do not forget to change the overwrite settings
in /Configuration/ExtensionBuilder/settings.yaml:
Resources:
Private:
Templates:
List.html: keep
Otherwise your changes will be overwritten the next time you save the extension in the extension builder
<f:section name="main">
<f:debug title="Results of customers query">{ads}</f:debug>
<f:flashMessages />
<!-- Category selection box -->
<!-- This is basically called a ajax request which is based on some other file take from the following link http://ajax.helmut-hummel.de/
-->
<div id="dataJson" data-url="{t:uri.ajaxAction(action: 'ajaxValue', format: 'json', controller: 'Ad', pluginName: 'Txcasmarketing') -> f:format.htmlentities()}"></div>
<div class="container">
<div class="btn-group">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Select Category<span class="caret"></span></a>
<ul class="dropdown-menu">
<f:for each="{categories}" as="category">
<li>
<a data-catUid="{category.uid}" href="#">{category.name}</a>
</li>
</f:for>
</ul>
</div>
</div>
I am getting the following error
<p><strong>Sorry, the requested view was not found.</strong></p> <p>The technical reason is: <em>No template was found. View could not be resolved for action "ajaxValue" in class "CASmarketing\Casmarketing\Controller\AdController"</em>.</p>
The defaults templates which has been created by extension builder is accessible. the structure of my ex_localconf.php is
\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
'CASmarketing.Casmarketing',
'Txcasmarketing', [
'State' => 'list, show, new, create, edit, update, delete',
'Category' => 'list, show, new, create, edit, update, delete',
'Ad' => 'list, ajaxValue, show, new, create, edit, update, delete'
],
// non-cacheable actions
[
'State' => 'create, update, delete',
'Category' => 'create, update, delete',
'Ad' => 'create, update, delete'
]
);
}, $_EXTKEY
);
and my template file is on location Resources/Templates/Ad/ajaxValue.html
with the name ajaxValue.html
and my step.ts file sitting is
plugin.tx_casmarketing_txcasmarketing {
view {
templateRootPaths.0 = EXT:casmarketing/Resources/Private/Templates/
templateRootPaths.1 = {
$plugin.tx_casmarketing_txcasmarketing.view.templateRootPath}
partialRootPaths.0 = EXT:casmarketing/Resources/Private/Partials/
partialRootPaths.1 = {
$plugin.tx_casmarketing_txcasmarketing.view.partialRootPath}
layoutRootPaths.0 = EXT:casmarketing/Resources/Private/Layouts/
layoutRootPaths.1 = {
$plugin.tx_casmarketing_txcasmarketing.view.layoutRootPath}
}
persistence {
storagePid = {
$plugin.tx_casmarketing_txcasmarketing.persistence.storagePid}
#recursive = 1
}
features {
#skipDefaultArguments = 1
}
mvc {
#callDefaultActionIfActionCantBeResolved = 1
}
}
my script file which is basically called the ajax request which is define in the pageLayout.js
$(".dropdown-menu li a").click(function () {
var jsonUrl = $('#dataJson').attr('data-url')
var selectedCatUid = $(this).attr('data-catUid');
$.ajax({
type: 'POST',
url: jsonUrl,
data: {
'tx_casmarketing_txcasmarketing[catId]': selectedCatUid
},
success: function (response) {
alert(response);
},
});
Your template should not be in Resources/Templates/Ad/ajaxValue.html but in Resources/Private/Templates/Ad/AjaxValue.html. Mind the Private sub folder. Also it has to be UpperCase.
Didn't know that it does matter but the filename usually is uppercase. You also should make sure that the typoscript settings are configured to this directory.
Your typoscript should correctly look like this:
plugin.tx_casmarketing_txcasmarketing {
view {
templateRootPaths.0 = EXT:casmarketing/Resources/Private/Templates/
templateRootPaths.1 = {$plugin.tx_casmarketing_txcasmarketing.view.templateRootPath}
partialRootPaths.0 = EXT:casmarketing/Resources/Private/Partials/
partialRootPaths.1 = {$plugin.tx_casmarketing_txcasmarketing.view.partialRootPath}
layoutRootPaths.0 = EXT:casmarketing/Resources/Private/Layouts/
layoutRootPaths.1 = {$plugin.tx_casmarketing_txcasmarketing.view.layoutRootPath}
}
persistence {
storagePid = {$plugin.tx_casmarketing_txcasmarketing.persistence.storagePid}
#recursive = 1
}
features {
#skipDefaultArguments = 1
}
mvc {
#callDefaultActionIfActionCantBeResolved = 1
}
}
If you change this in your setup.txt of the extension this is hardly cached and you have to clear the cache in the install tool. After making sure your typoscript is correctly loaded place your new Views template inside the ext-directory template path first to try it out.
If this does not help please give us the content of your HTML Template.
Related
how can I add current user id to the axios.get request url in the front end code?
here are my codes;
backend: urls.py
urlpatterns = [
path('<int:pk>/', UserDetail.as_view()),
]
and views.py
class UserDetail(APIView):
permission_classes = [AllowAny]
http_method_names = ['get', 'head', 'post']
"""
Retrieve, update or delete a user instance.
"""
def get_object(self, pk):
try:
return NewUser.objects.get(pk=pk)
except NewUser.DoesNotExist:
raise Http404
def get(self, request, pk, format=None):
user = self.get_object(pk)
serializer = CustomUserSerializer(user)
return Response(serializer.data)
frontend:
useEffect(() => {
if (localStorage.getItem("access_token")) {
axiosInstance.get('users/**???**').then((obj) => {
{
setname(obj.username)
setemail(obj.email)
setidx(obj.uid)
}
console.log(obj);
console.log(obj.data);
setTimeout(() => {
props.resetProfileFlag();
}, 3000);
});
}
}, [props.success])
If I add user id manually (like say; axiosInstance.get('users/1').then((obj) => { ...) it gets the user details.
in your axios part you need to use params like these:
useEffect(() => {
if (localStorage.getItem("access_token")) {
axiosInstance.get('users/',
{
params: {
id: '1'
}
}).then((obj) => {
{
setname(obj.username)
setemail(obj.email)
setidx(obj.uid)
}
console.log(obj);
console.log(obj.data);
setTimeout(() => {
props.resetProfileFlag();
}, 3000);
});
}
}, [props.success])
and in the backend side you can get the data also from the request.params .
Thank you Rassaka, however, still I can't get a single user details, but I get the list of all users data at the console.
I moved to DRF Viewsets and HyperlinkedModelSerializers:
class UserSerializer(serializers.HyperlinkedModelSerializer):
posts = serializers.HyperlinkedRelatedField(
many=True,
queryset=Post.objects.all(),
view_name='blog:post-detail',
)
url = serializers.HyperlinkedIdentityField(view_name='users:user-detail')
class Meta:
model = User
fields = ('url', 'id', 'user_name', 'email', 'posts')
views.py :
class UserViewSet(viewsets.ReadOnlyModelViewSet):
"""
This viewset automatically provides `list` and `detail` actions.
"""
permission_classes = [AllowAny]
queryset = User.objects.all()
serializer_class = UserSerializer
#lookup_field = 'pk'
def post(self, request):
try:
refresh_token = request.data["refresh_token"]
token = RefreshToken(refresh_token)
token.blacklist()
return Response(status=status.HTTP_205_RESET_CONTENT)
except Exception as e:
return Response(status=status.HTTP_400_BAD_REQUEST)
urls.py:
urlpatterns = [
router.register(r'users/<int:pk>', views.UserViewSet),
router.register(r'users', views.UserViewSet),
]
urlpatterns = [ re_path(r'^', include(router.urls)) ]
and finally my react frontend:
const UserProfile = props => {
const [data, setData] = useState({
users: [],
});
useEffect(() => {
if (localStorage.getItem("access_token")) {
axiosInstance.get('users/', {params: { id: '1'}}).then((res) => {
setData({
users: res.data,
})
console.log(res.data);
setTimeout(() => {
props.resetProfileFlag();
}, 3000);
})
.catch(err =>{
console.log(err)
})
}
}, [setData], [props.success])
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Row>
<Col lg="12">
<Card>
<CardBody>
<div className="d-flex">
<div className="ms-3">
<img
src={data.users.avatar}
alt=""
className="avatar-md rounded-circle img-thumbnail"
/>
</div>
<div className="align-self-center flex-1">
<div className="text-muted">
<h5>Username: {data.users.user_name} {''}</h5>
<p className="mb-1">Email: {data.users.email} {''}</p>
<p className="mb-0">Id no: {data.users.id} {''}</p>
</div>
</div>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
)
}
export default UserProfile
The issue is; after login I get the right user data in the console, however, when I go to the user profile page, firstly I get this error message "GET http://127.0.0.1:8000/api/users/?id=1 401 (Unauthorized)" in the console and of course in the backend terminal. But immediate after that the backend refreshs the token ""POST /api/token/refresh/ HTTP/1.1" 200" -> "GET /api/users/?id=1 HTTP/1.1" 200". But I get all user Arrays(data) - (not the logged-in user data) in the console, however, the user profile page cannot retrieve any user data. So I can not understand if user data cannot be retrieved to the profile page because the axiosInstanse refreshes token after login or because my frontend design is wrong. Or something is wrong with the backend?? Please, your advices? ...
Would like to know how to implement the Wordpress Featured Image to multiple vue.js/nuxt.js based headless-CMS approaches using the Wordpress restful API.
Initially, I followed this immensely helpful tutorial headless-cms with nuxt and created a headless CMS via the wordpress api, and of course applied it to my use-case (here is a link to a live version nuxt-headless-cms-webapp. Unfortunately, I have been unable to figure out how to include a post's featured image as it is not covered in this particular tutorial. I then did a bit of research and ended up piecing together another project (vue.js), in which I was able to implement featured images. That being said I would like guidance with regard to implementing my working code in terms of the wp-featured image, to the original tutorial's project (as nuxt provides better routing and SEO options from my understanding. Thank you in advanced for any help!
First, here is the axios http request syntax found in the original tutorial (nuxt) project's index.js:
const siteURL = "https://indvillage.com"
export const state = () => ({
posts: [],
tags: []
})
export const mutations = {
updatePosts: (state, posts) => {
state.posts = posts
},
updateTags: (state, tags) => {
state.tags = tags
}
}
export const actions = {
async getPosts({ state, commit, dispatch }) {
if (state.posts.length) return
try {
let posts = await fetch(
`${siteURL}/wp-json/wp/v2/posts?_embed`
).then(res => res.json())
posts = posts
.filter(el => el.status === "publish")
.map(({ id, slug, title, excerpt, date, tags, content }) => ({
id,
slug,
title,
excerpt,
date,
tags,
content
}))
commit("updatePosts", posts)
} catch (err) {
console.log(err)
}
},
async getMedia({ state, commit }) {
if (state.media.length) return
try {
let media= await fetch(
`${siteURL}/wp-json/wp/v2/media?_embed`
).then(res => res.json())
commit("updatePosts", media)
} catch (err) {
console.log(err)
}
},
async getTags({ state, commit }) {
if (state.tags.length) return
let allTags = state.posts.reduce((acc, item) => {
return acc.concat(item.tags)
}, [])
allTags = allTags.join()
try {
let tags = await fetch(
`${siteURL}/wp-json/wp/v2/tags?page=1&per_page=40&include=${allTags}`
).then(res => res.json())
tags = tags.map(({ id, name }) => ({
id,
name
}))
commit("updateTags", tags)
} catch (err) {
console.log(err)
}
}
}
Next, we have the index.vue page where the above logic is implemented.
template>
<div>
<app-masthead></app-masthead>
<div class="posts">
<main>
<div class="post" v-for="post in sortedPosts" :key="post.id">
<h3>
<a :href="`blog/${post.slug}`">{{ post.title.rendered }}</a>
</h3>
<small>{{ post.date | dateformat }}</small>
<div v-html="post.excerpt.rendered"></div>
<a :href="`blog/${post.slug}`" class="readmore slide">Read more ⟶</a>
</div>
</main>
<!--<aside>
<h2 class="tags-title">Tags</h2>
<div class="tags-list">
<ul>
<li
#click="updateTag(tag)"
v-for="tag in tags"
:key="tag.id"
:class="[tag.id === selectedTag ? activeClass : '']"
>
<a>{{ tag.name }}</a>
<span v-if="tag.id === selectedTag">✕</span>
</li>
</ul>
</div>
</aside>-->
</div>
</div>
</template>
<script>
import AppMasthead from "#/components/AppMasthead.vue";
export default {
components: {
AppMasthead
},
data() {
return {
selectedTag: null,
activeClass: "active"
};
},
computed: {
posts() {
return this.$store.state.posts;
_embed = true;
},
tags() {
return this.$store.state.tags;
},
sortedPosts() {
if (!this.selectedTag) return this.posts;
return this.posts.filter(el => el.tags.includes(this.selectedTag));
}
},
created() {
this.$store.dispatch("getPosts");
},
methods: {
updateTag(tag) {
if (!this.selectedTag) {
this.selectedTag = tag.id;
} else {
this.selectedTag = null;
}
}
}
};
Here is a link to my project with working wordpress featured images! https://indvillage.netlify.app/
And here is the logic associated with the axious http request I used.
The question is how, do I include my logic in terms of the wp featured image to the initial nuxt tutorial without breaking things:
export default {
data() {
return {
postsUrl: "https://indvillage.com/wp-json/wp/v2/posts",
queryOptions: {
per_page: 6,
page: 1,
_embed: true
},`
posts: []
};
},
methods: {
// Get recent posts from wp
getRecentMessages() {
axios
.get(this.postsUrl, { params: this.queryOptions })
.then(response => {
this.posts = response.data;
console.log("Posts retrieved!");
})
//document.getElementById("test").id = "testing";
.catch(error => {
console.log(error);
});
},
getPostDate(date) {
return moment(date).format("111");
},
},
mounted() {
this.getRecentMessages();
}
}
Next, here is the App.vue template that displays the parsed information:
<template id="app">
<body>
<div class="row container">
<!-- looping through and displaying the array bound posts in HTML -->
<div class="col s4 m4" v-for="(post, index) in posts" :key="index" :id="'post'+index">
<div class="card" id="test">
<div class="card-image">
<!-- rendering the post's wp:featuredmedia in the image portion of the html/css card -->
<img
v-if="post._embedded['wp:featuredmedia']"
:src="post._embedded['wp:featuredmedia'][0].source_url"
/>
</div>
<!-- rendering the post.excerpt to the html/css card container -->
<div class="card-content" v-html="post.excerpt.rendered"></div>
<div class="card-action">
<!-- rendering the post title to the action portion of the html/css card -->
{{ post.title.rendered }}
</div>
</div>
</div>
</body>
</template>
Please let me know if anyone has any suggestions with regard to implementing wp:featuredmedia to the code derived from the first project/tutorial (nuxt.js)
Thanks again! Feel free to email with further questions
I've set up a react web application that's currently listing all "Employees" from a mongodb.
I'm now trying to "add" employees to the database through a react frontend form.
I've managed to pass the data from the form to the application but I'm unsure of the process I need to go through to actually get that data solidified into an object and stored in the api.
Please excuse my code, it's disgusting as this is my first week learning react(honestly with little js knowledge, that's another story) and I've just patched together like 20 tutorials....
Here's my Form class:
class Form extends React.Component {
state = {
fullname: '',
}
change = e => {
this.setState({
[e.target.name]: e.target.value
});
}
onSubmit = e => {
e.preventDefault();
this.props.onSubmit(this.state)
this.setState({
fullname: ''
})
}
render() {
return <div>
<form>
<input name="fullname" placeholder="Full Name" value={this.state.fullname} onChange={e => this.change(e)} />
<button onClick={e => this.onSubmit(e)}>Submit</button>
</form>
</div>
}
}
and my Listing(?) class:
class EmployeeList extends React.Component {
constructor(props) {
super(props);
this.state = {employee: []};
this.EmployeeList = this.EmployeeList.bind(this)
this.componentDidMount = this.componentDidMount.bind(this)
}
componentDidMount() {
this.EmployeeList();
}
EmployeeList() {
fetch('/api/employees').then(function(data){
return data.json();
}).then( json => {
this.setState({
employee: json
});
console.log(json);
});
}
onSubmit = fields => {
console.log('app component got: ', fields)
}
render() {
//return a mapped array of employees
const employees = this.state.employee.map((item, i) => {
return <div className="row">
<span className="col-sm-6">{item.fullname}</span>
<span className="col-sm-2" id={item.action1}></span>
<span className="col-sm-2" id={item.action2}></span>
<span className="col-sm-2" id={item.action3}></span>
</div>
});
return <div>
<Form onSubmit={fields => this.onSubmit(fields)}/>
<div className="container">
<div className="row">
<div className="col-sm-6 bg-warning"><h3>Full Name</h3></div>
<div className="col-sm-2 bg-success"><h3>Action 1</h3></div>
<div className="col-sm-2 bg-success"><h3>Action 2</h3></div>
<div className="col-sm-2 bg-success"><h3>Action 3</h3></div>
</div>
</div>
<div id="layout-content" className="layout-content-wrapper">
<div className="panel-list">{ employees }</div>
</div>
</div>
}
}
I've managed to pass the data to the listing app evident by
onSubmit = fields => {
console.log('app component got: ', fields)
}
But how can I go about making a post request to store this data I send into an object on the db? And then also reload the page so that the new list of all employee's is shown?
Thanks so much for your time!
You can use fetch API to make POST request as well. Second parameter is the config object wherein you can pass the required request configurations.
fetch('url', {
method: 'post',
body: JSON.stringify({
name: fields.fullname
})
})
.then(response) {
response.json();
}
.then( json => {
this.setState({
employee: json
});
});
Additional Request Configs which can be used :
method - GET, POST, PUT, DELETE, HEAD
url - URL of the request
headers - associated Headers object
referrer - referrer of the request
mode - cors, no-cors, same-origin
credentials - should cookies go with the request? omit, same-origin
redirect - follow, error, manual
integrity - subresource integrity value
cache - cache mode (default, reload, no-cache)
I'm using AngularJS v1.2.13 to create a page with a form which will download a user's file on click.
I'm using $sce to enable the injection of the file URL which works fine.
However, the loading of the resource disables the form submit. I'm sure it has to do with the resource load because when I remove the load and hardcode the url it works fine. I've also created a JSFiddle without it and have not been able to reproduce the problem there.
Any ideas on why this is happening and how it can be fixed?
HTML:
<div ng-controller="viewProfileController" data-ng-init="findOne();">
<form method="get" action="{{downloadFileURL}}">
<button type="submit" class="no-button comment-small" >
Download File
</button>
</form>
</div>
Controller:
'use strict';
angular.module('bop.viewProfile').controller('viewProfileController', [
'$scope', 'Users', '$sce', '$routeParams',
function($scope, Users, $sce, $routeParams) {
$scope.downloadFileURL = '';
// Find current user
$scope.findOne = function() {
Users.get({
userId: $routeParams.userId
}, function(user) {
$scope.user = user;
$scope.downloadFileURL = $sce.trustAsResourceUrl($scope.user.file.url);
});
};
}]);
Users Service:
var userServices = angular.module('bop.users', ['ngResource']);
userServices.factory('Users', ['$resource', function($resource) {
return $resource(
'users/:userId',
{ userId: '#_id' },
{ update: { method: 'PUT' } }
);
}]);
I have an application that in the admin area there is options such as
Background image: [ File Upload ]
Top Illustration: [ File Upload ]
and in the front end I want to easily attach this info to the CSS, maybe teh simply way should be
.background {
background: url(<%: Model.BackgroundUrl %>);
...
}
I currently have my Css files unde ~/Content/Css
shall I have a View with this and change the content type so I can use the Model part?
What other techniques are available or this situation?
Thank you.
You cannot use the model in a static CSS file. If you want to achieve this you will need to generate it dynamically using a controller action. As an alternative you could directly use an img tag:
<img src="<%: Model.BackgroundUrl %>" alt="" />
I ended up doing a new View and set all up as:
in the Master Template
<link href="<%= Url.Content(
String.Format("~/{0}/Css/CustomCss.aspx",
ViewData["CalendarUrl"])) %>"
rel="stylesheet" type="text/css" />
in the Routes
routes.MapRoute(
"CustomCss", // Route name
"{calurl}/Css/CustomCss.aspx", // URL with parameters
new { calurl = "none", controller = "Content", action = "CustomCss", id = UrlParameter.Optional } // Parameter defaults
);
in the Controller: Content, Action: CustomCss
// GET: /Css/CustomCss
public ActionResult CustomCss(string calurl)
{
return View();
}
in my View (placed in Shared):
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>"
ContentType="text/css" %>
<%
string company_logo = ViewData["CompanyLogo"] as string;
string company_bkg = ViewData["CompanyBackground"] as string;
%>
.background {
<%if (!String.IsNullOrWhiteSpace(company_bkg))
{ %>background-image:url('<%: company_bkg %>');<%} %>
}
#header-content{
<%if (!String.IsNullOrWhiteSpace(company_logo ))
{ %>background-image:url('<%: company_logo %>');<%} %>
}