Question

I realized something weird when I’m coding in javascript, especially with some jquery functions.

Here’s my code

<?php // Encoded in UTF-8
    if(isset($_SESSION['username']))
    {
?>

<script type="text/javascript">
    function showEvent(nid)
    {
        $j=jQuery.noConflict();
        $j.get("getGestionEvent.php?type=show&nid="+nid, function(data){
            document.getElementById("eventdiv").innerHTML = data;
        });
    }
</script>

<h2> Event </h2>
<fieldset>
<legend> Add </legend>
<div style="margin-top:10px;">
    <label for="date"> Date : </label>
    <span style="margin-left:20px;">
        <button id="ButtonCreationDemoButton">
            <img src="img/calendar.png" alt="[calendar icon]"/>
        </button>
    </span>
</div>
<form name="events" action="index.php?p=event" method="post">
<div style="margin-top:5px;">
    <span style="margin-left:-1px;">
        <input type="text" name="ButtonCreationDemoInput" id="ButtonCreationDemoInput"/>
    </span>
</div>
<div style="margin-top:10px;">
    <label for="date"> Description : </label>
</div>
<div style="margin-top:5px;">
    <span style="margin-left:-1px;">
        <input type="text" name="desc" id="desc" maxlength="100">
    </span>
</div>
<div style="margin-top:5px;">
    <input type="submit" value="Ajouter">
<div>
</fieldset>
</form>
<div id="eventdiv"></div>
<script type="text/javascript">
    // If I don't call the function, the other script doesn't make an error
    showEvent(0);
</script>

<script>
    $('#ButtonCreationDemoButton').click(
      function(e) {
        $('#ButtonCreationDemoInput').AnyTime_noPicker().AnyTime_picker().focus();
        e.preventDefault();
      } );
</script>
<?php
    }
    else
    {
        echo '<p style="color:red"> You cannot see this page. </p>';
    }
?>

This is a simple form with 2 textbox, but I have a button with an image of calendar to make appear a calendar on top of the textbox ButtonCreationDemoInput to make the user choose a date easily. If I remove the line that call the function showEvent(), the calendar show with no problem. But if I let the the function there, I get the error and I don’t see the calendar :

Uncaught TypeError: Property ‘$’ of object [object DOMWindow] is not a function

and it points on the line : $(‘#ButtonCreationDemoButton’).click(

By the way, showEvent only give the div called eventdiv a table of data from a database.

This is not the first time that I see this kind of problem. This only happen when I’m reaffecting the content of a div.

Can someone help me with this please?

Answer 1

$ is the standard variable alias for the jQuery object. BUT you are using jQuery.noConflict();. That removes the $ alias. Instead, you have to use the word jQuery, i.e. jQuery('#ButtonCreationDemoButton').

Basically, showEvent() gets called, removes the $ alias, and then you try using it in the following script tag.

However, in your code you don’t just call jQuery.noConflict(), you assign it to the variable $j. This allows you to use $j as the jQuery alias, i.e. $j('ButtonCreation...').