This problem has been a thorn in my side for a month now. If anyone can figure it out, I'd be very, very, very thankful.
This works in Chrome but not FF.
Earlier I thought this was a problem just with PUT, but in fact even console.log in this binding is not firing.
You can see the previous discussion here:
Why does this jQuery AJAX PUT work in Chrome but not FF
Here's a good deal of the surrounding HTML:
<div id="createTeamModal" class="small reveal-modal">
<form id="createTeamForm">
<div class="row"><p id="teamFlavorText" class="lead">Building a new team</p></div>
<div class="row">
<div class="small-4 large-4 columns"><label>Team Name:</label></div>
<div class="small-6 large-6 columns"><input name="teamName" id="teamName" type="text" size="20"/></div>
</div>
<div class="row"><p class="lead">Does this team work for a business?</p></div>
<div class="row">
<div class="small-4 large-4 columns"><label>Business Size:</label></div>
<div class="small-6 large-6 columns">
<select id="businessSizeSelect" name="businessSizeSelect">
<%
Info[] sizes = is.getList("business_sizes");
for (Info size : sizes) {
out.print("<option value=\"" + size.getId() + "\">" + size.getDescription() + "</option>");
}
%>
</select>
</div>
</div>
<div id="businessLocationDiv" class="row" style="display: none; margin-top: 20px;">
<div class="small-4 large-4 columns"><label>Business Location:</label></div>
<div class="small-6 large-6 columns">
<select id="businessLocationSelect" name="businessLocationSelect">
<%
Info[] locations = is.getList("business_locations");
for (Info location : locations) {
out.print("<option value=\"" + location.getId() + "\">" + location.getDescription() + "</option>");
}
%>
</select>
</div>
</div>
<div id="businessTypeDiv" class="row" style="display: none; margin-top: 20px;">
<div class="small-4 large-4 columns"><label>Industry:</label></div>
<div class="small-6 large-6 columns">
<select id="businessTypeSelect" name="businessTypeSelect">
<%
Info[] types = is.getList("business_types");
for (Info type : types) {
out.print("<option value=\"" + type.getId() + "\">" + type.getDescription() + "</option>");
}
%>
</select>
</div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="large-offset-10 small-1 large-1 columns">
<button id="createTeamButton" class="small button">Create</button>
</div>
</div>
</form>
<a class="close-reveal-modal">×</a>
</div>
Here's the javascript. This is nested within document.ready().
$("#createTeamButton").click(function () {
console.log("here");
window.alert("here");
var teamObject = new Team();
teamObject.description = $("#teamName").val();
teamObject.businessSize = $("#businessSizeSelect").val();
teamObject.businessType = $("#businessTypeSelect").val();
teamObject.businessLocation = $("#businessLocationSelect").val();
console.log("There");
$.ajax({
type: "PUT",
url: "/ajax/rest/team",
dataType: "json",
data: JSON.stringify(teamObject),
success: function () {
// Reload the team select box
loadTeamSelectBox();
// Pop up the site create modal
$('#createSiteModal').foundation('reveal', 'open');
},
error: ajaxErrorHandler
});
});
Here is the Team object:
function Team() {
var id=0, description='', businessSize=0, businessType=0, businessLocation=0, invite="";
}
If I fill in the team fields and then run the createTeamButton.click() event in the console, then a PUT request is recorded in the console, but it is red and I do not see it in Fiddler. These are the request headers:
Accept application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Length 88
Content-Type application/x-www-form-urlencoded; charset=UTF-8
Cookie JSESSIONID=-zZ0ZF6QtojQEfKoN2vLuFjx.undefined
Host 127.0.0.1:8080
Referer http://127.0.0.1:8080/do/controlpanel?teamName=Team+Four&businessSizeSelect=2&businessLocationSelect=1&businessTypeSelect=1
User-Agent Mozilla/5.0 (Windows NT 6.2; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0
X-Requested-With XMLHttpRequest
I do, however, see the referer in Fiddler as a GET request:
GET http://127.0.0.1:8080/do/controlpanel?teamName=Team+Four&businessSizeSelect=1&businessLocationSelect=1&businessTypeSelect=1 HTTP/1.1
Host: 127.0.0.1:8080
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://127.0.0.1:8080/do/controlpanel?teamName=Team+Four&businessSizeSelect=1&businessLocationSelect=1&businessTypeSelect=1
Cookie: JSESSIONID=-zZ0ZF6QtojQEfKoN2vLuFjx.undefined
Connection: keep-alive
I'm using jQuery 2.0.0
This problem has been a thorn in my side for a month now. If anyone can figure it out, I'd be very, very, very thankful.
This works in Chrome but not FF.
Earlier I thought this was a problem just with PUT, but in fact even console.log in this binding is not firing.
You can see the previous discussion here:
Why does this jQuery AJAX PUT work in Chrome but not FF
Here's a good deal of the surrounding HTML:
<div id="createTeamModal" class="small reveal-modal">
<form id="createTeamForm">
<div class="row"><p id="teamFlavorText" class="lead">Building a new team</p></div>
<div class="row">
<div class="small-4 large-4 columns"><label>Team Name:</label></div>
<div class="small-6 large-6 columns"><input name="teamName" id="teamName" type="text" size="20"/></div>
</div>
<div class="row"><p class="lead">Does this team work for a business?</p></div>
<div class="row">
<div class="small-4 large-4 columns"><label>Business Size:</label></div>
<div class="small-6 large-6 columns">
<select id="businessSizeSelect" name="businessSizeSelect">
<%
Info[] sizes = is.getList("business_sizes");
for (Info size : sizes) {
out.print("<option value=\"" + size.getId() + "\">" + size.getDescription() + "</option>");
}
%>
</select>
</div>
</div>
<div id="businessLocationDiv" class="row" style="display: none; margin-top: 20px;">
<div class="small-4 large-4 columns"><label>Business Location:</label></div>
<div class="small-6 large-6 columns">
<select id="businessLocationSelect" name="businessLocationSelect">
<%
Info[] locations = is.getList("business_locations");
for (Info location : locations) {
out.print("<option value=\"" + location.getId() + "\">" + location.getDescription() + "</option>");
}
%>
</select>
</div>
</div>
<div id="businessTypeDiv" class="row" style="display: none; margin-top: 20px;">
<div class="small-4 large-4 columns"><label>Industry:</label></div>
<div class="small-6 large-6 columns">
<select id="businessTypeSelect" name="businessTypeSelect">
<%
Info[] types = is.getList("business_types");
for (Info type : types) {
out.print("<option value=\"" + type.getId() + "\">" + type.getDescription() + "</option>");
}
%>
</select>
</div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="large-offset-10 small-1 large-1 columns">
<button id="createTeamButton" class="small button">Create</button>
</div>
</div>
</form>
<a class="close-reveal-modal">×</a>
</div>
Here's the javascript. This is nested within document.ready().
$("#createTeamButton").click(function () {
console.log("here");
window.alert("here");
var teamObject = new Team();
teamObject.description = $("#teamName").val();
teamObject.businessSize = $("#businessSizeSelect").val();
teamObject.businessType = $("#businessTypeSelect").val();
teamObject.businessLocation = $("#businessLocationSelect").val();
console.log("There");
$.ajax({
type: "PUT",
url: "/ajax/rest/team",
dataType: "json",
data: JSON.stringify(teamObject),
success: function () {
// Reload the team select box
loadTeamSelectBox();
// Pop up the site create modal
$('#createSiteModal').foundation('reveal', 'open');
},
error: ajaxErrorHandler
});
});
Here is the Team object:
function Team() {
var id=0, description='', businessSize=0, businessType=0, businessLocation=0, invite="";
}
If I fill in the team fields and then run the createTeamButton.click() event in the console, then a PUT request is recorded in the console, but it is red and I do not see it in Fiddler. These are the request headers:
Accept application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Length 88
Content-Type application/x-www-form-urlencoded; charset=UTF-8
Cookie JSESSIONID=-zZ0ZF6QtojQEfKoN2vLuFjx.undefined
Host 127.0.0.1:8080
Referer http://127.0.0.1:8080/do/controlpanel?teamName=Team+Four&businessSizeSelect=2&businessLocationSelect=1&businessTypeSelect=1
User-Agent Mozilla/5.0 (Windows NT 6.2; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0
X-Requested-With XMLHttpRequest
I do, however, see the referer in Fiddler as a GET request:
GET http://127.0.0.1:8080/do/controlpanel?teamName=Team+Four&businessSizeSelect=1&businessLocationSelect=1&businessTypeSelect=1 HTTP/1.1
Host: 127.0.0.1:8080
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://127.0.0.1:8080/do/controlpanel?teamName=Team+Four&businessSizeSelect=1&businessLocationSelect=1&businessTypeSelect=1
Cookie: JSESSIONID=-zZ0ZF6QtojQEfKoN2vLuFjx.undefined
Connection: keep-alive
I'm using jQuery 2.0.0
Share Improve this question edited May 23, 2017 at 11:44 CommunityBot 11 silver badge asked Jun 5, 2013 at 2:03 Lurk21Lurk21 2,33712 gold badges37 silver badges57 bronze badges 9- Does it work in other browsers ? – adeneo Commented Jun 5, 2013 at 2:11
- Make sure JS isn't disabled. – tymeJV Commented Jun 5, 2013 at 2:17
-
is the code inside
ready? is the html dynamically added – Arun P Johny Commented Jun 5, 2013 at 2:31 - It works in Chrome, JS is not disabled, this code block is inside document.ready() – Lurk21 Commented Jun 5, 2013 at 2:33
-
@LynnOwens in your browser console can you type
("#createTeamButton")and see what is retunrned? is it return the element – Arun P Johny Commented Jun 6, 2013 at 0:40
5 Answers
Reset to default 2Firefox was reading the button press as a form submit, even though I never bound the button click to .submit. The solution was easy, it just took forever to SEE the problem.
JS Fiddle - http://jsfiddle/m9jKV/3/
Where is the Team object?
where are these html attributes that you want to get the values? $("#businessSizeSelect").val();
Ideally these objects needs to be nested inside a form
<form>
<input type="text" id="teamName">
</form>
try using on() instead of click()
$("#createTeamButton").on("click", function () {
///code
});
There might be two reasons for it
Your code is not executed on ready
When the click event registration code is executed the dom is not properly loaded
solution
Move the code to ready
$(function(){
$('#createTeamButton').click(function(){....})
})
Your html is dynamically creaded to loaded using load()
solution
Use event propagation based event handler
$(document).on('click', '#createTeamButton', function(){
....
})
I had a similar problem with a button that was added in dynamically. Three issues were at play:
1) The first as suggested by Jude Duran above was to change from a button to an input
<input type='button' Value='Button' class='btnclass' myattribute='foobar' >
2) I then used the .bind function instead of click event
$('[id^=Compare]').bind("click", function (event) {
alert(event.attributes.myattribute,value);
// returns foobar
}
3) The final element was I needed (as above) to explicitly declare the event object in the eventhandler "function(event)". In Chrome the object event seemed to automatically exist (i.e. even with "function()" an object event existed whose attributes I could query, while in FF I had to declare it explicitly.
//Works in Chrome but not FF
$('[id^=Compare]').bind("click", function () {
alert(event.attributes.myattribute,value);
// returns foobar
}
Hope this helps others running into this mysterious issue.