i am trying to make a control panel for my site, but i have no idea on what logic to use.
for example my control panel has an add user button,what i would like to happen is that when a user clicks on that button.. the page will show up on a specific <div></div> with out refreshing the page.
The logic i was thinking was:
1.to use an iframe and load all the relevant pages their(which i don't know the PRO's and CON's)
2.Use FLASH, for the control panel(which i don't know the PRO's and CON's)
3.Use javascript or a JS library like JQuery which i don't know what to call it..
the question is what logic would i use, or you can advise something more secured and netter. thanks
If you expect people to frequently add users from this page, it might be wise to just load the form necessary for adding users into the DOM to begin with, and toggle its visibility when the admin clicks on this button.
The last option you mentioned, loading data asynchronously with jQuery (or any JS library), would also be pretty trivial. There are numerous ways you could do that, but one simple method is to just use the Ajax .load method:
$(".addUser").on("click", function(){
$("#myDiv").load("/addUserForm.php");
});
Related
This is a bit more abstract than the usual questions which I know goes against the spirit of things, but I'm hoping that I can still get a good response.
Here's the issue. We have a fairly complex web application that is written in PHP. The purpose is relatively unimportant, but simply put: We are using Comet / AJAX / JSON / JavaScript / PHP / MySQL (NO jQuery, however, native JavaScript only) to render controls that display data in real time. Throughout this application we are rendering popup modals using native JavaScript. It's fairly complex logic that tests for the existence of a modal with the same name on the page and prevents creating new versions of the same, and of course once created a layer is created to prevent interacting with links beneath.
The issue is that we have at least one modal that can be called multiple times before it is rendered on the page due to the time it takes the AJAX call to collect data from the database and assemble it for presentation. If a user were to 'double click' on said link they would be presented with two modals, one on top of the other. I've been able to actually render 8-10 of these. Interacting with the topmost modal appears to be broken because the user is actually effecting collapsible headers on the bottom-most modal. Once you start closing the dialog boxes and get to the bottom you can see where you've clicked.
So, my issue is this: What is the best way to prevent this behavior?
I've considered simply adding a function to the onClick event that would remove the onClick attribute from the link after the first click with a minor timeout (say 500ms). I've also considered trying to implement bit testing logic that would count clicks and only actually first the event after the first click and reset when the modal is closed.
What I'm wondering is if someone has any thoughts or suggestions or even has tackled a similar issue and has some insight on best practices to accomplish my goal in this instance.
Thank you very much.
You can unregister the click handler once it fired:
var element = ...,
myClickHandler = function(event) {
// ...
element.removeEventListener('click', myClickHandler, false);
// ...
}
element.addEventListener('click', myClickHandler, false);
In this case, I found the simplest solution to be the best but I would still love to hear other feedback if'n it's out there.
In this case I found that the order of operations was the issue. I was awaiting the AJAX response to generate the body html for this modal. I changed the order to instead create the modal immediately using <p>Loading...</p> within the body of the modal. Then, when the AJAX was completed and I had my new body text, I just injected it into the modal's content area with a neat bit of code and Bob's your Uncle, we had jackpot.
My web application utilizes page reloads in places where the page structure changes.
For content changes initiated by the user it is all handled by Ajax.
However I'm planning on removing all the page reloads and replacing them with ajax calls that simply update the page using innerHTML for the body and head tags.
To do this I know have to manually call functions that are normally called by the onload event.
When I am done I will have a complete ajax application. My question is, is this standard practice now....I see a lot of applications where you do something and the whole page reloads, where even common elements are reloaded.
For example go to Apple.com and hit on the first button you see "Store"...you will see the whole page reload even the menu bar that does not change is reloaded wasting bandwidth..
Because I don't see other people using complete ajax solutions...I wonder if I am headed down a wrong path.
My question?
Is a complete ajax based web application best practice? (of course file uploads aren't supported, omitting this, is it best practice).
If so why do big sites not do it? I see few sites that actually employ ajax instead of page reloads.
There are a number of reasons not to go fully ajax. A few are:
If the user refreshes the page they'd be sent back to the home page;
if they pressed the back button, they'd go back to the previous site
they visited.
Search engines won't be able to index anything past the home page.
Anyone without javascript enabled or on IE 6 (or it's equivalent) wouldn't be able to use the site.
Lastly, it can be hell to debug a problem -- I went full ajax on a project a while ago and ended up regretting it.
If none of the above are important to your project, and you're looking to do something different, then by all means -- the real question you need to ask is "does the added complexity justify the savings in bandwidth?".
The concept of ajax is reload certain content of the page when you don't need to change all the content.
Your example of apple.com: it isn't a best practice to use ajax in navigation, because the history of browser don't handle this (use the back button of the browser and the navigation will not respond if you use ajax, keep that in mind).
If you have a box with testimonials and want them to change from time to time, so it's a good place to use ajax, avoiding the whole page to reload.
You can also have a static page with all testimonials to let search mecanisms to index that content.
Example of big sites? The search of google. When you type only the box of results is reloaded to view one preview.
So you have to choose when use and when not use ajax.
How can i create something similar to the Facebook LIKE hyperlink which allows me to update mysql database without refreshing the page?
In other words , I need this hyperlink to update the database once i click it and display how many likes is stored in DB without page refresh.
Thanks in advace.
In plain simple words, you will need to use AJAX, which will get fired when you click the hyperlink, using JavaScript.
There are these options to use AJAX:-
Use JavaScript own functions to fire AJAX.
Use JavaScript libraries, like jQuery, Prototype, and some more.
By far, jQuery will suit every novice to its best & you can have a look in here for more details on AJAX.
Hope it helps.
in even simpler words than my predecessor;
this is what you have
//html
a href='somewhereOverTheRainbow'>LikeThis...
this is what you should have
//javascript
var likeIt=function(myAnchorElem){
//send info to ajax via Zepto, jQuery, Mootools, Dojo, ExtJS - you name it - or a standalone ajax lib
jQuery.get("somewhere.overtherainbow.com/like.php?url="+myAnchorElem.url);
//prevent the default
return false;
}
//html
a href='somewhereOverTheRainbow' onclick='return likeIt(this)'>LikeThis...
#javascriptWizards; I know, he should use addEventListener instead to then get a real event on which he can call preventDefault and more.
next to the ajax way, you could use json-p, an img or an iframe or even by using websockets. But for simplicity and ease, stick with the ajax way!
in general; making a feature such as the facebook like or google "+1" seams very trivial. The truth is far from it; it is one of the harder things to do in the web! The Frontend for it is easy like cake. But the Backend... wanting your website to scale and demanding/needing normal database respond times will bring you on to your knees
I'd suggest the AJAX approach but just to mention it, the effect could be achieved without AJAX by placing the button in an iframe, this iframe could then follow the the link without the page having to refresh.
http://infrequently.org/07/OSCON/sample_code.pdf
http://webdeveloper.econsultant.com/ajax-demos-examples-code-samples/
Some code sample
I have a search page on my site. The search pulls from a couple (eventually a few) API from external sources. Sometimes a search can take up to 5 seconds.
Because of this, I would like to load my search page at least with a loading gif, and let AJAX begin to pull the data, showing a bit at a time. (similar to http://gamespot.com although this is a bad example since the search doesn't work with JS disabled)
Of course I have to consider the users who have turned Javascript off, so for them I'd just let PHP do the search and they'll have to bear with the wait.
What is the best way to implement this? If I use <noscript>, then all users still have to wait for the 5 second PHP portion to load anyways.
Would I just have the search form send the user to different pages depending on their JS status?
Perhaps have the noscript part define an iframe that loads the results from the long-duration PHP query?
Would I just have the search form send the user to different pages depending on their JS status?
If you have the users coming to your page, and then sending the form, that's absolutely the best way to go. E.g.:
HTML:
<form id='theForm' action='long_search.php'>
....
JavaScript:
hookEvent(document.getElementById('theForm'), 'submit', function(event) {
event.preventDefault();
loadAjaxSearchResults();
return false;
});
...where hookEvent is a function that uses addEventListener or attachEvent (on IE).
Off-topic: The hookEvent thing, like a lot of this stuff, is easier if you use a library like jQuery, Prototype, YUI, Closure, or any of several others. For instance, with jQuery:
$("#theForm").submit(function() {
$("#resultsTarget").load("ajaxsearch.php", $(this).serialize());
return false;
});
Without JavaScript, you will need to post the data to the server and perform a full postback (refresh) on the page. Just like the good ol' days. ;)
no you apply your js code (autocomplete if i understoof right?) up to an input field. Think of Javascript like an extender. If js is disabled, no autocomplete is extended on the input field. You may put some text, where you say, dude, turn on js otherwise this will be a long search. And if js is on, hide the text
Progressive enhancement:
Build it so the PHP version works, first and foremost. This is accessible to all. Then, add javascript so that, if available, it performs ajax requests behind the scenes to grab the content and update the current page.
See this book as a simple, great read on the subject:
Bullet Proof Ajax
I am currently building a website in codeigniter that is one page site, basically one the user comes to the page, they created with a main menu from that menu they choose which sections of the sites they would like to see, and clicks on the associated links...clicking on these links should display the content in their own accordian menu.
My question is I assume the easiest way to do this would be load the selected views in using jquery and ajax? If I am on the wrong lines what would be a better solution, also I can't find anything about loading in views using ajax, does any one have any advice?
Yes, you can easily load content with AJAX and jQuery, by binding click-events on your menus and links, like this:
$("a.menuitem").click(function () {
var link = $(this), url = link.attr("href");
$("#content_pane").load(url);
return false; // prevent default link-behavior
});
However, by going down this route you forego some key functionality in the browser. The Back-button won't work. Your users can't bookmark any of the subpages. There are workarounds (like this jquery history plugin), but it'll be a lot of work to replace functionality that comes natively with every users browser.