I'm creating a user profile in php with the aid of jquery and ajax.
What the script does is it has a left navigation, which are tabs that populate the content area from requests made via ajax.
So I click a tab, it loads a page(using .get()), the content of the page is a form. When the form is submitted an ajax request is made to a php file that uses that data to determine what to do. Right now I haven't set up anything in the php file besides a response to send back to the DOM to know it works.
Here is the javascript related to the code in question:
/**
*
*/
$(function() {
$('form').on('submit', function(event) {
event.preventDefault();
var target = $(this).attr('href');
$.post(target, function(data) {
if (data) {
$('#flash').html(data).hide().fadeIn('fast');
}
});
});
});
/**
*
*/
$(function() {
$('#profile-tabs > a').on('click', function(event) {
event.preventDefault();
$('#profile-tabs > a').removeClass('active');
$(this).addClass('active');
var target = $(this).attr('href');
$.get(target, function(data) {
if (data) {
$('#profile-content').html(data).hide().fadeIn('fast');
}
});
});
});
When I load the tab directly without ajax, it submits just fine, the only time it doesn't work is when the content is called through the ajax request.
The javascript code I just provided is in a file called profile.js and is called after jquery.js
Any suggestions or ideas would be awesome, thanks in advance!
Try replacing $('form').on('submit' ... with $('body').on('submit', 'form', ..... I'm pretty sure, that jQuery binds the event to $('form') elements when the code loads - then, when you load your form using $.get, the event is not bound to the form.
Using the other method, it binds the even to $('body'), which is always there, and executes the bound function whenever the event-target is a form-element.
Related
Entry level user here. I've seen countless AJAX\PHP examples with data being passed via POST or GET and modified one of their examples. When clicking the button (id="clickMe) I want it to execute advertise.php and nothing more (no variables need to be passed) without refreshing the page and a notification that says success. When I click the button with my current code nothing happens.
<button type="button" id="clickMe">CLICK ME TO RUN PHP</button>
<script type="text/javascript">
$(document).ready(function(){
$('#clickMe').click(function(event){ // capture the event
event.preventDefault(); // handle the event
$.ajax({
url: 'advertise.php',
data: {
'ajax': true
},
success: function(data) {
$('#data').text(data);
}
});
});
});
</script>
Updated, but still isn't executing.
Here is your editted version code:
$(document).ready(function(){
$('#clickMe').click(function(){
$.post("PHP_FILE.php",{ajax: true},function(data, status){
alert(data);
});
});
});
2 things - you need a document ready handler and to prevent the default click action.
$(document).ready(function() {
$('#clickMe').click(function(event){ // capture the event
event.preventDefault(); // handle the event
$.ajax({ // remainder of code...
});
When loading jQuery scripts at the top of the page you need to make sure they do not run until the DOM has loaded, that is what the document ready handler is for. The you capture the click event by including it as an argument for your click's callback function and handle the click with the preventDefault() method.
Since this request is "simple" you may want to consider using one of the shorthand methods, like $.post()
I have a form and when the user clicks the submit button I want to run a separate PHP script before the form-action (going to the next page) gets executed.
Of course I can stop the form-action with evt.preventDefault(); and then I can fire my jquery $.post call but then I cannot 'resume' or undo this preventDefault call, as far as I can see.
So what is the best way to execute a script that process some information after a user clicks the submit button BUT before the user gets redirected to the next page defined in the form action tag?
(Of course I could just carry over the data and perform whatever I want on the next page – but in this case, I would like to keep it separate).
Thanks for any suggestions!
You can try something like this:
var posted = false;
$('form').on('submit', function(ev) {
if ( ! posted ) {
ev.preventDefault();
$.post(url).done(function() {
posted = true;
$('form').trigger('submit');
});
}
posted = false;
});
Or more succinct, using extra parameters:
$('form').on('submit', function(ev, posted) {
if ( ! posted ) {
ev.preventDefault();
$.post(url).done(function() {
$('form').trigger('submit', [true]);
});
}
});
Your $.post call can be run synchronously, so the form would not submit until you've got a response from the server.
You can submit the form programmatically, perhaps in your callback function.
prevent default on form, then run post, on success of post, target the form by id and use .submit();
$('#submit-button').click(function(e) {
e.preventDefault();
$.post({
url:'url',
success:function() {
$('#formid').submit()
}
});
});
Go head with your evt.preventDefault().
Make an $.ajax() call to run your php script.
In the $.ajax() success/failure callback, check the output of the php script you want to run, and accordingly make a $.post call (or not).
You can always hook the click event, and do your stuff.
When you are done you just do $(form).submit();
Working example
$("#submitbutton").click(function(e) {
e.preventDefault();
// do your ajax stuff here.. $.post().
$("#form").submit();
});
You can use just use the native submit function instead of jQuery's submit() which goes through the event handler again
$('form').submit(function(e){ // change form to your form id
e.preventDefault();
var el = this; // store this form in variable
$.post('/echo/html/',data,function(d){ // your post function
el.submit(); // trigger native submit function in success callback
});
});
FIDDLE
In your form tag, add onsubmit="myfunction()"
Am currently using a Jquery load function to load php content into Div. But when I use my php e-mail form it turns all white an the index page is lost(the main layout I mean). Is there anyway I can use Jquery to load Insch.php back into the div even when it needs to be executed?
<form id="contactform" method="POST" action="insch.php"> <--- this is my Form
$('.menut').click(function () {
var phpFile = $(this).attr('id') + '.php';
/* alert(phpFile)*/
$.get(phpFile, function (data) {
$('#box1').html(data);
});
return false;
}); <---- my Jquery load function(on index)
I see you add returning data directly into $("#box1"). If your php file returns Html you should set dataType:'html' in the ajax request.
Sorry, your question is kinda hard to understand. I'm kinda guessing, but it sounds like you're asking how to submit the form without the page refreshing. If so, you could do something like this:
$('.menut').click(function() {
var phpFile = $(this).attr('id') +'.php';
$('#box1').load(phpFile, function() { // <-- this is your ready function
// once the form has been added to the page,
// add the 'submit' event listener
$('#contactForm').submit(function(e) {
// prevent the form from submitting regularly (causing a page refresh)
e.preventDefault();
// get the data from the form
var data = $(this).serialize();
// submit the form via AJAX and put the response in #box1
$('#box1').load($(this).attr('action'), data);
});
});
});
UPDATE:
Your ready function is the function you create in your AJAX call to be executed when the content is done loading (when the content is ready). It may also be called a callback function, complete function, or a success function.
Take a look at the comment I added on the fourth line of code above. I have pointed out what I'm referring to as your ready function.
In your question, you used this:
$.get(phpFile, function (data) {
$('#box1').html(data);
});
Which is equivalent to:
$('#box1').load(phpFile);
This loads the response (your form) from phpFile into #box1. The function (data) { ... } is your ready function. That is where you should bind the submit event to the form.
If you switch to the load() method as I am suggesting, then you would just pass a new function (which will be your ready function) as the second parameter to the load() method, which is the solution I've given in my original answer.
Why does the JQuery script I use in all my pages seems to only works before beginning to browse my tabs if the content of my tabs is the same everywhere ?
I have a tab view web page built with JQuery and AJAX.
This is my JQuery functions:
$(document).ready(function(){
$(".box .more").click(function(event){
alert('test');
});
$("a.linkTab").click(function(event){
var tabID = $('.linkTab')[0].toString().split('#')[1];
$.ajax({
url : "loadPage.php?tabID=" + tabID,
success : function (data) {
$('#body').html(data);
}
});
});
});
This is my body web page:
<div id="header">...</div>
<div id="body">
<div class="box">
<p class="more">LinkLike</p>
</div>
</div>
<div id="footer">9</div>
loadPage.php only include needed page that Ajax script sent.
My tab system works perfectly, I can navigate in the page I want. Before navigating, When I click on the LinkLike, the alert appears. But, when I browse tabs, When I click, there is nothing.
Why does the JQuery script seems to only works before beginning to browse.
Important, the file I imports from php contains exactly the same body than the first one. The file contains:
<div class="box">
<p class="more">LinkLike</p>
</div>
try
$(document).delegate(".box .more","click",function(event){
alert('test');
});
the reason probably is you can generating the link dynamically, and event handlers do not attach themselves to the dynamically inserted elements to the DOM. Previously .live was used but that now is deprecated, if you are using jquery version 1.7+ you can use the .on method or else you can use the delegate method to attach the event handler to the dynamic content. However you can also re-bind the events in the success callback of ajax request
$.ajax({
url : "loadPage.php?tabID=" + tabID,
success : function (data) {
$('#body').html(data);
$(".box").bind("click");
}
});
jQuery.on version1.7+
jQuery.delegate
You are replacing the entire body of the page when your click event fires; therefore, you will need to re-bind your click events once the new content is loaded.
$(document).ready blocks will only fire when the initial document loads, so the AJAX-ed in content will not cause the click events to be bound again, you'll have to do this in the success callback of the click event that replaces the body content.
function init() {
$("a.linkTab").click(function(event){
var tabID = $('.linkTab')[0].toString().split('#')[1];
$.ajax({
url : "loadPage.php?tabID=" + tabID,
success : function (data) {
$('#body').html(data);
init(); // re-bind events again
}
});
});
}
NOTE: This method will work, but it's probably a bit naive. Check out this jQuery page for more details on how to use the "delegate" jQuery method. The delegate method will bind click events both now as well as in the future.
Here is an example using "on", which supersedes "delegate" as of jQuery 1.7+:
// I'm not sure if you're referring to "body" the body tag or "body" the id of your div.
// Please adjust accordingly.
$("body").on("click", "a.linkTab", function() {
var tabID = $('.linkTab')[0].toString().split('#')[1];
$.ajax({
url : "loadPage.php?tabID=" + tabID,
success : function (data) {
$('#body').html(data);
}
});
});
I have a form which I want to submit and show in Colorbox.
The form is Mals Ecommerce View Cart.
See: https://www.mals-e.com/tpv.php?tp=4
I want it to Show the Cart contents in a colorbox iframe. Is this possible to do using the FORM method rather than the Link method?
here the best answer..
add this to your submitbutton : id="SearchButton"
then use this:
$(document).ready(function() {
$("input#SearchButton").colorbox({href: function(){
var url = $(this).parents('form').attr('action');
var ser = $(this).parents('form').serialize(); //alert(url+'?'+ser);
return url+'?'+ser;
}, innerWidth:920, innerHeight:"86%", iframe:true});
});
test at: http://wwww.xaluan.com or http://wwww.xaluan.com/raovat/
I recently faced this problem, spent some time searching the solution and found this:
$("#submit_button").click(function () { // ATTACH CLICK EVENT TO MYBUTTON
$.post("/postback.php", // PERFORM AJAX POST
$("#info_form").serialize(), // WITH SERIALIZED DATA OF MYFORM
function(data){ // DATA NEXT SENT TO COLORBOX
$.colorbox({
html: data,
open: true,
iframe: false // NO FRAME, JUST DIV CONTAINER?
});
},
"html");
});
I.e. Colorbox uses submitting the form via standard jQuery methods. Hope this helps someone.
Try
$("input#formsubmit").colorbox({title: function(){
var url = $(this).parents('form').attr('action');
}});
Not tested, I just took the syntax from the Colorbox page. You'd have to give your submit button an id of "formsubmit" for the above to work.
you can open colorbox independently using:
jQuery.colorbox({href:,iframe:true, opacity:0.6 ,innerWidth:760,innerHeight:420,title:});
and you can call this function on any event like:
jQuery("document").ready(function(){ jQuery.colorbox.. });
when u submit a form send a query parameter along with it. When after submission you reach back the form. see if that parameter is populated.
and then call jQuery.colorbox()