Ajax is switching the contents of the Data variable - javascript

I contacted the tech support about a problem with Ajax where Ajax wouldn't execute due to Access-Control-Allow-Origin problems. He fixed the issue be adding a file called .htaccess containing the code Header set Access-Control-Allow-Origin "*" . I'm saying this because I'm not entirely sure if it's relevant. The issue is that Ajax is switching the value of the Data variable from the input contents to copying the entire script and using that as the value. I have absolutely no idea why this is happening or how but after debugging a bit it seems that this is happening only within Ajax. I checked and JavaScript is correctly taking the value of the input but as it is passed through Ajax the value of the form_data variable is replaced with a copy of the script.
<script type="text/javascript">
$(document).ready(function() {
$("#my_form").submit(function(event){
//alert ("submited");
event.preventDefault("#my_form");
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
//var form_data = $('#submit_post').val(),
alert (post_url + "" + request_method + " " + form_data);
$.ajax({
type: request_method,
url: post_url,
data: form_data,
//crossDomain: true,
success: function( html ) {
alert (html);
$('#server-results').html(html);
},
});
});
});
And here is the screen shot of alert (html);
Thanks

I figured it out guys, the link in the form was the webpage itself! It was originally a second webpage but I changed it to send to itself to see what would happen when I was debugging it and forgot to change it back! For some reason that made ajax output the script of the webpage

Related

load php page from jquery ajax post unloading the current page

I need to generate a report showing in a php page which will be called by a jquery ajax call. Can any body help me on how to do this.
The jquery ajax post is as following:
$('#report_condition #Submit_rpt_betn_dates').on('click', function(){
var start_dt = $('#report_condition').find('.rpt_betn_dates').find('.start_search_date').val();
var end_dt = $('#report_condition').find('.rpt_betn_dates').find('.end_search_date').val();
alert('you want to generate report between '+start_dt+' and '+end_dt);
$.ajax({
type: "POST",
url: "./report-betn-dates.php",
data: {'startdt':start_dt, 'enddt':end_dt}, //the first parameter in the pair is actually the key for $_POST in PHP
//and it must be withing quotes for ajax to run!!
crossdomain: true,
success: function(response) {
}
});
});
I tried with $('body').html(response); within success parameter of the ajax call. But by this I cannot access the separate css file for the php page. Hence I would like to unload the page containing the ajax call and load the php page with the data sent through $_POST[].
Ajax is for partial content load, asyncronous interactions , etc.. Since what you're trying to achieve is complete new page loaded with its own static resources (css, js) this is the perfect "syncronous" scenario.
So, why wouldn't you use a simpler setup like a form which sends the required vars in post and moves the user to the correct php page?
$('#report_condition #Submit_rpt_betn_dates').on('click', function(){
var fake_form = $('<form method="post" action="report-betn-dates.php">');
var input_start = $('<input type="hidden" name="startdt">');
var input_end = $('<input type="hidden" name="enddt">');
$(fake_form).append(input_start);
$(fake_form).append(input_end):
$(fake_form).submit();
});

submit a form using ajax so that page does not reload not changing data

