jQuery.prop works in firefox but not in IE and Chrome

Question

I need to achieve this. When user click on a button, we need to prevent the user from clicking the again before the action is completed. It is working in firefox. But not in IE and Chrome. Is there any settings I need to set in IE and Chrome? I am using primefaces 3.5.

I tried with .attr too. Firefox is working, but IE and Chrome not working.

xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:hx="http://www.ibm.com/jsf/html_extended">

<h:head>
<title>Enterprise</title>
<meta http-equiv="keywords" content="enter,your,keywords,here" />
<meta http-equiv="description"
    content="A short description of this page." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<link type="text/css" rel="stylesheet"
    href="#{request.contextPath}/theme/primefaces-aristo/themeMain.css" />

<link rel="SHORTCUT ICON" href="../../theme/csl.ico" id="ma1001" />

<script src="../../scripting.js"></script>

<script type="text/javascript">
    jQuery('form1').submit(function() {
        jQuery('input[type=submit]', this).prop('disabled', true);
    });
</script>


<f:view locale="#{pc_Ma1001.userLocale}" />

<f:loadBundle basename="messages.MessageResources" var="msg" />
</h:head>

<f:metadata>
<f:event listener="#{pc_Ma1001.onPageLoadBegin}" type="preRenderView"></f:event>
</f:metadata>

<h:body>
<h:form id="form1" enctype="multipart/form-data" prependId="false">
    <ui:include src="../../theme/menubar.xhtml" />
            <td><p:commandButton type="submit" value="Create"
        styleClass="commandButton" id="maintenance_command_add"
        action="#{pc_Ma1001.doMa1001_command_addAction}" ajax="false"></p:commandButton>
    </td>
</h:form>
 </h:body>
 </html>

I doubt your selector "form1" will find your form. I think you meant to use "#form1". But im not even sure that's the final id thats generated — Ian, Jul 04 '13 at 01:42
@lan I tried using #form1 too but still same result. Only working in firefox. — hahagal, Jul 04 '13 at 03:38

Karl-André Gagnon · Answer 1 · 2013-07-04T03:52:02.150

0

Try wrapping your script in a DOM ready :

jQuery(document).ready(function(){
    jQuery('#form1').submit(function() {
        jQuery('input[type=submit]', this).prop('disabled', true);
    });
})

edited Jul 04 '13 at 03:52

answered Jul 04 '13 at 01:39

Karl-André Gagnon

33,662
5
50
75

I tried your codes still the same problem, firefox is working, not for IE and Chrome. – hahagal Jul 04 '13 at 03:36

score -1 · Answer 2 · answered Jul 04 '13 at 01:37

-1

Try this:

jQuery('form1').submit(function(evt) {
    jQuery('input[type=submit]', $(evt.target)).prop('disabled', true);
});

answered Jul 04 '13 at 01:37

LexLythius

1,904
1
12
20

jQuery.prop works in firefox but not in IE and Chrome

2 Answers2