I've been playing with AngularJS for a few weeks and feeling like I'm learning a lot more about SPAs. Given that Angular is front-end and requires a third party data source to get stuff from a database I have used the WP JSON plugin and am now trying to make it work on my Wordpress site.
So far, I have done this which gets the posts and puts them into the template:
$http.get('http://site:8888/wp-json/posts')
.success(function(data, status, headers, config){
$scope.items = data;
})
Great, works well. Now I want to link my posts to an individual post page, and I'm completely stuck as what to use for my templateUrl (if this is even needed):
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider){
$routeProvider
.when('/:category/:post', {
templateUrl: ?????
});
}])
The conflict here is that WP already offers routing. But I need to almost sidestep it so I can get AngularJS working to do AJAX loads for me. Any ideas?
With a SPA you won't need wordpress routing at all. Wordpress will be just the dataprovider for your frontend. Your question really is not about using wordpress and angular but "How to use ngRoute?".
There's a great example on how Routes work in angulars developer guide: https://docs.angularjs.org/api/ngRoute/service/$route
To answer your question: templateUrl is a path to an Html file that contains the template for your post. Angular lazyloads that file using $templateCache and evaluates it. So you could initialize a Controller there that would get data from wordpress and so on.
Related
I have a strange error on a project of mine.
I'm trying to switch a laravel project to something where the backend is seperated from the frontend.
Backend api stays laravel, but frontend is vue with quasar.
Since we want to do the change gradualy, i made one new feature in quasar and want to integrate it in my existing laravel-app.
In order to accomplish that, i'm using an iframe in which i load the new vue frontend.
Everything works as it should work, except for one crucial thing.
I have one id-parameter from laravel that should be passed to the iframe (the quasar/vue application), and for some reason... that's not working.
I've tried to work with route parameters
<iframe src='/spa/12'
and in vue-router
{ path: '/:id', component: () => import('pages/weekSchedule.vue') }
Without success
I've tried query parameters in the url like this
<iframe src='/spa/index.html?id=12'
I can see the correct url in my network inspector, the url is called with the query, but i can't seem to get the parameters in vue.
async mounted() {
this.id= this.$route.query.id
}
When i test it -not in iframe- everything is working.
But in iframe i get nothing.
Does anybody have an idea/solution?
Any help is appreciated!
I've been looking for few days now how to convert form submissions to ajax with jquery, and the csrf token issue is puzzling me.
I solved the problem by adding the javascript snippet found here :
https://docs.djangoproject.com/en/dev/ref/contrib/csrf/#ajax
But when stumbling on stackoverflow, I found simpler answers (not the first one):
Django CSRF check failing with an Ajax POST request
Some answers suggest to simply add the following to the post data:
csrfmiddlewaretoken: '{{ csrf_token }}'
But this seems too good to be true, if that was that easy, why would we need to copy the long snippet from the django website ? Also there's a quick comment to one of the replies about static JS. I don't really get it.
Could anyone please explain why the simplest solution isn't the best, and give some practical examples ?
Thanks
The two solutions are effectively doing exactly the same thing. Supplying the csrftoken to Django in the request. They're just doing it in different ways.
'Simpler' option
For a single jQuery call in a Django template, it may be simpler to use the {{ csrf_token }} tag to add to the post data. However as soon as there are multiple calls in multiple places, it becomes harder to maintain.
jQuery Code
On the other hand, the jQuery code:
Can be included in one place, in a static .js file
Doesn't need to be in a django template
Can be included in multiple pages
Works for all jQuery Ajax calls without modifying the individual calls
Includes working with any third party jQuery libraries
Is the same everywhere, so easy to share in the Django documentation
How it works
The extra complexity of the jQuery code is due to it running in the browser, without access to any Django variables.
The code works by attaching to a jQuery event used for every Ajax call. It looks up csrftoken from a cookie stored in the browser, determines whether to send the token, based on the request type and host, and sends the token as a HTTP header, instead of including it in the POST data.
I've been trying to use the webimage helper in webmatrix to upload an image using ajax but its not clear to me how i can pass data to the webimage.getImageRequest("Image") method from the ajax post.This helper seems to retrieve its file upload data from the browser when the page form is posted.For me, i dont want to refresh the form...I just want ajax to handle process
The issue here isn't the WebHelper - uploaded files are not posted with ajax requests:
How can I upload files asynchronously?
So you're probably getting a file name, but no content. That thread above shows a few work arounds that should work fine with the WebHelper. I've also had pretty good luck with uploadify:
http://www.uploadify.com/
Happy Coding!
I'm working on a website which has been developed in plone. Now I'm facing an issue, I would like to load certain content from a template via an ajax call on normal Plone page(on some event trigger).
Do I need to create any python script??If yes where has it to be placed? and moreover how do I integrate it with TAL(I guess that would be needed) but I'm not sure how.
Could anyone guide me on this with necessary pointers/docs that I should look into?It would of great help to come over my issue and get things rolling.
Thanks,
Avinash
In the "Plone Developer Documentation" there's a section for Javascripting in Plone that perfectly fits your needs
Your question is a bit vague:
From your question, it seems that you just want your ajax call to return html to populate data on the page somewhere then?
Also, it sounds like you want to do the development TTW in the ZMI? Most developers would would use an add-on product and return your ajax response.
However, you can do it TTW with page templates just fine.
Create the new page template
populate it with the template code that gives you the desired output when called within the context of content on a site. For example, http://mysite.com/plone/page/my-template
in your javascript, use a url that in the ajax call: $.ajax({url: 'http://mysite.com/plone/page/my-template', success: function(data){ $('#content').append(data);}})
It's not really anything special to do ajax within plone--just use the tools available and piece it together.
I am using Drupal 7, and I am building a web site, that has a contact form in the footer which should appear in every page. The requirements was to make this form work via Ajax, all examples I found on Internet was form that related to node.
So when I tried to apply the same concept, I faced the problem of rendering the form, so I have passed it to the template as a parameter like this:
$vars['node']->contactForm = drupal_get_form('nilecode_form');
When I render the form by using drupal_render_children($node->contactForm), all the fields were rendered but with no wrapping form tag.
So after frustration, and not very useful IRC chats, I am thinking to do it by using normal Ajax request.
Before doing so is there any solution, before doing it the bad way?
Thanks.
Take a look at my ajax form examples, the best way of achieving this is using a theme function for the form:
http://monchacos.com/monchacos/code/creating-forms-template-file-ajax-included
Theres an attachment in the post, so you can get the full code example.