I am really new to all the AJAX stuff and now I wanted to convert a small homepage I created with CakePHP to an full AJAX page.
The functions I use are mainly:
View Dashboard with a List of "Book"s
View a "Book"
Create a "Book"
Edit a "Book"
Delete a "Book"
Each function uses its own view and should be shown in a modal. It is important that modals can overlap. In the beginning I added the JavaScript I needed to each view. So AJAX was loading the HTML view (+new AJAX) and displayed it in an modal. I was able to click on "View Book" and then "Edit Book", so two modals would overlap.
This was working fine, but Chrome threw a few warnings because it didn't like reloading AJAX.
So I decided to put all the AJAX logic into the Dashboard View and created an event handler for every possible button that could be clicked. Because my modals might overlap (and I don't know which ones would overlap) I created an empty div for every modal that could occur.
Currently it is working fine, but what if I add way more functionality?
Would I need in my Dashboard View an empty div for every modal that could show up and do I have to load ALL the AJAX functionality when the page is loaded?
Where should I put all the logic? Do I load all at once, even though I might just use a tiny part of the logic? How would I handle many overlapping modals with different content?
I hope you got some advice for me, because I think my solution will make it a big mess as soon as the project grows.
Thanks a lot!
Cheers
Related
I am Using Ignite UI Control I am facing a sorting issue
Let me explain the scenario
I am opening an igDialog and in that dialog box I am opening a Grid view using igGrid which looked like below
Fig(1)
For the first time it working fine now when I click on each column is grid sorting is executed once but when I clicked on the add button the I replace the the dialog contents with the add content now this dialog box will be look like that.
Fig(2)
When click on the cancel button Above it again load the content of listing view and show Fig (1).
The problem I faced is actually when I clicked on any column it called the sorting function twice and it hit my controller action twice.
No of times I go to add view and then back to list view it called sorting multiple times.
Now I don’t know what's happening here ?
Note : I am using $(gridId).igDialog("content", html); to loaded content dynamically
It would be better if you can include the code which handles the view changes inside the dialog. What you're describing sound like grid events are attached multiple times on the same elements. If you're not disposing the grid, or attaching custom events every time it's shown, then this would be the result.
I will update the answer to be more concrete once you include the code in the question.
So I've been going round and round trying to figure out the best way to have a footer that has a hidden panel for actions that slides up. The site is pretty basic, it has a header, content area and footer. I made a simple wireframe to explain this a bit easier:
So ideally the content panel are say something like posts, when clicked I would like to open the Secondary actions panel with the edit form prepopulated with the data from the content panel. If the Icon is clicked I would like to pop that same Secondary actions panel with a blank add new post form. Where I struggle with this is the convention of how to do this and what is the best via AngularJS. The secondary actions panel and footer are wrapped within a FooterController, but the content panels are wrapped inside a separate controller. I'm not sure whether I should be using a directive or a service.
I'm currently utilizing angular-ui-router but this doesn't manage the ui events that I need to happen.
Any advice would be greatly appreciated, I'm very knew to AngularJS so I'm trying to learn the right way of doing things with AngularJS rather than just building some hacked up crap that I'll end up scrapping later on!
Thanks!
I think secondary panel should have its own ui-view (with its own controller) instead of staying inside the footer.
For it to know which item has been clicked, you can pass through the ui-router state.
Let's say your control panel has post id 1234, then it should have a ui-sref="stateName({postId: post.id})"
And this state in ui-router will specify which controller/template it should fire, and inside that controller you can get the id from $stateParams.postId
You can then use the post id to get the post either remotely or from service if you have stored them earlier.
I decided to learn AngularJS, but I got stuck on my first project :/
I want to make menu like in first example here: http://tutorialzine.com/2013/08/learn-angularjs-5-examples/ So there are a few options: "home", "projects" etc. and if I click on one I get other part of site without reloading whole page.
What I want to accomplish:
dynamic data loading, when I click on link, refreshes only one part of page not all. I want to make page like this (click on any link - the menu bar sands still and isn't reloaded)
all parts of site are in separate files (I don't want to keep all page data in one html file, I want to break it into pieces)
adress of page (in browsers adress bar) is changing when I click on link
I know I could use AJAX or something like this, but the problem is: I want to make Google-friendly site and - as in know - Google have some problems with AJAX based sites.
Can you tell me what way should I choose and if angularJS actually qualify to this job?
I’ve two individual pages which actual needs the same kind of function so I’ll combine them into one question.
The function I would like is a modal window while the page are loading but the different for the two pages is when this modal window with a waiting text should appear.
When entering pageA it has to collect and calculate a lot of data so the loading time can take some time before it is ready. For this page I would like the waiting sign to come until the page is finish loading.
PageB is a form. The page loads fast but when a user hits the submit button the code does some different things with the data so it too can take some time and here I would like the modal javascript waiting sign to come when pressing submit. I do all the collecting, checking, validating and inserting on the same page, PageB, so I’m not changing back and forth between two pages.
I’ve scouted Google and different jQuery / JavaScript pages for a solution but what I’ve been struggling with is that it should work on both kind of pages, if that’s possible, or otherwise create two functions one for each page.
I’ve also searched stackoverflow but the question which is somewhat similar is not quite what I’m looking for either or I simple just doesn’t understand the solutions good enough.
Any help, suggestion or tips would be very much appreciated.
Sincere
- Mestika
Take a look at the jQuery UI Dialog - it has everything you need ...
http://jqueryui.com/demos/dialog/
For pageA call the function in a <script> tag at the top of the page and close it in the $(document).ready() function
For pageB call the function when the form is submitted and close it once that processing has been completed ...
For page A, create a normal HTML element (and CSS) to show the loading indicator, then hide it in Javascript when the page finishes loading.
To make the page work if Javascript is disabled, add the element using Javascript at the beginning of <body>.
I am having some trouble with getting jquery to recognize classes/ids of content that has been loaded into a dialogue box. All the jquery code (including the code that deals with the as yet unloaded classes) is loaded before the dialogue box is created, however the html that eventually goes into the dialogue box is created on the fly. I know it is going to get certain classes but don't know the rest of the code/content hence the reason I am loading it from the database. If I put the html on the page with the clickable class rather than the dialogue box it works, but I obviously don't want to do that. I was thinking this is a DOM problem since the class that jquery is going to be listening for is not on the page until AFTER the dialogue box is created (the dialogue box itself is also created by a click on another item - this has to happen this way as people may or may not want to get the dialogue box with the info from the database in it up). Any help in explaining and possibly finding a solution for this is much appreciated.
Have a look at jQuery.live().