Am developing a php mysql app with codeigniter for users on an intranet. It heavily uses jquery and flexigrid. One of the components on a page is a table which gets populated via jquery post based on user action/actions on other components of the same page ... So far, all works fine.
There are too many components (tables/forms, etc) on this page, and for lack of real estate, users have requested me to add functionality/ability to move one of the components to a new window. I can move the component in question to a new window, but am not sure how I could refresh that new window based on user activity on the default window - and thats where I could use some help.
An example of what I am looking for can be found in phpmyadmin, wherein you are able to edit a sql query in a popup window and on running the query, it updates another window with the results of the query - It also seems to know which window to update/refresh if there are multiple tabs/windows open ...
If you can give any hints on how to proceed with this, that'd would be very helpful ... thanks.
Look for window.opener in jquery you can use your querystring to pass data to the popup/form page
Related
I'm new to web development and I've been studying cakephp and I have this situation where I want to know the best practice.
Imagine a user creating a new Customer in the application, in the form he has to choose the customer's sales group, and this table has so many records, that's using a drop down list isn't a viable option.
I was thinking in the user press a button, then open a modal window. This new window would have a grid, with search options (for filtering the data) and the user would choose one, and go back to the original form, bringing back the sales group selected by the user.
What's the name of this technique, and is it a good option? How to do this in cakephp?
Best regards
Your question is about the front-end, so it doesn't matter if you are using CakePHP or another PHP framework.
What you want to do is make an ajax call to the server on opening the modal window, so it populates its' contents with your grid. Then, proceed as planned.
On the other hand, you can use something like Select2. This way you can have searchable drop-down menu right in your page and the user won't need to open a modal window. It's just more convenient for the user.
You can check the examples for Select2 here.
I'm currently only using PHP to take user submissions, put them in a database, and echo them out on a page using SQL to select from a table, such as comments. I need a system that will automatically update comments without refreshing the page like on YouTube. The less the user has to manually update, the better.
I want it to work pretty much exactly how YouTube and Twitter function, where it'll say "x NEW COMMENT(s)" and clicking that updates everything.
My teacher recommended a JQuery function, but I don't have any background in that language so I don't know where to begin looking.
I'm at a complete impasse. I will update this if you guys need additional information to aid in my search.
You are looking for AJAX
You will need a HTML page with jQuery/AJAX that calls another PHP page. In that PHP page you do the DB request and then ideally return the data as JSON so that your frontend part can display it to the user.
As every one says, AJAX is the way. You can find a simple blog I did on it here.
I am tying to put some user data from the database using php.
The database contains so many record and i am displaying it using mysql_fetch_row() and this gives me the fields of first row.
Now the problem is a have two buttons namely next and previous. And when a click next the fields in the next row has to be obtained the they should be inserted into page without loading the page once again. I am facing problem with this.
I am using php for server side programming and html, css for client side programming.
I think that no one will give you the answer. Too many to write. You need to read about ajax (this is the technology that will allow you to do some action without page reloading).
You need to write javascript(you can use some library like jquery) function which will open some php page with the data that you want and then update your site.
Here you have some nice tutorial:
http://www.w3schools.com/jquery/jquery_ajax_intro.asp
Why use AJAX for dynamic web pages when you can do it only with php?
The main reason to bother with AJAX is User Experience (UX).
Now AJAX won't necessarily improve UX in every single instance so in a lot of places sticking with pure PHP is perfectly okay.
But imagine the case where you have a text field on the site and a link to vote on something. Kinda like this site. When you add AJAX your users won't loose the text they entered in the textfield when they decide to vote on the link! How incredibly useful!
So if you care about your user's experience it is a good idea to use AJAX in situations like that.
PHP creates and outputs the Content to the Client Browser as it's a Server-Side Language and that's what it was built for, so on a request your code will access database, files etc. and then output the constructed html/text to the client.
Ajax just gives the User a more Desktop like feel. For example deleting a record and instead of the entire page reloading just letting the one element disappear from say a list and letting the server know that the record is to be deleted. But Remember to let the User know when you are busy sending data to the server (With a progress bar in .gif format for example). As lot's of user feel that if nothing happens on the screen to notify them, that the application is frozen which means they will either reload the page or just try to click the button again.
But you will need to provide some sort of compatibility with browsers that have Javascript disable and thus cannot use your AJAX functions, just something to keep in mind.
AJAX stands for Asynchronus Javascript and XML, meaning that a page can get new data, without having to reload a page.
PHP cannot send data without reloading the whole page. A user has to press a button, to send data.
An example of AJAX is for example google suggestions or the tag suggestions on this website.
Preamble to scope my question:
I have a web app (or site, this is an internal LAN site) that uses jQuery and AJAX extensively to dynamically load the content section of the UI in the browser. A user navigates the app using a navigation menu. Clicking an item in the navigation menu makes an AJAX call to php, and php then returns the content that is used to populate the central content section.
One of the pages served back by php has a table form, set up like a spreadsheet, that the user enters values into. This table is always kept in sync with data in the database. So, when the table is created, is it populated with the relevant database data. Then when the user makes a change in a "cell", that change immediately is written back to the database so the table and database are always in sync. This approach was take to reassure users that the data they entered has been saved (long story...), and to alleviate them from having to click a save button of some kind.
So, this always in sync idea is great, except that a user can enter a value in a cell, not take focus out of the cell, and then take any number of actions that would cause that last value to be lost: e.g. navigate to another section of the site via the navigation menu, log out of the app, close the browser, etc.
End of preamble, on to the issue:
I initially thought that wasn't a problem, because I would just track what data was "dirty" or not saved, and then in the onunload event I would do a final write to the database. Herein lies the rub: because of my clever (or not so clever, not sure) use of AJAX and dynamically loading the content section, the user never actually leaves the original url, or page, when the above actions are taken, with the exception of closing the browser. Therefore, the onunload event does not fire, and I am back to losing the last data again.
My question, is there a recommended way to handle figuring out if a person is navigating away from a "section" of your app when content is dynamically loaded this way?
I can come up with a solution I think, that involves globals and tracking the currently viewed page, but I thought I would check if there might be a more elegant solution out there, or a change I could make in my design, that would make this work.
Thanks in advance as always!
I wanted to follow up here, just in case anyone was interested. Turns out that my question was unnecessary.
Because I have my code set up to save the entered information in the change event for the input element, and since the change event only fires when the element in question loses focus, then if the user clicks anywhere else in my web app interface, that fires the change event for the input, and the data is saved.
The only exceptions are if they refresh the page, or they close the browser, but both of these events do result in an onunload event, meaning I can bind my save data function to that event and handle those cases.
So everything works as I hoped it would, and my confusion arose from a misunderstanding of when the change event would fire.
AJAX is normally overkill for site navigation. Unless there is a compelling reason to use AJAX , I would just make your navigation menu use good old links instead of AJAX calls.
AJAX is used to keep the user immersed in an application, without seeing the flicker, etc. of a full page refresh. However, if they are planning to navigate to another page, the full page refresh is expected (and therefore desirable).