Django forms with ajax, what would be the best approach? - ajax

I am building a plataform inspired on LinkedIn design. I have my pagination made with ajax, when the user scrolls down the page load texts and information which I want them to be editable.
The user will be seeing his information, but when he hovers the info he will see an edit icon, if he clicks all that information becomes an editable form.
What would be the best approach for building it? Do you suggest using some form library? Until now I am using django built in forms.
Thanks

What you explained is much more related to your client (browser) and just a little to your backend django code running on the server. The backend can handle your data and it can also render pages for you, but if you want fancy dynamic stuff running in the browser you need tools that work there.
There are plenty of frameworks available e.g. vue.js, react or angularjs to name a few.

Related

What ajax framework can i use for organize my javascript code in a single page application entirely server side rendering?

My website is an ajax single page application with serverside rendering. What are some javascript framework i can use for made a better organization of my javascript code?
BreezeJS you can use for rich data centric apps, which can be used with knockout or angularJS.
I prefer u to use HotTowel SPA template and take a look on this link
http://www.johnpapa.net/spa/
And before asking any questions You should be clear for what you need and why u need. So take your time and look around you will get.
You can look into breezeJS which is used to build rich Data-Centric application, for DOM manipulation you can use some JQueryUI or KendoUI, for dynamic Data bindings which will allow you to change the content of your Views you can prefer Knockout or Angular. Using AngularJS will be much appreciated as it provides rich AngularUI which helps you to change your view to manipulate DOM. Based on type of application you want to develop, you can select from the above suggestions.

How to install google analytics javascript on an overlay where content resides?

Typically, if it were a regular page-by-page website, I would install the analytics javascript before the body tag.
But, with a site where content is on overlays, how can analytics be installed to track views? (i.e. a one page portfolio site)
Thanks for any insight!
See Tracking Google Analytics Page Views with Angular.js. Even though I'm not sure if you are using something like Angular or just straight javascript, you could use a similar technique described there with hash urls that are set when a user clicks on a different part of the page, that way you could track how a user interacts with your single page site by making different urls for their interactions.
For more information see Pushing Functions onto the Queue.
In javascript that calls the overlay, you can add:
_gaq.push(['_trackPageview', '/url/of/page']);
or:
ga('send','pageview','/url/of/page');

How to improve SEO while using MVC with AJAX

I am developing a site using asp.net MVC. I have used AJAX for paging,sorting dropdown fillup,showing different content on link click etc. I came to know that AJAX call is always against SEO and SEO is most important for my site.
Please suggest me ways to improve SEO of my site without removing AJAX.
You should have been using progressive enhancement from the start. Your site should work without JavaScript/Ajax being enabled. This way all users, including search engines, can get to your content. Then you should enhance your users' experience by adding JavaScript and Ajax to provide a better experience.
At this point you don't have a lot of options. You'll need to go back and make that content available without JavaScript. You can also use Google's crawlable Ajax standard, too, but that only works for Google and for a slightly more amount of work you can make every search engine, and every user, able to reach your content by not making JavaScript required to use your website.

Implement drag-and-drop using AJAX in CakePHP

I wish to create a drag and drop feature for adding profile picture using CakePHP. Are there any samples which I can follow or a step by step guide?
I sourced many samples online but none of them cater for CakePHP.
I basically need a simple drag n drop for users to drag their profile image and the URL of the image is reflected in the database. The user will be able to edit another profile image. What approach should I use for this?
what you want to do is mostly about front-end, the back-end is generic server handling (in this case, PHP upload handling) and has little to do with Cake. That's why you don't see a specific cake tutorial for this. So, look up jquery drag drop and ajax upload. You'll also need to understand Cake rather well (well enough to adapt those online sample code to your Cake app).
I recommend you to use jQuery UI's draggable and droppable interactions.
Integrating them in CakePHP is quite easy, just follow the manual instructions to include Javascript files in a CakePHP application.
Finally, updating the database to reflect the URL of the image can be easily done with jQuery as well, using the AJAX related methods (e.g. post).

when to use AJAX and when not to use AJAX in web application

We have web applications elgifto.com, roadbrake.com in which we used AJAX at many places, especially to update major portions of a page. All the important functionality of elgifto.com was implemented using AJAX. Now we realize a few issues due to AJAX implementation.
All the content implemented using
AJAX is not available to the SEO
bots and it is hurting the page rank
of our site.
Users will not be able to bookmark
some of the pages as they are always
available through AJAX.
When we want to direct the user from
one page through an anchor link to
another page having AJAX, we find it
difficult.
So now we are thinking of removing AJAX for these pages and use it only for small functionality such as something similar to marking a question as favorite in SO. So before going ahead and removing, we want to know expert's opinion on this. Thanks.
The problem is not "AJAX" per se, but your implementation of it. Just as a for instance, you can fix the 'bookmark' problem like google maps does it: provide a generated link for each state of your webapp.
SEO can befixed by supplying various of these state-links to the crawlers, either organically trough links in your site, or by supplying a list (sitemap).
If you implement 2, you can fix 1 and 3 with those links.
In the end you must figure out if the effort is worth it, and if you are not overusing AJAX ofcourse, but the statements you've made are not set in stone at all.
I'm costantly developing ajax based websites, with no problems for SEO at all. You just have to use it in the best possible way.
For example, I have a website with normal links pointing to normal webpages (PHP pages), this for normal navigation if a user doesn't have JS enabled. But if a user has JS enabled, a script will change the links behavior, only fetching the content of the page needed.
This way you still have phisycal separated webpages with all their content, which will be indexed as normal.

Resources