I am trying to add some Javascript functionality to my symfony project, but have little Javascript experience.
I have a form at /login and after the submit it redirects to /account but the header page is the same.
I want to change the header after the submit of my form.
This is what I have right now:
$(document).ready(function() {
$(".form-login").submit(function() {
$.ajax({
type: "POST",
url: "http://localhost:8000/account",
data: $(this).serialize(),
success: function() {
$(".account:first").text("My account");
$(".account:first").text("Disconnect");
}
})
It works during the load of the page but when I'm at /account it is still the same header.
can used this code :
$(document).ready(function() {
$(".form-login").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "http://localhost:8000/account",
data: $(this).serialize(),
success: function() {
$(".account:first").text("My account");
$(".account:first").text("Disconnect");
}
})
})
})
or
$(document).ready(function() {
$(".form-login").submit(function(e) {
$.ajax({
type: "POST",
url: "http://localhost:8000/account",
data: $(this).serialize(),
success: function() {
$(".account:first").text("My account");
$(".account:first").text("Disconnect");
}
});
return false;
});
})
Related
I'm trying to make a JS script that works on the same form page. Everything works up until redirecting after a successful login.
$(document).ready(function() {
$('#loginForm').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'goLogin.php',
type: 'POST',
data: $(this).serialize(),
dataType: 'html'
}).done(function(data) {
$('#results').fadeOut('slow', function() {
$('#results').fadeIn('slow').html(data);
window.setTimeout(function() {
window.location.href = 'index.php';
}, 5000);
});
}).fail(function() {
alert('Error!');
});
});
});
$.ajax({
url: 'goLogin.php',
type: 'POST',
data: $(this).serialize(),
dataType: 'html',
success: function(data){
$('#results').fadeOut('slow', function() {
$('#results').fadeIn('slow').html(data);
window.setTimeout(function() {
window.location.href = 'index.php';
}, 5000);
});
},
error: function(data){
alert('Error!');
}
});
Please check this code...Replace your ajax section...
I want to make a follow/unfollow user on button click. However the current code only works until the page refreshes. If I refresh the page the follow text comes back. I want it to have unfollow when I refresh the page.
Do I need to have a Session for users in my PHP? Do I have to create a value for a button? Will it remember the click by multiple users?
<button class="user">Follow</button>
<p></p>
$(document).ready(function() {
$.ajax({
type: 'POST',
url: 'echocurrent.php',
success: function(data) {
$("p").text(data);
}
});
});
$('.user').click(function() {
var $this = $(this);
$this.toggleClass('user');
if ($this.hasClass('user')) {
//unfollows
$.ajax({
type: 'POST',
url: 'UnFollow.php',
success: function(data) {
$("p").text(data);
}
});
$this.text('Follow');
} else {
//follows
$.ajax({
type: 'POST',
url: 'follow.php',
success: function(data) {
$("p").text(data);
}
});
$this.text('UnFollow');
}
});
UPDATE :
I want to add this jquery to every user with a session in PHP.
How can I do that?
I'm assuming you're updating a value in "UnFollow.php" you should return this value in "echocurrent.php" and based on it show/hide the class "user"
Update:
add logic to in "echocurrent.php" to return both the number of followers and if the current user is following this user
$.ajax({
type: 'POST',
url: 'echocurrent.php',
success: function(data) {
$("p").text(data.followers);
if(data.isFollowing){
$this.toggleClass('user');
}
}
});
I want to redirect page to URL that return from PHP script.
That when user created a post i want to return value of mysql_insert_id() for post_id.
$('input#submitButton').click( function() {
$.ajax({
url: 'newpost.php',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
window.location.replace("http://localhost/?post_id=...");
}
});
});
I looked here but not found what i want.
Link
In your php script do :
echo json_encode(array(
'id' => $THE_ID
));
then here do:
$('input#submitButton').click( function() {
$.ajax({
url: 'newpost.php',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
window.location = "http://localhost/?post_id=" + data.id;
}
});
});
});
I've form that submit data to external URL and the same time I want to save in my database. I've tried ajax submit and try to sumbit normal POST in ajax success.
Here my code:
<form action="http://www.blabla/post" method="post" id="myfrom">
.....
....
</form>
<script>
$('#myfrom').submit(function() {
e.preventDefault();
$.ajax({
url: 'admin-ajax.php',
type: 'POST',
dataType: 'html',
data: $('#myfrom').serialize(),
success: function() {
$('#myfrom').submit();
},
error: function(e) {
console.log(e);
}
});
});
</script>
But here Ajax is not working form will submit normal post only.
change this:
$('#myfrom').submit(function() {
to this:
$('#myfrom').submit(function(e) {
You have not passed the event in the argument so form gets submitted.
This is another way as i see:
$('yourButton').on('click', function(e){
e.preventDefault(); // stops the buttons behavior
$.ajax({
url: 'admin-ajax.php',
type: 'POST',
dataType: 'html',
data: $('#myfrom').serialize(),
success: function() {
$('#myfrom').submit(); // submits the form if success
},
error: function(e) {
console.log(e);
}
});
});
<script>
$('#postData').click(function(e) {
e.preventDefault();
$.ajax({
url: 'admin-ajax.php',
type: 'POST',
dataType: 'html',
data: $('#myfrom').serialize(),
success: function() {
$('#myfrom').submit();
},
error: function(e) {
console.log(e);
}
});
});
</script>
<form action="http://www.blabla/post" method="post" id="myfrom">
<input type="button" value="post" id="postData">
</form>
you try this one. make a button in place of submit button.
return false after ajax call to stop the normal form submit like this:
$('#myfrom').submit(function() {
$.ajax({
url: 'admin-ajax.php',
type: 'POST',
dataType: 'html',
data: $('#myfrom').serialize(),
success: function() {
$('#myfrom').submit();
},
error: function(e) {
console.log(e);
}
});
return false;
});
UPDATE: The code if working I has some css issues.
I'm trying to put ajax data into facebox modal box, I have the following code but facebox modal box is not loading. Looking into firebug ajax is returning the correct data but i do not know how to pass that data to facebox.
$('a[rel*=facebox]').live("click", function() {
var ajaxpostID=$(this).parent().attr("id"); //Get entry ID
$.ajax({
url: 'http://www.someurl.com/ajax/facebox-ajax.php',
type: "POST",
data: ({
ajaxpostID: ajaxpostID
}),
success: function(data) {
$.facebox(data);
},
error: function() {
$.facebox('There was an error.');
}
});
});
Something like this worked for me:
//added some id to anchor tag and
$('a[id='some_anchor_id']').live("click", function() {
var ajaxpostID=$(this).parent().attr("id"); //Get entry ID
jQuery.facebox(function() {
var form_data = {
ajaxpostID: ajaxpostID
};
$.ajax({
url: "http://www.someurl.com/ajax/facebox-ajax.php",
type: 'POST',
data: form_data,
success: function(data) {
jQuery.facebox(data);
},
error: function() {
$.facebox('There was an error.');
}
)
});
})
})
Hope it works for you