1

Below is my JSF code and corresponding HTML code which its gets converted into,

<script type="text/javascript" src="/static-files/js/jquery.min.js"></script>
<script type="text/javascript" src="/static-files/js/functions.js"></script>
<script type="text/javascript" src="/static-files/scripts/jquery-1.6.2.js"></script>
<script type="text/javascript" src="/static-files/scripts/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<ui:composition>
<div id="myForm" style="visibility:hidden">
<a4j:commandLink id="cmdLinkClose" value="No Thanks"></a4j:commandLink>
</div>

<script type="text/javascript">
        /* <![CDATA[ */

$("a[id$='cmdLinkClose']").click(function() {
    $('#dialog').dialog('close');
});

/* ]]> */ 
</script>

</ui:composition>

HTML code :

<a href="#" id="j_id3:cmdLinkClose" name="j_id3:cmdLinkClose" 
onclick="A4J.AJAX.Submit('j_id3',event,{'similarityGroupingId':'j_id3:cmdLinkClose'
,'parameters':{'j_id3:cmdLinkClose':'j_id3:cmdLinkClose'} } );return false;">No Thanks</a>

When I click on 'No Thanks' link, am getting below exception in Java Script console.

Uncaught TypeError: Object #<Object> has no method 'dialog'

And I also have below code in my xhtml page,

<script type="text/javascript">
/* <![CDATA[ */
   var $h=jQuery.noConflict();          
   function myFunction() 
   {

        $h(document).ready(function() {
            $h("#myForm").attr("style", "display:block");
            $h("#myForm").dialog({
                open: function(event, ui) {
                    jQuery('.ui-dialog-titlebar-close').removeClass("ui-dialog-titlebar-close").html('<span>Close</span>');
                },
                duration: 800,
                height: 300,
                minWidth: 300,
                width: 300,
                position: [490, 160],
                zIndex: 99999999,
                modal: true,
                show: {
                    effect: 'puff',
                    duration: 400
                },
                hide: {
                    effect: 'puff',
                    duration: 400
                }

            });
        });
   }

   myFunction();

    /* ]]> */
</script>

After googling I learnt that it could be because of not importing relevant Jquery Java Script files. But, in my case am not sure which Java Script I need to import/remove.

UPDATE:

I replaced jquery-ui.min.js with jquery-1.9.1.min.js. Below is the error am getting now,

enter image description here


Seem like you've included three times jQuery library:

<script type="text/javascript" src="/static-files/js/jquery.min.js"></script>

<script type="text/javascript" src="/static-files/scripts/jquery-1.6.2.js"></script>

<script src="http://code.jquery.com/jquery-latest.js"></script>

You just need to include once and place it before jQuery UI and your other jQuery file

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" src="/static-files/js/functions.js"></script>

<script type="text/javascript" src="/static-files/scripts/jquery-ui.min.js"></script>
4

1 回答 1

1

好像你已经包含了三倍的 jQuery 库:

<script type="text/javascript" src="/static-files/js/jquery.min.js"></script>

<script type="text/javascript" src="/static-files/scripts/jquery-1.6.2.js"></script>

<script src="http://code.jquery.com/jquery-latest.js"></script>

您只需要包含一次并将其放在 jQuery UI 和您的其他 jQuery 文件之前

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" src="/static-files/js/functions.js"></script>

<script type="text/javascript" src="/static-files/scripts/jquery-ui.min.js"></script>
于 2013-04-12T04:46:07.237 回答