SmashAndGrab
asked on
Jquery question
Hi,
I am hoping someone can help me with an issue I am having whilst using Jquery and Classic ASP.
This code works perfectly..
<script type="text/javascript">
$(document).ready(function
$('ul.sf-menu').sooperfish
});
</script>
BUT as soon as I add in the code for my ajax form submit it does not work..
<script type="text/javascript">
$(document).ready(function
$('#submitButton').click(f
$.ajax({
type: "POST",
url: "test.asp",
data: $("#form1").serialize(),
cache: false,
dataType: "html",
success: function(responseText){
alert(responseText);
},
error: function(resposeText){
alert(resposeText);
},
});
return false;
});
$('ul.sf-menu').sooperfish
});
I am hoping someone can help me with an issue I am having whilst using Jquery and Classic ASP.
This code works perfectly..
<script type="text/javascript">
$(document).ready(function
$('ul.sf-menu').sooperfish
});
</script>
BUT as soon as I add in the code for my ajax form submit it does not work..
<script type="text/javascript">
$(document).ready(function
$('#submitButton').click(f
$.ajax({
type: "POST",
url: "test.asp",
data: $("#form1").serialize(),
cache: false,
dataType: "html",
success: function(responseText){
alert(responseText);
},
error: function(resposeText){
alert(resposeText);
},
});
return false;
});
$('ul.sf-menu').sooperfish
});
Have you checked your console for errors?
Unless there is a direct relationship between what the AJAX does and what sooperfish does then there should be no problem with this code.
Do you have a link we can look at?
Some notes on your code
You can replace
return false works but better to capture the event parameter and use preventDefault - that way you don't have to worry about different execution paths potentially bypassing the return false
success has been deprecated in favour of the promise functions .done() (jQuery 1.5+) and then() (jQuery 1.8+)
Unless there is a direct relationship between what the AJAX does and what sooperfish does then there should be no problem with this code.
Do you have a link we can look at?
Some notes on your code
You can replace
$(document).ready(function()$(function()$(this.form).serialize()return false works but better to capture the event parameter and use preventDefault - that way you don't have to worry about different execution paths potentially bypassing the return false
$('#submitButton').click(function(e) {
e.preventDefault();success has been deprecated in favour of the promise functions .done() (jQuery 1.5+) and then() (jQuery 1.8+)
ASKER
Thanks for the comments.
Sorry - I should have been clearer.
1. As soon as I add the ajax code - the sooperfish does not take effect (the menu at the top of the page).
2. The Ajax form does not submit.
I will check the console.
@Julien - I don't really understand what you mean, are you suggesting I change the code to this:
Where should the other items that you mentioned go?
Thanks
Sorry - I should have been clearer.
1. As soon as I add the ajax code - the sooperfish does not take effect (the menu at the top of the page).
2. The Ajax form does not submit.
I will check the console.
@Julien - I don't really understand what you mean, are you suggesting I change the code to this:
$(function(){
$('#submitButton').click(function() {
$.ajax({
type: "POST",
url: "AddPageUpdate.asp",
data: $("#newAdForm").serialize(),
cache: false,
dataType: "html",
success: function(responseText){
alert(responseText);
},
error: function(resposeText){
alert(resposeText);
},
});
return false;
});Where should the other items that you mentioned go?
Thanks
ASKER
console results:
ASKER
it looks as if there is some issue with the ajax query code
ASKER
ok I found the issue.
It was a comma in the incorrect place.
Here is corrected code:
$(function() {
$('ul.sf-menu').sooperfish
$('#submitButton').click(f
e.preventDefault();
$.ajax({
type: "POST",
url: "AddPageUpdate.asp",
data: $(this.form).serialize(),
cache: false,
dataType: "html",
success: function(responseText){
alert(" It was successful: "+responseText);
},
error: function(responseText){
alert(" It failed: "+responseText);
}
});
return false;
});
});
However, the ajax call fails...
It was a comma in the incorrect place.
Here is corrected code:
$(function() {
$('ul.sf-menu').sooperfish
$('#submitButton').click(f
e.preventDefault();
$.ajax({
type: "POST",
url: "AddPageUpdate.asp",
data: $(this.form).serialize(),
cache: false,
dataType: "html",
success: function(responseText){
alert(" It was successful: "+responseText);
},
error: function(responseText){
alert(" It failed: "+responseText);
}
});
return false;
});
});
However, the ajax call fails...
ASKER
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
To check the AJAX
1. Open the site in Firefox or Chrome
2. Open the Console
3. Load the page
4. Look for the Request appearing in the console - in FireFox it will be in the console tab with the Net option selected
Chrome in the Network tab
5. Open the URL Response tab and look for errors there.
What the error is saying is not the AJAX call failed - it worked it just went to a resource that does not exist.
1. Open the site in Firefox or Chrome
2. Open the Console
3. Load the page
4. Look for the Request appearing in the console - in FireFox it will be in the console tab with the Net option selected
Chrome in the Network tab
5. Open the URL Response tab and look for errors there.
What the error is saying is not the AJAX call failed - it worked it just went to a resource that does not exist.
ASKER
Sorry - I am talking bollocks! :)
Here is my latest code:
Here's the console results:
Here is my latest code:
<script type="text/javascript">
$(function() {
// ADD EVENT PARAMETER TO EVENT HANDELER AND ...
$('#submitButton').click(function(e) {
// INVOKE event.preventDefault()
e.preventDefault();
$.ajax({
type: "POST",
url: "pages/add/AddPageUpdate.asp",
// USE form PROPERTY ON BUTTON TO GET ACCESS TO FORM
data: $(this.form).serialize(),
cache: false,
dataType: "html"
})
// INSTEAD OF success AND error
.done(function(responseText) {
alert(responseText);
})
.fail(function() {
alert("Error");
});
return false;
});
$('ul.sf-menu').sooperfish();
});
</script>Here's the console results:
What version of jQuery are you using?
if < 1.5 you should consider updating it.
if < 1.5 you should consider updating it.
ASKER
I found a serverside error:
That does not solve the $.ajax( ).done is not a function though - you need to check your jQuery version. If you are bound to the version you are using then you will need to go back to using success - but I would ask why you are bound to a version < 1.5
the error you are getting is due to the fact that you're trying to read binary data after establishing the object collection. in other words, you cannot use Request.Form/QueryString AFTER you initialize the object to read the binary data.
I'm assuming you're using aspUpload for image file uploads, so you're code would look something like:
if you use a Request.Form statement AFTER the first line above, you'll get the error. Change those references to objUpload.Form("xxx") and the error should be resolved.
I'm assuming you're using aspUpload for image file uploads, so you're code would look something like:
objUpload = Server.CreateObject("Persits.Upload.1")
someFormValue = objUpload.Form("someValue")
.....if you use a Request.Form statement AFTER the first line above, you'll get the error. Change those references to objUpload.Form("xxx") and the error should be resolved.
ASKER
@Big Monty - I am going to raise a new question for this. - I will send you a link once it is open :)
ASKER
@BigMonty - see new question here:
https://www.experts-exchange.com/questions/29027455/Classic-ASP-upload-error.html
https://www.experts-exchange.com/questions/29027455/Classic-ASP-upload-error.html
maybe check your javascript console and see if there's an error there.