var eweb_ip = "<% GetSetting("ip_address"); %>";
var eweb_write = "http://" + eweb_ip + "/rokform/WriteLogixTags";
var datastring = $("#contactForm").serialize();
$('form').on('submit', function(e) {
alert("inside submit function");
e.preventDefault();
alert("prevented default");
$.ajax({
type: 'post',
url: eweb_write,
data: datastring,
dataType: "html",
success: function() {
alert('form was submitted');
},
error: function() {
alert('error handing here');
}
});
});
This is displaying the success alert box but no change is being written to the server.
Protip: use Google Chrome's (or Firefox) Network tab and select XHR to see if a request is being sent to the server and check the server's response.
In case you are using JSP:
A scriptlet (what you wrote in your code) executes the java code written between the <% %>tags. You can write some logic in there.
If you want to use the java values in your JSP, what you need is a JSP expression, which you write between the <%= %>tags. Semi-colons are forbidden in there.
For example:
<%
String eweb_ip = "192.168.1.1"; // JSP scriptlet
%>
...
<script type="text/javascript">
var eweb_ip_js = "<%= eweb_ip %>"; // JSP expression
...
</script>
So for your problem, you can try this:
var eweb_ip = "<%= GetSetting('ip_address') %>";
For more informations, go to: http://docs.oracle.com/javaee/5/tutorial/doc/bnaou.html
BUT, if your form is correctly submitted and you still don't have what you want server-side, then you'll probably have to debug your server code. Your form may not contain what you want, so something like console.log(datastring); might help you with your problem.
Also, it might be only for the example that you did that, but $('form').on('submit', will apply on each form so it could be problematic later.
Brandon,
I have been working on the same problem today and happened to stumble upon your question. I too am trying to write data via an EWEB to a PLC without submitting a form and redirecting. Assuming an XMLHttpRequest based solution works for you, I've tested this code successfully:
function EWEBWrite(tagNameInp) {
var formData = "numtags=1&t_1_slot=0&t_1_changed=1&t_1_value=1&t_1_tagname=" + tagNameInp + "&t_1_type=BOOL&t_1_display=Decimal";
var srvWrt = new XMLHttpRequest();
srvWrt.open("POST","/rokform/WriteLogixTags",false);
srvWrt.send(formData);
return
}
Keep in mind the EWEB has specific rules concerning what data type can be written to. I think at the very least they must all be atomic. If you look at the EWEB manual on the form submission method you should be able to get all the required data (type, display, etc). Let me know if you have any questions.

My Ajax Form Submission script isn't working

I've got all my form areas setup correctly and my Javascript received them. I've tested this with "alert", but for some reason, I don't know why, my form either isn't submitting or the PHP is wrong.
Here's my JavaScript:
//Main Content
var ed = tinyMCE.get('content');
var doc = document.getElementById("docid").value;
//Post Area
ed.setProgressState(1); // Show progress
$.ajax({
type: 'POST',
data: {'docid':document.getElementById("docid").value, 'content':tinyMCE.get('content').getContent()},
url: 'save.php',
success: function () {
ed.setProgressState(0);
$("#notice").fadeIn("slow").fadeOut(3000);
}
});
return false;
Here's save.php:
$id = $_POST['docid'];
$cn = $_POST['content'];
require_once("scripts/php/rq/connect.docs.php");
mysqli_query=($con, "UPDATE wordit_documents SET main_document='".$cn."' WHERE id='".$id."'");
1. ensure client is sending correct data.
Try using the inspector in Google Chrome, and activate the network tab.
Under form data you can see the data sent to the server (the picture shows the text of this answer being sent to stackoverflow to be saved as a draft.).
If not:
Make sure your script is wrapped in a jQuery.ready function.
jQuery(document).ready(function($){
// goes in here
});
Test the output of
console.log(document.getElementById("docid"));
console.log(tinyMCE.get('content'));
console.log(tinyMCE.get('content').getContent());
I Found The Problem it was because of an "=" In The mysqli_query, Thanks For Answers

Send content created by javascript in PHP mail?

I'm using a javascript shopping cart on a store, and I want to send an order confirmation on checkout. The problem is that the cart isn't saved in database of any kind, and is printed with javascript. How would I attach it to the email? I've included the shopping cart script on the page that sends the mail.
<table class="simpleCart_items"></table> would print the cart, but how would I attach the printed cart to email?
Hidden input or something?
UPDATE
My ajax call looks like this:
var data = $('#yhteystiedot').serialize();
data.cartContent = $('.simpleCart_items').html();
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "order.php",
data: data,
dataType: "text",
error: function(){ alert("Jotakin meni pahasti pieleen! Yritä uudelleen?");
},
success: function() {
$(document).html("Tilaus lähti.");
}
});
You can make an ajax call to a php function that sends an email. The argument is the content generated by javascript.
You'll need to post the cart values to serverside PHP script and recreate the HTML for the cart in order to be able to send it through email. You can do direct form post or ajax post based on your need.
I asume your $.ajax() call looks something like this:
$('form').submit(function(){
var dataTrunk = $(this).serializeArray();
dataTrunk.push( { name: 'cartContent', value: $(your_table_selector).html()});
$.ajax({
url: 'mail.php', // your mail script
data: dataTrunk,
type: 'post'
});
return false;
});
In php you would trap $_POST['cartContent'] and render it in email and send it.
If you are sending email with html and plain text body, then it would probably be a good idea to strip html elements and replace them with chars that are compatible with plain text.
// edited: I've fixed the error

POST using XMLHttpRequest with existing source

What I am trying to do only using XMLHttpRequest, is this:
The script downloads a web page, that has only one form in it.
The script inserts text into a field.
The script submits the form, while keeping all details about input tags.
I did the first part, but I have no idea how to finish with the next two steps.
Note: I do not have control over the page downloaded, and it is not well-formed XML/HTML.
Could someone explain to me how I can get this done?
This is for a Google Chrome extension, so I have all permissions needed.
EDIT: this is my current code:
$.ajax({ url: "http://www.mysite.com/my/testpage.aspx",
type: "POST",
data: {
html: http0.responseText.between("<body>", "</body>")
},
success: function(data) {
var dom = $(data),
form = dom.filter('form');
form.attr('onsubmit', 'document.getElementById("error").value = "I\'m done!"; document.getElementById("helpmebutton").disabled = false;');
form.attr('action', 'http://www.mysite.com/my/testpage.aspx');
$('#tempdiv').append(form);
form.find('input[name="ctl00$ctl00$cphSite$cphMySiteContent$linkLocation"]').val(document.getElementById("result").value);
form.submit();
}
});
I would really use jQuery to save yourself time and headaches.
Create a temporary div with id tempdiv and put everything in that div. Then, fill in appropriate elements and submit the form, like this:
$.ajax({ url: "http://...",
success: function(data) {
var dom = $(data),
form = dom.filter('form');
$('#tempdiv').append(form);
form.find('input:text').val(123);
// all input[type=text] get value 123
form.submit();
}
});

Categories

Resources