I have an Ajax call, that in the Success function, load a PartialView(html), in a container.
And I need to do "something" with a hiddenField value that it is in the loaded PartialView.
Trying $("#IdOfHiddenTextField").val() or a class selector and Jquery do not select the Html element.
How can I achieve that?
Actual code:
$.ajax({
url: '/apps/server',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (response) {
if (response.ok == "ok") {
esValido = true;
$("#divContenedorPaso2").html(response.vistaRazor);
if (response.modificoEmail) {
$("#popup-mensaje").html("Modification successfull");
$('#myModalAdvertencia').modal('show');
}
} else {
$("#divContenedorPaso2").html(response);
}
}
});
I need to do:
$.ajax({
url: '/apps/server',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (response) {
$("#divContenedorPaso2").html(response);
var submitSuccesfull = $("#IdOfHiddenTextField").val();
// this hidden element is inside de PartialView "response"
if (submitSuccesfull ) {
esValido = true;
$("#popup-mensaje").html("Modification successfull");
$('#myModalAdvertencia').modal('show');
} else {
esValido = true;
}
}
});
I don't know your code but i think you need something like this :
$.ajax({
url: "partialView.html",
success: function(response) {
var result = $(response).find("#IdOfHiddenTextField").val();
}
});
Related
I have this form that allows user to write an article also upload an image.
i use the ajax script below
$(document).ready(function() {
$("#publishArticle").on('submit', function() {
event.preventDefault();
var form = $(this);
var formData = new FormData($(this)[0]);
$.ajax({
url : "send.php",
type : "POST",
cache: false,
contentType : false,
processData: false,
data: formData,
success:function(response){
$("#result").fadeIn();
$("#result").html("");
$("#result").html(response);
$("#result").fadeOut(4000);
if (response == "Article Published") {
$("#publishArticle")[0].reset();
}
}
});
});
});
It works well. then i decided to have another button that drafts an article...
am trying to use an onclick event to differenciate between them. but it's not going through...
//Publish
$(document).ready(function() {
$("#publish").click(function(){
event.preventDefault();
var form = $(this);
var formData = new FormData($(this)[0]);
$.ajax({
url : "send.php",
type : "POST",
cache: false,
contentType : false,
processData: false,
data: formData,
success:function(response){
$("#result").fadeIn();
$("#result").html("");
$("#result").html(response);
$("#result").fadeOut(4000);
if (response == "Article Published") {
$("#publishArticle")[0].reset();
}
}
});
});
});
//Drafts
$(document).ready(function() {
$("#draft").click(function(){
event.preventDefault();
var form = $(this);
var formData = new FormData($(this)[0]);
$.ajax({
url : "draft.php",
type : "POST",
cache: false,
contentType : false,
processData: false,
data: formData,
success:function(response){
$("#result").fadeIn();
$("#result").html("");
$("#result").html(response);
$("#result").fadeOut(4000);
if (response == "Article Drafted") {
$("#publishArticle")[0].reset();
}
}
});
});
});
Please help me out...
Thanks in advance
You can attach a custom click handler to all buttons, and that way you can check which button is clicked before submitting the form:
Javascript:
$("#my-form button").click(function(event){
alert($(this).attr("value"));
event.preventDefault()// cancel form submission
if($(this).attr("value")=="button-publish"){
//do button 1 thing
var form = $(this);
var formData = new FormData($(this)[0]);
$.ajax({
url : "send.php",
type : "POST",
cache: false,
contentType : false,
processData: false,
data: formData,
success:function(response){
$("#result").fadeIn();
$("#result").html("");
$("#result").html(response);
$("#result").fadeOut(4000);
if (response == "Article Published") {
$("#publishArticle")[0].reset();
}
}
});
}
if($(this).attr("value")=="button-draft"){
//do button 2 thing
var form = $(this);
var formData = new FormData($(this)[0]);
$.ajax({
url : "draft.php",
type : "POST",
cache: false,
contentType : false,
processData: false,
data: formData,
success:function(response){
$("#result").fadeIn();
$("#result").html("");
$("#result").html(response);
$("#result").fadeOut(4000);
if (response == "Article Drafted") {
$("#publishArticle")[0].reset();
}
}
});
}
$("#my-form").submit(); // If you want to submit the form
});
I have a page where i have send form data using jquery ajax upload and in php file i am posting these values in database but it is not showing any values for big image in php files when i try to print . Please check with the my screen shot. upload image size 2mb
var formData = new FormData($('form')[0]);
formData.append('licens_certificate', licens_certificate);
$.ajax({
url: "<?php echo site_url(); ?>pro/submit_business",
type: "POST",
data:formData,
async: false,
processData : false,
contentType : false,
// fileElementId :'licens_certificate',
dataType: "json",
// contentType: 'multipart/form-data',
success: function(result){
alert()
}
});
Please check data properly append with formdata.
var formData = new FormData($('form')[0]);
formData.append('licens_certificate', licens_certificate);
$.ajax({
url: "pro/submit_business",
type: "POST",
data:formData,
async: false,
processData : false,
contentType : false,
// fileElementId :'licens_certificate',
dataType: "json",
// contentType: 'multipart/form-data',
success: function(result){
alert(result)
}
});
Edit: Here's how you convert your form to JSON:
var serializeJSON = function(formData) {
var jsonData = {};
$.each(formData, function() {
if (jsonData[this.name]) {
if (!jsonData[this.name].push) {
jsonData[this.name] = [jsonData[this.name]];
}
jsonData[this.name].push(this.value || '');
} else {
jsonData[this.name] = this.value || '';
}
});
return jsonData;
}
var formData = $("#myform").serializeArray();
var json = serializeJSON(formData);
// Add your licens_certificate data
json['licens_certificate' = 'licens_certificate';
$.ajax({
url: "<?php echo site_url(); ?>pro/submit_business",
type: "POST",
data: json,
async: false,
processData : false,
contentType : false,
dataType: "json",
success: function(result){
alert()
},
error: function(err) {
console.log(err);
}
});
Original
Have you tried to serialize your form?
var formData = $('form').serializeArray();
formData.push({licens_certificate:, 'licens_certificate'});
$.ajax({
url: "<?php echo site_url(); ?>pro/submit_business",
type: "POST",
data: formData,
async: false,
processData : false,
contentType : false,
dataType: "json",
success: function(result){
alert()
},
error: function(err) {
console.log(err);
}
});
Also, make sure you are serializing the right form, especialy if you have several in your page.
You could also simply use the $.post function
var url = "<?php echo site_url(); ?>pro/submit_business";
$.post(url, dataForm).succes(function(data) { alert(); });
How is possible to bring data from server onload data from server?
I have something like this, and it's not working:
JS:
function getItems(){
var formData = new FormData();
formData.append("ask", "MainView");
$.ajax({
type: "POST",
url: "getItems.php",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(result){
var result=trim(result);
$("#PageWrap").html(result);
}
});
}
function getItemsOnLoad(){
var formData = new FormData();
formData.append("ask", "OnLoad");
$.ajax({
type: "POST",
url: "getItemsOnload.php",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(result){
var result=trim(result);
$("#onloadInfoID").html(result);
}
});
}
PHP getItems.php:
echo <table onload="getItemsOnLoad()"><tr>some info</tr></table>;
If you're using jQuery, why you can't make it in ready?
$(document).ready(function() {
getItemsOnLoad();
});
function getItems(){
var formData = new FormData();
formData.append("menuItem", menuItem);
formData.append("ask", "MainView");
$.ajax({
type: "POST",
url: "getItems.php",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(result){
var result=trim(result);
$("#PageWrap").html(result);
}
}).done(function() {
formData.append("ask", "OnLoad");
$.ajax({
type: "POST",
url: "getItemsOnload.php",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(result){
var result=trim(result);
$("#onloadInfoID").html(result);
}
})
});
}
That was it, .done(). Change only js file.
try this on <body> tag
<body onload="getItemsOnLoad()">
I have written code to hide row for some criteria. It is working for some time, now it is not working found that jQuery.fn.jQuery.init[1] is returning jQuery.fn.jQuery.init[1] for the method .closest('tr'). Can some one suggest it why this issue is causing?
function applyfilter(ele) {
$.ajax({
cache: false,
async: true,
type: "POST",
dataType: "json",
url: "WebForm4.aspx/Calc",
data: "",
contentType: "application/json; charset=utf-8",
success: function (response) {
if (response.d > range) {
var row = $(ele).closest('tr');
var tr = $(row)[0];
$(row).remove();
return true;
}
},
});
}
I'm having an issue with IE8 (nothing new there). The error I'm getting is not making much sense as it does not occur on FF or Chrome. Here's the code:
function remComp(id, trade) {
$.ajax({
url: "functions/removePriceSurveyComparison.php",
type: "POST",
async: true,
data: "id="+id,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
loadComps(trade);
}// TODO create error handler
}
});
}
In this function it is complaining about the line where the success callback is defined. This function has not even been called yet though? But when it does get called, it works perfectly fine, although still creates new errors?
The function that is being called though is:
function loadComps(trade) {
$.ajax({
url: "functions/loadPriceSurveyComparisons.php",
type: "POST",
async: true,
data: "trade="+trade,
cache: false,
dataType: "html",
success: function(comps) {
$("#current"+trade).html(comps);
}
});
}
The second function is basically getting called 3 times when the page loads. Any advice?
Here is the complete script block as well:
function remComp(id, trade) {
$.ajax({
url: "functions/removePriceSurveyComparison.php",
type: "POST",
async: true,
data: "id="+id,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
loadComps(trade);
}// TODO create error handler
}
});
}
function addComp(trade, albId, compId) {
$.ajax({
url: "functions/addPriceSurveyComparison.php",
type: "POST",
async: true,
data: "trade="+trade+"&albId="+albId+"&compId="+compId,
cache: false,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
loadComps(trade);
}// TODO add an error handler
}
});
}
function updateComp(id, trade) {
var albId = $("select#albProd"+id).val();
var compId = $("select#compProd"+id).val();
$.ajax({
url: "functions/updatePriceSurveyComparison.php",
type: "POST",
async: true,
data: "id="+id+"&albId="+albId+"&compId="+compId,
cache: false,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
// reload table for this trade
loadComps(trade);
}// TODO create error handler
}
});
}
// function that loads all of the comparisons for a specific trade
function loadComps(trade) {
$.ajax({
url: "functions/loadPriceSurveyComparisons.php",
type: "POST",
async: true,
data: "trade="+trade,
cache: false,
dataType: "html",
success: function(comps) {
$("#current"+trade).html(comps);
}
});
}
// define document.ready function
$(document).ready(function() {
// load all of the comparisons for each trade
<?php
foreach ($trades as $trade) {
echo "loadComps(\"$trade\");\n";
?>
$("#addComp<?php echo $trade; ?>").click(function(e) {
e.preventDefault();
addComp("<?php echo $trade; ?>", $("#albProd<?php echo $trade; ?>").val(), $("#compProd<?php echo $trade; ?>").val());
});
<?php
}
?>
});
JSLint's error message "Implied Global" means that there are variables defined that are missing the "var" definition... this is especially problematic for IE8. You need to go through and add "var" to the line numbers listed (yes, there are lots).
Are you using an Asset Packager? The order of how assets are listed in your asset packager could be at fault here.