I'm using bootstrap-wysihtml5 editor. On my web its working good. But when I send data from it to php using jquery it send some extra data. For example:
When I send this:
product two
It send the followings:
product+two%3Cbr%3E
My Bootstrap wysihtml5 configuration is here:
$('#form').wysihtml5({
image: false
});
And my jquery ajax code is here:
$.ajax({
url: "index.php",
type: 'POST',
dataType: 'html',
data: {
contentEdit: $('#form').serialize()
},
success: function(data) {
alert('something ...');
}
});
What is the procedure to avoid that?
actually the problem was that I have used multiple form in one page. Otherwise it works within a framework that means when we integrate the Bootstrap wysihtml5, it's embedded through an iframe. Ultimately I have solved the problem by using ckeditor. It is more flexible and easy to use. To easily use it you can follow its API documentation. Thanks to all.
Related
I have a Python script, which does some computations and makes a figure. Then, I am using mpld3 to generate an HTML version of this figure and save it (e.g., figure.html). The Python computations are launched via the AJAX request to the HTTP server. In my JS file, I use the jQuery.load() method to insert the plot into HTML:
$("#includedContent").load('/figure.html');
In this way, everything seems to work fine. The question is can I do the same thing without saving the figures? I tried to return a figure as a response, here is my modified AJAX request:
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "/main.py",
data: JSON.stringify({ 'sim_dur': input }),
success: function (response) {
figure = response.figure;
var child = document.createElement('div');
child.innerHTML = figure;
child = child.firstChild;
document.getElementById('includedContent').appendChild(child);
}
});
If I assign an HTML-like string to child.innerHTML, the code works correctly. But when I try to assign it a figure (which has a string type as well), it is not showing on the HTML page. I'm new to JS, so I apologize if it is something basic. I did some research and it seems that people usually save the results in other answers, so maybe it is a common way to do it and what I am trying to do is not right.
In my experience, mlpd3 will only work when the client (browser) is loading the page. Once the page is loaded, updating or creating an mpld3 figure using an ajax call won't create the figure for you. I personally struggled with that for some time and then gave up. I am sure one can patch things up but then you'll be stuck to your own mpld3 patched version
Does anyone know how to upload a file in a vuejs app and pass it to a php page using jquery's ajax function. Please for the love of all thats holy I need some help with this. I essentially want to do this but run it in a vuejs method. (the following script works outside of the method and the post and files array is set. but when placed in a method it no longer works. In other words the
$_FILES and $_POST array is not set) I would prefer to do this without axios or any other external libery other than jquery if possible. Does anyone know if you can even do this in vuejs?
$(document).ready(function(){
$('#addTemplateForm').on('submit', function(e){
e.preventDefault();
app.sub=true;
if(app.name!='' && app.thumbnailName!='' && app.renderTime!=''
&& app.textFieldCount!='' && app.selectedCategories.length!=0 && app.selectedKeywords.length!=0)
$.ajax({
url:'addTemplateBackend.php',
type:'POST',
dataType: 'json',
data: new FormData(this),
contentType: false,
processData: false,
error: function(data){
alert('error');
},
success: function(data){
alert('success');
console.log(data);
}
})
});
});
Please describe the error you are having. You can check your console and also use the Vue tool plugin extension for browsers so as to help you with trouble shooting.
PS: This was a mistake. Meant to be a comment not an answer
I apologize if this question seems basic as I am new to both stackoverflow and javascript in general.
My goal here is to store the user's dropdown menu selection as well as some other user inputs into variables, then I want to post the json file that contains the variables into a specific route where my serve-side javascript can read from. I have the variable part and user selection part covered, however, I am having trouble posting the variables to the specified route.
So in my app.js file in my ember framework, I tried the below code to test out if I can post {12345} to address:port/api/iwantmyjsonhere/ but when I run it and go to that specific page (address:port/api/iwantmyjsonhere/), it says cannot GET.
$(document).ready(function() {
$.ajax({ url : "/api/iwantmyjsonhere/",
type: 'POST',
dataType : "json",
data: "12345"
});
});
I understand that this question is lower level, so if you guys are too busy to answer, point me to any resources that might help me would be greatly appreciated too! Thanks in advance!
I guess this is not related to ember anywhere.
You are just using jQuery for ajax call and as per jQuery standards "Data" Object must be Key/Value pairs.
Means you should do something like -
$(document).ready(function() {
$.ajax({ url : "/api/iwantmyjsonhere/",
type: 'POST',
dataType : "json",
data: {id:"12345"}
});
});
You can read more on this one at -
http://api.jquery.com/jquery.ajax/
And if you want to implement it in ember way the you can use something like -
return Ember.$.ajax({
url: '/api',
method: 'POST',
dataType: 'json',
data: {//key value pairs}
}).then(function(result){
//After ajax is successful.
}
I have been working on an ASP.NET MVC 5 web application which includes a view that contains a Raphael javascript image that is using AJAX calls to controller method to get some data on the initial render. When I render the page locally on my own machine, everything executes as expected and the page loads fine. However, when I 'Publish' the application to a test server, the AJAX call hits the 'Error' function every time I try to load the page.
After some research I was able to resolve some of the javascript errors by adding this tag to the layout page:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
However, it still does not work any time I try to use Ajax to make a call to a controller method. When I take a look at the issue with firebug i see the error that is being thrown is "Boostrap requires JQuery". I have searched the error and have ensured that the script tags are in the correct order- JQuery is being called before Boostrap:
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/boostrap.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/raphael.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/update.js")"></script>
I have also checked the permissions on the files and they both have the same, correct privs which has left me stuck. These controller calls work exactly as expected when I run the application locally on my machine, but error once I have published the application to a server.
I am not sure what else could be causing this issue. Any and all advice would be greatly appreciated!!!
Below is one of the JQuery call to the controller method:
function GetESN(area, ID) {
$.ajax({
url: "/Home/GetESN",
type: 'POST',
async: false,
dataType: 'json',
cache: false,
data: { area: area, ID: ID },
success: function (data) {
esn = data
},
error: function () {
alert('error occurred');
}
});
}
Please let me know if there any more information that is required.
UPDATE
The issue actually fell in the way the site was named- it needed to be formatted as "http://projectname.com/location". I ended up having to split the pathname to account for the "/location" bit and built the URL right at the beginning of the script. Probably not an ideal situation but it works well for my situation.
It is possible that your
"url: "/Home/GetESN",
is an incorrect url when on the web server than on your local.
Try adding
<script>
rootUrl = '#Url.Content("~")'
</script>
to _Layout.cshtml
Then update your js file so you use the rootUrl
function GetESN(area, ID) {
$.ajax({
url: rootUrl + "Home/GetESN", // or url: rootUrl + "/Home/GetESN"
type: 'POST',
async: false,
dataType: 'json',
cache: false,
data: { area: area, ID: ID },
success: function (data) {
esn = data
},
error: function () {
alert('error occurred');
}
});
There are 2 ways where you can achieve this.
Option 1
change the url as follows in your ajax call,
url: #Url.Action("GetESN", "Home")
Option 2
This is the best option if you want to avoid razor tag helpers.
Right click on the project and select "Properties".
In the properties, select the link called "Web".
In the "Web" link find "Project Url" field.
In the "Project Url", set a name to the project as following example.
Example:- http://localhost:1851/TestApp/
Once setting a project name, select "Create Virtual Directory".
In your ajax call, set the url as follows.
Example:- url: "TestApp/Home/GetESN"
Finally make sure to publish the project as the same name. Example:- TestApp
I am trying to upload a file through AJAX. I have searched over a lot but found examples using form submit only, but I can not use form submit. I have tried several examples but nothing reaches my server. When I tried this link, it worked but again it was through a form submission.
Here is the piece of code relevant to the context
JS Code
function _upload(filedata) {
$.ajax({
url: './myURI',
data: filedata,
type: 'POST',
contentType: 'multipart/form-data',
mimeType: 'multipart/form-data', //Property added in 1.5.1
success: function (data) {
alert(data);
}
});
}
$("#cpc-uploadBtn").click(function (evt) {
var data;
data = new FormData();
data.append('file', $('#cpc-upload')[0].files[0]);
_upload(data);
});
HTML Part
<input id="cpc-upload" name="file" type="file" />
<button id="cpc-uploadBtn" type="button">Upload</button>
Edit
Is there any other way to do this without using form submit and formdata?
Assuming that you are using Safari/FireFox (only those support FormData), you need to modify your $.ajax call:
$.ajax({
url: './myURI',
data: filedata,
type: 'POST',
contentType: false,
processData: false,
success: function (data) {
alert(data);
}
});
Seeting contentType option to false will force jQuery not to add a Content-Type header for you (otherwise the boundary string will be missing from it). Also the processData flag must be set to false so jQuery will not try to convert your FormData into a string.
Now if you know that your clients are using HTML5 you should try using new JavaScript File API - check following articles:
Working with files in JavaScript, Part 1: The Basics
Working with files in JavaScript, Part 2: FileReader
Working with files in JavaScript, Part 3: Progress events and errors
Working with files in JavaScript, Part 4: Object URLs
Working with files in JavaScript, Part 5: Blobs
In all other cases you are forced to use custom plugins, for example:
Uploadify
jQuery Form Plugin
I suppose currently FormData objects are only supported in Safari/Firefox, it has not been adopted by most of the browsers yet.
I recently struggled a lot finding ajax file uploader for asp.net and I am currently using this one in my project:
https://github.com/valums/file-uploader
there is a small alternative if you want to use
<script>
// wait for the DOM to be loaded
$(document).ready(function()
{
// bind 'myForm' and provide a simple callback function
$("#tempForm").ajaxForm({
url:'../calling action or servlet',
type:'post',
beforeSend:function()
{
alert("perform action before making the ajax call like showing soinner image");
},
success:function(e){
alert("data is"+e);
alert("now do whatever you want with the data");
}
});
});
</script>
you can find the plugin here