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;
});
});
Related
New here. I have some programming background in the remote past (Perl, Visual basic, C++) etc. I am trying to re-start my programming skills. So eventually, I want to learn htmx + Django.
For now though, I just want to create a simple frontend using htmx. I want to just get started with a complete example file. I went to htmx site and an example shows the following code:
<div hx-target="this" hx-swap="outerHTML">
<div><label>First Name</label>: Joe</div>
<div><label>Last Name</label>: Blow</div>
<div><label>Email</label>: joe#blow.com</div>
<button hx-get="/contact/1/edit" class="btn btn-primary">
Click To Edit
</button>
</div>
hx-get = "/contact/1/edit" Does this line mean I need to create a contact/1 folder at the site directory and edit.html?
For now I am trying to use just htmx. But I am going to go through some tutorials on htmx+django eventually.
Thank you!
I tried the example code, I get a code 404 error from my local server.
The short answer is: the target endpoint can be anything. It can be a pre-rendered static HTML file, that HTMX uses to update the current page's content (see boosting mode). Or it can be a dynamic backend server's endpoint that returns some content based on the path and other parameters.
HTMX site's example section uses a "fake server" on the client that acts like a real backend server. It catches the routes used in the examples and returns some HTML/data for them. It is there just for practical reasons (this way they don't have to host a real backend server for demonstration purposes.)
On your dev environment you want to use a real backend, like Django that you mentioned. With Django you create an endpoint with the path function that maps /contact/1/edit URL to your contact editing view function, e.g.:
from django.urls import path
from . import views
urlpatterns = [
path('contact/<int:contact_id>/', views.contact_view),
path('contact/<int:contact_id>/edit/', views.contact_edit),
]
In your view function you can check for HTMX-specific headers to detect requests originating from HTMX so you can return only a HTML fragment, not a full page.
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
I am currently working on an express application that uses handlebars to render templates for html to be delivered to the browser.
On one of the pages I have a form, this form data needs to be posted to a route in express, once the form data is received I then build a new object so I can then do a further post from express to an api, this api should then return some data back to the express app for me to then render this new data to a new view.
So post from form to a route say '/searh'.
In the search route I build a new object with the submitted for data.
This new object is then posted to an api.
This api should return some data.
With this new data I will pass this to my handlebars template to
render a new page showing these results
e.g. the search page is '/search' and I need to show the results in '/resuls'
I am just now sure how I can achieve this in terms of rendering a new page based off of the returned results.
Any help greatly appreciated.
Thanks,
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.
Im new to umbraco, Im using a umbraco surface controller to enter data to database , Normally i use #Html.ActionLink to call to action methods like delete,edit,details etc. Above function cannot be used in umbraco so i want to know how to do that kind of thing in umbraco?
If you have an IPublished item you can just call item.Url inside the href of an anchor tag. this would do the trick.