I am using a 3rd party Django package to manage my avatar upload and display in my website. The package requires the upload view to display in a new window and is configured as normal in Django in urls.py like so:
url(r'^avatar/', include('avatar.urls')),
So that when I go to mysite.com/avatar/add.html I see the add view for uploading an avatar.
What I want to do is to create a modal window in my main view which loads the avatar upload view (add.html) into the same view. I have achieved this by doing:
{% include 'avatar/add.html' %}
But what I realise is it displays everything but the upload form, because django does not get a chance to run the 3rd avatar view code associated with this template to inject the context before rendering out in the same way it would if I access it as a URL.
My question is: Is it possible to get inline a 3rd party view Django so that it processes it and injects into my own view/template at render time, still respecting the GET/POST logic in the 3rd party view?
I have full access to the 3rd party view code (which is a view function, I'm using class based view), but heaven forbid me copying and pasting their code into my own which defeats purpose.
Thanks in advance
Ok I just solved this quite nicely like so:
In my views.py class I imported the 3rd party view I want to inline in my view
views.py
from avatar import views as avatar_view
then in the get() method of my class based view
def get(self, request, *args, **kwargs):
user = CreativeUserProfile.objects.get(id = request.user.id)
/*
Get Django to parse the 3rd party view and capture it's HttpResponse.
add() is a view function which specifies it's own template:
avatars/add.html and injects it's form into it
*/
avatar_html = avatar_view.add(request).getvalue()
/* Push the resulting html into my template's own context */
return render(request, self.template_name, {'user':user,
'avatar_html': avatar_html})
Now in my template file I simply do this
profile.html
<!-- Avatar popup window -->
<div class="modal">
<div class="avatar-modal">
<span class="avatar-close-btn">×</span>
{{ avatar_html|safe }}
</div>
</div>
Now I get the html of the 3rd party avatar rendering with the form which works very well!
If anyone can see any potential pitfalls with this approach I would humbly appreciate your expert critique.
Many thanks and hope this helps others
Related
I have an asp.net core MVC project with scaffolded Identity, and the tag helpers in the _LoginPartial view are acting wonky. In the Razor view, the link looks like this and don't navigate to any page or view.
<a class="nav-link" asp-area="Identity" asp-page="/Account/Manage/Index">Manage Account</a>
but for some reason it's being rendered like this (taken from the dev console in chrome):
href="/?area=Identity&page=%2FAccount%2FManage%2FIndex"
I don't know why this is happening and I can't figure out how to get it to render properly and allow navigation to the correct page.
I actually found out the issue. In the IdentityHostingStartup class in the Configure method of the Identity area, I had changed services.AddDefaultIdentity<IdentityUser> to services.AddIdentity(IdentityUser, IdentityRole> It doesn't make sense to me why that changes how the URLs are generated, but as soon as I changed it back to services.AddDefaultIdentity<IdentityUser> things returned to normal.
You can try following
<a asp-area="Account"
asp-controller="Manage"
asp-action="Index">About Blog</a>
It will create following html
About Blog
If you have custom Route mapping like below
[Route("/Speaker/Evaluations", Name = "speakerevals")]
public IActionResult Evaluations() => View();
Then try
<a asp-route="speakerevals">Speaker Evaluations</a>
It will create html like below
Speaker Evaluations
For more information click here
Does anyone know how to expand this theme ( https://github.com/gilbitron/wp-rest-theme ) in order to theme specific pages? For example, I would like to create a page called "Menu" which has a unique navigation to click through to child pages Breakfast, Lunch, Dinner, etc without reload. I'm used to creating individual .php files to theme specific pages to my liking via page-{slug}.php - Is there an equivalent workflow using vue.js and wp rest api?
Instead of using page-menu.php to customize the /menu page, I would imagine I'd need to create something like a menu-page.vue file and add a custom method to specifically call that page in order to template it.
I can't find any examples of this process. Any help would be greatly appreciated.
What I did was add a field using Advanced Custom Fields that determined which template the page should use. I wrapped the display in a component called PageContent that looks like this:
<div :is="page.template"
:page="page"
v-if="!$loadingRouteData"
transition="fade"
transition-mode="out-in">
</div>
router:
'/:slug': {
component: PageContent,
name: 'Page'
}
So when someone navigates to that route, I fetch the page based on the slug param. The page variable then has a template attribute through ACF, which determines the component to display and defaults to a generic page:
if(pages[0].acf.template){
return pages[0].acf.template;
}
return 'page'
You need the WP JSON API plugin as well as the ACF plugin that adds ACF data to the json
My site uses this setup, happy to share more code if you have more questions.
Is there a way that I can pass data to a partial view after it has been rendered. I have a partial view in my _Layout which is rendered. It needs isHeaderShown. However this isHeaderShown can only be set after the #RenderBody is called because only the body controller has this info.
I have in my layout.
#{Html.RenderAction("Index","_Menu", new { area = ""});}
#RenderBody()
Is there a way that I can pass data to a partial view after it has been rendered.
Not using server side. You could always make an AJAX request to the server using javascript and then update some portions of the DOM with the results received from the server. This will obviously happen at a later stage after the view has already been rendered in the browser. Another common technique different than AJAX is the server to push some data to the client using HTML5 WebSockets. You can take a look at SignalR. In both cases you will need to write javascript.
With the replacement of partial views in ASP.NET 5 with view components, how does one access the view components via URL?
I know you call them like...
#Component.Invoke("SomeList", 1)
...but what if you need to have like ajax paging, where you need a callback url to request the next set to be displayed in a partial view? So, a user can click "Load More" and it loads more from a 'partial view'.
You cannot access a view component from a URL directly. A view component is just a component of a view and that view could be a regular or partial view.
Based on your question, I believe you are trying to show the first page by default when the view (having the view component) is rendered? I have tried to put some scenarios here.
Example scenario:
Show a snippet on layout page which shows list of available job positions.
Usage cases:
Render the html related to a job list at the server side :
Layout page would have something like #Html.Partial("JobsListPartial").
This "JobsListPartial" would have something like await #Component.InvokeAsync("JobsListViewComponent", pageNumber). This partial view also sends ajax script to the client for users to navigate through the pages.
At the client when user tries to navigate to a different page, the ajax script makes a call to a JobsController having an api like IActionResult GetJobs(int pageNumber) and this action returns a PartialViewResult by doing something like return PartialView("JobsListPartial", pageNumber).
Render all pages at the client side only :
Create a partial view (having your ajax scripts) and render to the client.
Create a controller exposing api for navigation through pages of available job positions.
Call this api(returns json) from the ajax script.
Use the json data to dynamically change the UI at the client.
i started an Angularjs app just to learn more about the js framework, i'm confused in some things like working with sql so i want a little help to make a show on click table.
What im trying to do is make a request to the database and fill a table with ng-repeat, then show with a sliding effect when i click a button.
I dont have any idea how to get the sql query and insert into a controller in angularjs, please help.
Database movies table:
|--id--|------text------|-----year-----|
|______________________________________|
|--1---|----avengers----|-----2012-----|
|--2---|------mama------|-----2013-----|
I want to pass it to angularjs like:
$scope.movies = [
{text:'Mama', year:'2013',id:2},
{text:'Avengers', year:'2012',id:1}];
This should help you get started. It's a simple controller with data-binding to a property named myScopeData. The code uses the $http object in Angular to make an AJAX request to your PHP to retrieve data from your database. The scope variable myScopeData gets set and updates the view.
HTML
<div ng-app="myApp">
<div ng-controller="mainController">
{{myScopeData}}
</div>
</div>
JAVASCRIPT
var app = angular.module('myApp',[]);
app.controller('mainController',function($scope,$http){
$http({method:'GET',url:'movies.php'}).success(function(data){
$scope.myScopeData = data;
});
});