I have just started using sublimeText2 since eclipse is really slow with large projects through a VPN. I am trying to bring over some of my snippets. Most are working ok but the follow one is a ajax call that I use but won't work as a snippet. I am guess that there are characters that need to be escaped or something but I am not sure which ones
<snippet>
<content><![CDATA[
$.ajax({
type: 'get',
url: '.cfc',
data: {method:''
, var: var
, var2:var
},
dataType: 'json',
async: false,
success: function(result){
var result = jQuery.trim(result);
console.log(result);
}
}
});
]]></content>
<tabTrigger>ajax</tabTrigger>
</snippet>
Can anyone see where I have gone wrong?
Had to escape the $ with \$ and it works
<snippet>
<content><![CDATA[
\$.ajax({
type: 'get',
url: '.cfc',
data: {method:''
, var: var
, var2:var
},
dataType: 'json',
async: false,
success: function(result){
var result = jQuery.trim(result);
console.log(result);
}
}
});
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>ajax</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
Maybe the CDATA tag enclosure causes this problem? Just a guess...
Related
I've been trying to convert an HTML form into Json. When I submit the form my alert is just returning an empty array. Any help is greatly appreciated!
Here is the form
<form action="" method="post" name="myForm">
Code (xxxx-xxx):<input type="text" name="drugcode" /> <br/>
<p><input type="submit" onClick='submitform()' /></p>
</form>
And here is the javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script language ="javascript" type = "text/javascript" >
function submitform() {
var formData = JSON.stringify($("form[name*='myForm']").serializeArray());
alert(formData);
$.ajax({
type: "POST",
url: "serverUrl",
data: formData,
success: function(){},
dataType: "json",
contentType : "application/json",
processData: false
});
}
</script>
All that this is returning is:
[]
EDIT:
It now returns:
[{"name":"code","value":"1234"},{"name":"blah","value":"4321"}]
how would I would I have it return:
{"code":"1234","value":"4321"}
$("#myForm") is not going to match the form for you. # specifies an id. You need to match on the name:
$( "form[name='myForm']" )...
You can also use simple javascript and select the form using
document.querySelector("form[name='myForm']")
or
document.forms[0]
I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.
Thanks in advance.
Your jQuery.js module must be loaded before the semantic-ui accordion.js
module.
Simply put
<script src="js/accordion.js"></script>
after
<script src="js/vendor/jquery-1.11.2.min.js"><\/script>
( or whatever your jQuery version is ... )
and initialize the accordion in the html document inside a script tag as :
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
It happens on nested accordions while you script is under $( document ).ready(function()
So try to call accordion function in an ajax callback like this;
$('input[name=sampleInput]').on('input', function() {
var val = $("input[name=sampleInput]").val();
if (val.length >= 3)
{
$.ajax( {
url: 'sample_handler.php',
type: 'GET',
data: {
data: data
},
dataType: 'html',
success: function ( response ) {
$('.ui.accordion').accordion({});
}
})
}
})
For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.
In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).
<script type="text/javascript">
$(document).ready(function() {
window.onload = function(){
$('.ui.accordion').accordion();
};
});
</script>
I've created a simple web service using asp.net and hosted on my machine's IIS server. I am trying to call this web service from plain html page without using Asp.net. The problem is that I am not getting response. Here is my code below :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calling Classic Web Services with jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a#SayHello").click(function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
data: '{firstName:10,lastName:15}',
// url: 'Service.asmx/SayHello',
url: 'http://192.168.1.20/MyService/Service.asmx/SayHello',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(response) {
alert(response.d); //getting the Response from JSON
},
failure: function(msg) {
alert(msg);
}
});
});
});
</script>
</head>
<body>
<input id="name" /><a id="SayHello" href="#">Greetings!</a>
</body>
</html>
Can anybody please help me where I am going wrong in this code..?? If I run this in ASP.Net environment, it works perfectly. But if I host this, then it doesn't work. Please help me...!!
Are you sure the web service is responding in JSON format? It usually answers in XML. Also your <script> block should go in the <body> and not in the <head>.
if you have hosted the web service on the same IIS, then change 192.168.1.20 to localhost and then try..
New to ajax and sorry for asking such a basic question. I am using ajax:
to submit a form (written in python)
to conduct some calculation and generate output page, and
to redirect the browser to the output page
Currently, Steps 1 and 2 are done, but when the browser tries to redirect, I got a 405 error. I appreciate any suggestions.
HTML form
<form method="post" id="form1">File to upload:
<input type="file" id="upfile1" name="upfile" class="required input_button" accept=".csv" />
<input class="submit_button" type="button" value="Submit" />Upload the file!
</form>
JS code
$('.submit_button').click(function () {
var form_data = new FormData();
$.each($('input[name^="upfile"]')[0].files, function (i, file) {
form_data.append('file-' + i, file);
});
$.ajax({
type: "post",
url: "/geneec_batchoutput.html", ///////NOTE 1/////////
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function () {
window.location = '/geneec_batchoutput.html'; ///////NOTE 2/////////
},
error: function (data) {
console.log('error');
}
});
});
NOTE 1
Form firebug, I can tell the calculations have been finished and the output page is generated.
NOTE 2
Here is the place I got 405 error. So my guess is ajax did not redirect the browser to the "correct" output page, instead it let the browser go to a generic one. So without data support, I got 405 error.
So it seems like my question is how to redirect the browser to the output page generated in ###note 1 at location ###note 2.
update
I have attached a "working" scenario, but this is not the real ajax approach, since I use .submit() to send the form.
html form
<form method="post" id="form1" enctype="multipart/form-data" action=geneec_batchoutput.html>File to upload:
<input type="file" id="upfile1" name="upfile" class="required input_button" accept=".csv" />
<input class="submit_button" type="submit" value="Submit" />Upload the file!
</form>
JS code
form.submit();
$.ajax({
type: "post",
url: "/geneec_batchoutput.html",
success: function () {
window.location = '/geneec_batchoutput.html';
}
});
Update 2
I tried to check the content of url by posting it to the console. It looks like the url has everything I need, which is the output page. So temporally I use $("body").html(url); to replace current page content. But the url is still the /geneec_batchinput.html. Is there a way to update the url as well?
$.ajax({
type: "post",
url: "/geneec_batchoutput.html",
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function(url) {
console.log(url)
$("body").html(url);
},
error: function(data) {
alert('error')
}
});
Thanks!
It looks like the location redirect is getting called as a POST request because it's inside the submit action. Try tweaking your submit handler like so:
$('.submit_button').click(function (event) {
event.preventDefault();
// carry on...
so that you can use event.preventDefault to avoid needing to return something from the submit event.
Update:
This may be it. Using your original code:
$('.submit_button').click(function (event) {
event.preventDefault();
// .. blah blah ..
$.ajax({
type: "post",
url: "/geneec_batchoutput.html", ///////NOTE 1/////////
// .. blah blah ..
success: function () {
window.location = '/geneec_batchoutput.html'; ///////NOTE 2/////////
},
error: function (data) {
console.log('error');
}
});
retun false;
});
Because it's asynchronous, the outer event handler is ending before the location change is issued in the success callback function. I thought the preventDefault would avoid the need to return false, but other similar questions suggest not.
I am trying to send an http DELETE method to a URI. After realizing that I cannot do this with plain old html forms, I was told to use jQuery.ajax. I found a few posts on it and this is the code I found that will supposedly do it:
<script type="text/javascript">
$.ajax({
url: '/groups/dissolve/$org_ID',
type: 'DELETE',
success: function(result) {
// Do something with the result
}
});
</script>
Please bear with me as I have not used jQuery before. What I am trying to do is replace my html form with this code above but I don't know where to start. How do I place a button in there as I would in a regular form? Thanks and please forgive my ignorance!
Something like:
$("form").on("submit", function() {
$.ajax({
url: '/groups/dissolve/$org_ID',
type: 'DELETE',
success: function(result) {
// Do something with the result
}
});
});
This will bind the AJAX method to the submit action of your form.
Another option is to use method override. This allows you to specify the method (GET, POST, PUT, DELETE) in a query string parameter or a hidden field in your form. You will need to check with your specific language and web framework, but most support this in some variation.
<input type="hidden" name="_method" value="DELETE" />