$.noConflict() conflict in JSF page

Question

I have a Primefaces chart which I want to use with AJAX tab:

<h:head>

</h:head>
<h:body>
    <div id="test" style="width:850px; height:800px; position:absolute;  background-color:transparent; ">

        <h:form>
            <h:panelGroup layout="block">
                <h:selectOneListbox size="0" id="selectedMenu" value="#{dashboardController.selectedMenu}">
                    <f:selectItem itemLabel="first" itemValue="0" />
                    <f:selectItem itemLabel="second" itemValue="1" />
                    <f:selectItem itemLabel="third" itemValue="2" />

                    <f:ajax event="change" execute="@this" render="loadMenu" />
                </h:selectOneListbox>
            </h:panelGroup>

            <h:panelGroup layout="block" id="loadMenu">
                <h:panelGroup rendered="#{dashboardController.selectedMenu=='0'}">
                    MENU 0
                </h:panelGroup>

                <h:panelGroup rendered="#{dashboardController.selectedMenu=='1'}">
                    MENU 1
                </h:panelGroup>

                <h:panelGroup rendered="#{dashboardController.selectedMenu=='2'}">
                    MENU 2
                </h:panelGroup>
            </h:panelGroup> 
        </h:form>    
    </div> 
</h:body>


@ManagedBean
@ViewScoped
public class DashboardController implements Serializable{

private String selectedMenu;

@PostConstruct
public void init() {
    if (selectedMenu == null || selectedMenu.trim().isEmpty()) {
        this.selectedMenu = "0";
    }
}

public String getSelectedMenu() {
    return selectedMenu;
}

public void setSelectedMenu(String selectedMenu) {
    this.selectedMenu = selectedMenu;
} 
}

I use this code for the charts:

<script type="text/javascript">
   $.noConflict();
   // Code that uses other library's $ can follow here.
</script>
    ..........

<p:lineChart id="logins" value="#{StatisticsController.weekActivity}" legendPosition="ne"  
                                 title="Weekly Logins" seriesColors="4D94FF, 1975FF, 005CE6, 0047B2" minY="0" maxY="200"/>

When I remove

<script type="text/javascript">
    $.noConflict();
    // Code that uses other library's $ can follow here.
</script>

When AJAX tabs are working. It seems that the $.noConflict(); code is in conflict. How I can solve this problem?

What kind of conflict? Are you using other library that uses `$`? — Ram, Sep 30 '12 at 19:26
There is no conflict between client-side jQuery and a server-side component. — Ram, Sep 30 '12 at 19:30
I use Primefaces which uses JQuery. I again include JQuery. $.noConflict(); is used to prevent conflict. Without it the Primefaces charts are not working. — user1285928, Sep 30 '12 at 19:30
If that component uses jQuery in your document, why are loading jQuery again? — Ram, Sep 30 '12 at 19:32
Because I have menu with JQuery which cannot use the version from Primefaces. Can I for example isolate '$.noConflict():' in separate namespace for example? — user1285928, Sep 30 '12 at 19:36

score 2 · Answer 1 · answered Sep 30 '12 at 19:42

2

So remove the jquery include from the primefaces library and just have it use the jQuery you've already included.

answered Sep 30 '12 at 19:42

Dan B

39
2

Would you please give me some more information how to do this. I tested this solution but it's not working: http://forum.primefaces.org/viewtopic.php?f=3&t=18685, http://stackoverflow.com/questions/11112058/how-to-use-jquery-with-primefaces – user1285928 Sep 30 '12 at 20:18

$.noConflict() conflict in JSF page

1 Answers1