Ok,this is tricky.
I have a form which ask user to upload a file.
I am not submitting the form on submit button,I am doing it on click of an image enclosed in href="#"
reloading the page is to be avoided.(this is the most challenging part)
I have used prevent default on href click and then sended an ajax call to my php page.This does not work.
If I use a tag..it reloads.
If I dont use it,i cant send my file.
I can only use multipart form data when using form tag.
What do i do??
iframe,upclick.js..but i am totally unaware of these.
Just in case if you want to go through my code(note:not a working model,just wanted to keep the question clean):http://jsfiddle.net/feRx3/
Hope I am clear with my question.
A little embarrassing at 1200 rep,I fumble at form.Any help?IE7 support is must!!!
I have used jQuery form plugin. It uses ajax 2.0 if you are on a modern browser or falls back to an iFrame for old browsers.
You should not reinvent the wheel. There are plenty of libraries that does the job.
Try Plupload : http://www.plupload.com/
Related
I am sorry for the stupid question, I realize that what I want to do must be extremely simple, but I can't find my way to do it.
I learned basic programing, mostly front end, and enough php to interact with databases and other basics. I can use jquery, javascrip, ajax, no problem in normal situations. But I am not fluent at all in using object-oriented php and I work on a Yii environment.
I have a contact form on the website I'm working on and it works perfectly sending the data to the database. Now I have to re-create the same form, and use it on a pop up box, but I have no idea how to do the php validation and saving to the database in that situation. I've always used Ajax and I tried it, but apparently you need special synthax with ajax on Yii that I am not familiar with.
So is there any way to have the php validation and saving being performed without ajax, (and without the form submitting that refreshes the page and closes the lightbox)?
"Popups": http://jqueryui.com/dialog/
ClientSide validation: http://jqueryvalidation.org/
PHP-Validation: Easiest Form validation library for PHP?
After everything I tried, because I don't know the Yii framework enough to use ajax in their synthax, I found a way to make my form work with simple jQ.
I have an empty onsubmit attribute on my form, that will change to "return false" if there are errors in the js validation, keeping the page from refresh and showing the errors. And if there aren't errors the form will submit the info to php validation then save to the database and all the php will be executed and the lightbox will re-open with the success message.
I am trying to submit a form without loading another php page. I am using codeigniter. But most of the tutorial have no action in there form tag.
How will this work if javascript is disabled in the browser. Is there a work around for this?
it wont work .. nothing will happen though Ajax .. but the form will submit to it's action .
although it's not a good scenario to imagine but if you expect the user who is using your website doesnt have javascript enabled .. then read more about progressive enhancement ..
in short progressive enhancement means (in your case) :
building a website that can function without javascript ... but if javascript is enabled then use it ...
in your form example what i advice you to do is to give an action to the form ...
and with jquery preventDefault() disable the form default action and do what ever you want though ajax ..
by doing so if the user doesnt have javascript enabled then the form will submit to the requested url , and will be still working both ways ..
but at any rate IMHO ... just work assuming that your using have javascript enabled ..
except if you rely on javascript too much
You can have a fallback. What you could do is check if client's javascript is enabled or not if its enabled then use ajax other wise use Php. Or you can simply display an error message to user to enable javascript.
I have a webpage on which contents are also added dynamically using ajax. For example adding images though image and add draggable to it using jquery so they can be dragged.
Now , i want to save the state of webpage after images are added and are made draggable, so if user navigates away from page and again come back to same page using a link, he is able to see his added images and can also drag it.
How this can be achieved using jquery or anything. I dont have a clue about how we can do this. Any pointers to this will be of great help.
I am using php and jquery.
You can use html5 web storage concepts for saving state of your page. sessionStorage would be easiest to implement.
You can find code samples of sessionStorage and other storage types here.
If html5 is not an option then you can use cookies to store the state of page. You can access cookies via Javascript. You can also use jquery plugin jquery-cookie for easy implementation.
You can also find more discussion on How do I set/unset cookie with jQuery?
You can save the state in some hidden field with javascript and access that hidden field through ajax call or post back with server side code (php). Extract the state of page interpret it and save in some persistent medium like database.
I've put together a PHP script and small form which allows the user to upload image files. As it stands at the moment, this is activated as a Pop Up Window via a 'onclick' event of a button on the parent HTML page.
From research I've done on this site, I know that 'Pop Up Windows' aren't to everyones liking, so I'm really asking for a bit of advice to see whether there is an alternative to the Pop Up Window. I've tried the jQuery modal Dialog, and I've run into all sorts of problems because I have multiple submit buttons, so I'd rather not revsit that if at all possible, although the styling of the modal dialog would be along the right lines.
Personally, I'm a fan of JQuery UI Modal dialog because it's lightweight and I'm already loading UI in my apps.
But there's more going on here....the problem isn't the dialog, it's the fact that you're trying to do a file upload in a dialog. The traditional method of uploading a file is via a $_POST. This works just fine, except that your form needs an action, and that action will by default force a load of the page, even if you have it posting to itself. So in practice, if you do uploads the traditional way, no modal dialog will work.
What you're probably looking for is to do the "Ajax" method of file upload. It's not really ajax.....what you'd be doing is uploading to a "hidden" iFrame in the page that facilitates and upload seemingly without reload. Here's a tutorial...there's a million others out there.
There is also a number of jQuery plugins to make uploads easier....Uploadify is just one of them.
Note that even if you use an "asynchronous" method, you're still under the limitations of HTML. Having an upload button or an <input type="submit"> will submit your form, albeit not correctly, making the form seem like it's just failing uncontrollably. So, to combat this, either setup your upload button as another non-form submit element such as an <a> or just an image with an id that you call onclick via javascript. Or, make it a button and use event.preventDefault() onclick to prevent the default HTML behavior. I generally do the latter with jQuery UI button styling.
Why not try a lightbox ? http://en.wikipedia.org/wiki/Lightbox_(JavaScript)
There are various lightbox clones available which you could use with a iframe with a uploader form. Check out a comparison over here: http://planetozh.com/projects/lightbox-clones/
As for as i know this was the very simple and less javascript popup window. This might help you. less javascript popup box
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