Summary: I have a:
1) main page (Main.php)
2) simple .js script file (dashboard.js)
3) one other simple .php file (form1.php)
4) process.php, a file that processes the information sent by .js file (process.php)
Just like tumblr, I am trying to recreate the same "nav" experience - clicking the several options, replacing the main panel with the new code and when filling up the some form, send that info to BD and present the result in the Main.php
Everything is going well but the last step. After clicking the nav button (main.php), bringing the new form through javascript (dashboard.js + form1.php), filling up that form, I click the button and instead of not reloading the page (jquery->ajax), it sends me to the process.php file and presents me the result.
I have tried not to reload with "return false" and "event.preventdefault()" and still the same result.
JS Code
$('form.ajax').on('submit', function() {
event.preventDefault();
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('name').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(html){
event.preventDefault();
$("ol#list-feed").append(html);
document.getElementById('set-width1').value='';
document.getElementById('tags').value='';
}
});
event.preventDefault();
return false;
});
You haven't defined event:
$('form.ajax').on('submit', function(event) {
event.preventDefault();
//...
});
You need to change the first line to:
$('form.ajax').on('submit', function(event) {
otherwise the event variable inside the function is undefined.
try like this
$('form.ajax').on('submit', function(event) {
event.preventDefault();
//do other works here
}
or remove event.preventDefault() from everywhere and before the end of this function just use return false.
This should work
$('form.ajax').on('submit', function(event) {
Related
index.php
<script>
$(document).ready(function() {
$("#submit").click(function() {
var field = $("#field").val();
$("#popular_colleges" ).load( "xyz.php");
$("#popular_colleges").on( "click", ".pagination a", function (e){
e.preventDefault();
$("imagen").show();
var page = $(this).attr("data-page");
$("#popular_colleges").load("xyz.php",{"page":page}, function(){
$("imagen").hide();
});
});
});
</script>
xyz.php
//another page code
Here I having two pages i.e. index.php and xyz.php now I want to post index.php page variable (var field) to xyz.php. How can I do this ? can anyone help me please ?
Thank You
To post var field = $("#field").val(); from index.php to xyz.php you have to use the jquery ajax(). To use this you have to include the jquery library in your page and its syntax is like:
$.ajax({
url : 'xyz.php',
method : 'post',
data : {
field: field
// key: value pair
},
success: function(response){
// here response in the response you get from xyz.php
}
});
xyz.php: you can get the posted value like:
$field = $_POST['field'];
You can use $.get(), or $.post(), or the more powerful and complex $.ajax().
For a simple value called page, get or post should be sufficient:
$.post('/path/to/other-page.php', {page: page}, function(data){
console.log(data); // what your other page returned
});
I have a button in a page. On clicking the button it should go to another page and that page should be viewed. Also I want to pass some values to the second page when the button is clicked and display the passed values in the second page.
I have written a code in ajax but it is not working.
<script>
$(document).ready(function(){
$(".chk").click(function(){
if($('input.checkin:checked').val()){
var apikey = '60CF3C2oh7D+Q+aHDoHt88aEdfdflIjFZdlmsgApfpvg8GXu+W8qr7bKM33cM3';
var password = 'fHdfvxk';
var endpoint = 1;
var method = 'ProcessPayment';
var dataString = 'APIKey='+apikey+'&APIPassword='+password+'&ddlSandbox='+endpoint+'&ddlMethod='+endpoint;
$.ajax({
type: "POST",
url: "responsive.php",
data: dataString,
cache: false,
success: function(result){
}
});
//window.location.href= 'http://localhost/m/responsive.php';
}
else{
alert("Please Accept the terms and conditions and continue further!!!!");
}
}); });
</script>
I have written a code in ajx when button click, but it will only pass the values to that page. But the page cannot be viewd. Can anyone suggest a solution for this ?
Instead of using ajax you can redirect to the page.
<script>
$(document).ready(function(){
$(".chk").click(function(){
if($('input.checkin:checked').val()){
var apikey = '60CF3C2oh7D+Q+aHDoHt88aEdfdflIjFZdlmsgApfpvg8GXu+W8qr7bKM33cM3';
var password = 'fHdfvxk';
var endpoint = 1;
var method = 'ProcessPayment';
//var dataString = 'APIKey='+apikey+'&APIPassword='+password+'&ddlSandbox='+endpoint+'&ddlMethod='+endpoint;
// use location href instead of ajax
window.location.href = "responsive.php?APIKey='+apikey+'&APIPassword='+password+'&ddlSandbox='+endpoint+'&ddlMethod='+endpoint;
}
else{
alert("Please Accept the terms and conditions and continue further!!!!");
}
});
});
</script>
I am loading a form named staff_view.php in main.php through ajax. It's loading fine but when I submit form to staff_post.php it's redirecting to it instead of showing in console, before I add the code for loading form using ajax it was posting fine but after it's redirecting.
Here is my code
$(document).ready(function() {
$('.content_load').load('staff_view.php');
$('ul#nav li a').click(function() {
var page = $(this).attr('href');
$('.content_load').load(page);
$('form.ajax').on('submit', function() {
var that = $(this);
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(response){
console.log(response);
}
});
});
clearAll();
return false;
});
});
function clearAll(){
$("form :input").each(function(){
$(this).val("");
});
}
Because it's a form, and because you wish to submit via AJAX instead of the usual "redirect-to-page" method that forms automatically use, you must suppress the default action.
Change this:
$('form.ajax').on('submit', function(){
var that = $(this);
etc.
to this:
$('form.ajax').on('submit', function(e){ // <=== note the (e)
e.preventDefault(); // <=== e used again here
var that = $(this);
etc.
You need to prevent default action when you click anchor tag, and that is redirects you to the link in your href attribute
$('ul#nav li a').click(function(e){
e.preventDefault();
var page = $(this).attr('href');
$('.content_load').load(page);
// code...
This is what cause your redirection
I could be wrong, but it looks like you might have a race condition to load the page and attach the submit listener. The page might load after the $('form.ajax') bit is executed.
$('.content_load').load(page); // Race condition?
$('form.ajax').on('submit', function() {
One fix would be to move the following code into a completion callback:
$('.content_load').load(page, function() {
$('form.ajax').on('submit', function(e) {
e.preventDefault();
// ...
});
Also, add the e.preventDefault(); to prevent the form from actually submitting.
I'm trying to show a specific div depending on the result of a SQL query.
My issue is that I can't get the divs to switch asynchronously.
Right now the page needs to be refreshed for the div to get updated.
<?php
//SQL query
if (foo) {
?>
<div id="add<?php echo $uid ?>">
<h2>Add to list!</h2>
</div>
<?php
} else {
?>
<div id="remove<?php echo $uid ?>">
<h2>Delete!</h2>
</div>
<?php
}
<?
<script type="text/javascript">
//add to list
$(function() {
$(".plus").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$.ajax({
type: "POST",
url: "ajax_add.php",
data: info,
success: function(data){
$('#add'+I).hide();
$('#remove'+I).show();
}
});
return false;
});
});
</script>
<script type="text/javascript">
//remove
$(function() {
$(".minus").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$.ajax({
type: "POST",
url: "ajax_remove.php",
data: info,
success: function(data){
$('#remove'+I).hide();
$('#add'+I).show();
}
});
return false;
});
});
</script>
ajax_add.php and ajax_remove.php only contain some SQL queries.
What is missing for the div #follow and #remove to switch without having to refresh the page?
"I'm trying to show a specific div depending on the result of a SQL query"
Your code doesn't seem to do anything with the results of the SQL query. Which div you hide or show in your Ajax success callbacks depends only on which link was clicked, not on the results of the query.
Anyway, your click handler is trying to retrieve the id attribute from an element that doesn't have one. You have:
$(".plus").click(function(){
var element = $(this);
var I = element.attr("id");
...where .plus is the anchor element which doesn't have an id. It is the anchor's containing div that has an id defined. You could use element.closest("div").attr("id") to get the id from the div, but I think you intended to define an id on the anchor, because you currently have an incomplete bit of PHP in your html:
<a href="#" class="plus" ?>">
^-- was this supposed to be the id?
Try this:
<a href="#" class="plus" data-id="<?php echo $uid ?>">
And then:
var I = element.attr("data-id");
Note also that you don't need two separate script elements and two document ready handlers, you can bind both click handlers from within the same document ready. And in your case since your two click functions do almost the same thing you can combine them into a single handler:
<script type="text/javascript">
$(function() {
$(".plus,.minus").click(function(){
var element = $(this);
var I = element.attr("data-id");
var isPlus = element.hasClass("plus");
$.ajax({
type: "POST",
url: isPlus ? "ajax_add.php" : "ajax_remove.php",
data: 'id=' + I,
success: function(data){
$('#add'+I).toggle(!isPlus);
$('#remove'+I).toggle(isPlus);
}
});
return false;
});
});
</script>
The way i like to do Ajax Reloading is by using 2 files.
The first: the main file where you have all your data posted.
The second: the ajax file where the tasks with the db are made.
Than it works like this:
in the Main file the user lets say clicks on a button.
and the button is activating a jQuery ajax function.
than the ajax file gets the request and post out (with "echo" or equivalent).
at this point the Main file gets a success and than a response that contains the results.
and than i use the response to change the entire HTML content of the certain div.
for example:
The jQuery ajax function:
$.ajax({
type: 'POST', // Type of request (can be POST or GET).
url: 'ajax.php', // The link to the Ajax file.
data: {
'action':'eliran_update_demo', // action name, used when one ajax file handles many functions of ajax.
'userId':uId, // Simple variable "uId" is a JS var.
'postId':pId // Simple variable "pId" is a JS var.
},
success:function(data) {
$("#div_name").html(data); // Update the contents of the div
},
error: function(errorThrown){
console.log(errorThrown); // If there was an error it can be seen through the console log.
}
});
The PHP ajax function:
if (isset($_POST['action']) ) {
$userId = $_POST['userId']; // Simple php variable
$postId = $_POST['postId']; // Simple php variable
$action = $_POST['action']; // Simple php variable
switch ($action) // switch: in case you have more than one function to handle with ajax.
{
case "eliran_update_demo":
if($userId == 2){
echo 'yes';
}
else{
echo 'no';
}
break;
}
}
in that php function you can do whatever you just might want to !
Just NEVER forget that you can do anything on this base.
Hope this helped you :)
if you have any questions just ask ! :)
EDIT
JQUERY-AJAX REQUEST CODE:
<script type="text/javascript">
$(document).ready(function(){
$(".form").submit( function(e) {
e.preventDefault();
var form = $(this);
var div_add_comment = $(form).parent();
var div_comments = $(div_add_comment).parent();
$.ajax({
type: "POST",
data: $(form).serialize(),
url: "includes/comment.php",
success: function(msg){
$(div_comments).html(msg);
}
});
return false;
});
});
</script>
JQUERY SHOW ALL - COLLAPSE COMMENTS CODE
<script type="text/javascript">
$(document).ready(function(){
$('.see_all').click(function(){
var thisItem = $(this);
thisItem.parent().find('#comment2').slideDown('fast');
thisItem.parent().find('.collapse').css('display','inline-block');
thisItem.css('display','none');
return false;
});
$('.collapse').click(function(){
var thisItem = $(this);
thisItem.parent().find('#comment2').slideUp('fast');
thisItem.css('display','none');
thisItem.parent().find('.see_all').css('display','inline-block');
return false;
})
})
</script>
JQUERY REMOVE DEFAULT VALUE TEXT UPON FOCUS - TEXTAREA
<script type="text/javascript">
$(document).ready(function(){
var Input = $('textarea[name=comment]');
var default_value = Input.val();
$(Input).focus(function() {
if($(this).val() == default_value)
{
$(this).val("");
}
}).blur(function(){
if($(this).val().length == 0)
{
$(this).val(default_value);
}
});
})
</script>
Please let me know if you need anything else, I have the damndest of time copying code and formatting it in these posts.
END EDIT
I am having a weird little problem. I have created a jquery-ajax function to transfer data from a comments section of my page. The page has an instance of this form under each user post. So this page will have X amount of posts with X amount of comments for each posts, like a social network. My ajax request sends, recieves and displays the data perfectly BUT I have two other jquery functions called on elements inside that no longer work after the ajax function returns the html. All the other ones not acted upon by the ajax function STILL WORK. I have the checked and rechecked the response html from the ajax function and it is identical to the html of a standard post-comment instance.
Please let me know what you would like to see or if you have questions.
Thanks, your help is always appreciated!
Be sure to bind the jQuery functions in such a way that the element doesn't have to exist.
$('ul').on('click', 'li', function(){ /* do something */ });
This will execute on LIs that have been added after the binding of the function.
In your case you would want to bind to the parent of the comments section and target the elements that have the click behavior.
$('.comments')
.on('click', '.see_all', function(){...})
.on('click', '.collapse', function(){...})
.on('focus', 'textarea[name=comment]', function(){...})
.on('blur', 'textarea[name=comment]', function(){...})
Try removing the $() from form.
You have this:
var form = $(this);
var div_add_comment = $(form).parent();
var div_comments = $(div_add_comment).parent();
It should be this:
var form = $(this),
div_add_comment = form.parent(),
div_comments = $(div_add_comment).parent();
Since you declared var form = $(this); you don't need to wrap form...how you have it now is the equivalent of $((form))
Not sure if this will fix your problem, but jQuery may be getting hung up on this since you are spawning children from $(this).