I am stuck while passing the input values to same page for that i used Ajax but it is not happening and here my ajax function not working and i think its all because of URL given in the below code.
Just tell me, what should I insert in url section so that I can pass the values on the same page.
Please suggest your thoughts on the same.
$(document).on('submit', '#saveForm', function()
{
var data = $(this).serialize();
$.ajax({
type : 'POST',
url : 'index.php',
data : data,
success : function(data)
{
$("#saveForm").fadeOut(500).hide(function()
{
$(".result").fadeIn(500).show(function()
{
$("#demo").html(data);
});
});
}
});
return false;
});
Related
I have a voting function which submits a user vote using AJAX and updates the DB without having to refresh the page. All good so far. But I also want to retrive the updated values from the DB and update this on the page.
I've nested a second AJAX request inside my first request. This second request calls on the file new_values.php which gets the latest values and puts them into an array and returns as JSON like below
$new_vals = array(
'new_total' => $new_total,
'poll_option_1_val' => $poll_option_1_val,
'poll_option_2_val' => $poll_option_2_val,
);
echo json_encode($new_vals);
Below is the Ajax request - the first request works just fine to update the DB but the inner AJAX request isn't working. In the below example I try to use alert to show new_total value but nothing happens
$(function () { // SUBMIT FORM WITH AJAX
$('#poll-form').on('submit', function (e) { //on form submit
e.preventDefault(); // prevent default behaviour
if($("form")[0].checkValidity()) { // check if the form has been validated
$.ajax({ // submit process
type: 'post',
url: 'vote-process.php',
data: $('form').serialize(),
success: function () {
$('#vote_submitted').modal('show');
$("input").attr("disabled", "disabled");
$("textarea").attr("disabled", "disabled");
$("#vote_button").attr("disabled", "disabled");
$("#vote_button").text("Vote submitted");
$.ajax({
url : 'new_values.php',
type : 'POST',
data : data,
dataType : 'json',
success : function (result) {
alert(result['new_total']);
},
error : function () {
alert("error");
}
});
},
error: function() {
$('#error').modal('show');
}
});
return false;
} else { // if the form is not valid
console.log("invalid form");
}
});
});
This has been driving me crazy. Any help would be very much appreciated!
Second Ajax data:data will give you this issue need to pass proper parameter
$.ajax({
url : 'new_values.php',
type : 'POST',
data : {data_return:'yes'},
dataType : 'json',
success : function (result) {
alert(result['new_total']);
},
error : function () {
alert("error");
}
});
What is data in the second ajax request ? data : data ? data is not defined so javascript maybe stop to execute entire code especially if use 'use strict'
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've tried to go to php file using jquery.
Here is my code.
This is index.php
$.post('test.php',data,function(json){},'json');
This is test.php
//set session variable from passed data
$_SESSION['data1'] = $_POST['data1'];
<script>
window.open('test1.php','_blank');
</script>
This is test1.php
echo $_SESSION['data1'];
But this code is not working.
I want to pass data from index.php to test1.php.
How can I do this? I don't want to use GET method because of too long url.
Anyhelp would be appreciate.
I am not quite clear from you explanation right now. But I am here trying to resolve you problem as you can use the jquery post method as follows :
$.post('test1.php',{param1:value1,param2=value2,...},function(data){
//Here you can take action as per data return from the page or can add simple action like redirecting or other
});
Here is a simple example of register :
$.post('', $("#register_form").serialize(), function(data) {
if (data === '1') {
bootbox.alert("You have registered successfully.", function() {
document.location.href = base_url + '';
});
} else if (data === '0') {
bootbox.alert("Error submitting records");
} else {
bootbox.alert(data);
}
$("#user_register_button").button("reset");
});
Try this:
$.ajax({
url: 'test.php',
type: 'POST',
data: {
myData : 'somevalue'
},
success: function(response){ // response from test.php
// do your stuff here
}
});
test.php
$myData = $_REQUEST['myData'];
// do your stuff here
I like use jQuery post a url like this.
$('form').on('submit', function(e) {
e.preventDefault();
var $this = $(this);
$.ajax({
url: $this.attr('action'),
method: $this.attr('method'),
data: $this.serializeArray(),
success: function(response) {
console.log(response);
}
})
});
I you a beginner, you can reference this project
php-and-jQuery-messageBoard
Myproblem is when I click my first selectbox, after there is a value, it will trigger the second selectbox. I implement it in Ajax, but successfully render ,but my other textfield value is gone. How could I just render a specific part of the responde html(success ajax call)?
$(document).ready(function(){
if ($('#product_category').val() == 'Choose Category')
document.getElementById('product_subcategory').disabled = true;
$('#product_category').change(function () {
if ($('#product_category').val() == 'Choose Category')
document.getElementById('product_subcategory').disabled = true;
else
document.getElementById('product_subcategory').disabled = false;
data = $('#product_category').val();
//alert(data);
var param = 'category_name=' + data;
$.ajax({
url: MYURL,
data: param,
success: function(result) {
alert('Choose product subcategory');
alert(param);
$('body').html('');
$('body').html(result);
}
});
// window.location = MYURL?category_name="+data;
});
$('#product_subcategory').change(function () {
data = $('#product_subcategory').val();
// paramCategory = $(document).getUrlParam('category_name');
// alert(paramCategory);
$.get(MYURL, function(data){
alert("Data Loaded: " + data);
});
//window.location = MYURL?subcategory_name=" + data;
});
});
in my form, i use $_GET['category_name'] to get my value Ajax return value. I Debug in firebug, and it is successfully. I tried to render again the html, but my previous textarea's value and textfiel's value is gone since what i did is $('body').html(''); $('body').html(result);, So,how could I manage to get the success ajax return value, and use it in the PHP.
any confusion ,please tell me...
Thank you for spending ur time.
Hmm, I'm using a div and show the Div when it was return success ajax call.
the problem is here,
$('body').html('');
$('body').html(result);
you are blanking whole body and inserting new result. You have to change it to just
$('#second_select_box_id').html(result);
$('body').html('');
$('body').html(result);
This is emptying your page and inserting in it your result, I supose that what you really want to do is to load your second dropdown with the result, for that you'll need to do
$("#product_subcategory").html(result);
Of course, this will depend on what are your ajax function returning on result
You have two ways to do it.
Add the text from PhP while returning the data for Ajax call
Add the data back to the text box after loading the page..
data = $('#product_category').val();
//alert(data);
var param = 'category_name=' + data;
$.ajax({
url: MYURL,
data: param,
success: function(result) {
alert('Choose product subcategory');
alert(param);
$('body').html('');
$('body').html(result);
$('#product_category').val(data);
}
});
can you please try this
$(body).html('');
$(body).html(result);
Here a sample use case:
I request a simple form via an ajax request. I want to submit the result to the same page that I requested. Is there a way to access the URL of that request in the resulting request's javascript?
Below is some code that accomplishes what I want via javascript AND PHP. The downside to this is that I have to include my javascript in the same file as myajaxform.php. I'd rather separate it, so I can minify, have it cached etc.
I can't use location.href, b/c it refers to the window's location not the latest request.
frm.submit(function () {
if (frm.validate()) {
var data = frm.serialize();
jQuery.ajax({
url : '<?= $_SERVER['PHP_SELF'] ?>',
type : 'POST',
data : data,
dataType: "html",
success : function (data) {
}
});
}
return false;
});
If there's not a way to access it via javascript directly, how would you solve this problem so that the javascript can go in it's own file? I guess that I could in the original ajax request's success handler, create some sort of reference to the URL. Thoughts? Maybe something using the jQuery data method?
You can store the url to submit to in the action attribute of the form, and then set the url to frm.action:
jQuery.ajax({
url : frm.action,
type : 'POST',
data : data,
dataType: "html",
success : function (data) {
}
});
Forgive me if I totally misinterpret your question, as I find it somewhat confusing. What about
frm.submit(function () {
if (frm.validate()) {
var data = frm.serialize();
jQuery.ajax({
url : window.location.href,
type : 'POST',
data : data,
dataType: "html",
success : function (data) {
}
});
}
return false;
});