0

Web サイトの通知システムを作成しようとしていますが、何らかの理由で問題が発生しています。ユーザーがクリックするとリンクが表示され、JavaScript関数が起動さdivれ、非表示の場合は表示され、その中にPHPスクリプトがロードされますdiv。

多分何か見落としてる

私のJavaScriptコード:

// show notifications
$(".noti_bubble").click(function () {
    // check the visibility of the element
    if($(".show-note").is(":hidden")) {
        $(".show-note").show();
        alert('noti_bubble has been perform');
        $(".show-note").load("scripts/notifications.php");
    }else{
        $(".show-note").hide();

    }

});

私のhtmlコード:

<div style="width:900px; margin:0 auto;">
<div style="width:250px; float:right;">

<div class="dhtmlgoodies_contentBox" id="box1">
<div class="dhtmlgoodies_content" id="subBox1">
<!-- slide down content goes here -->
<div id="notiHeading" class="notiHeadingContent">
<strong>Notifications</strong>
</div>

<div class="notif_barline"></div>

<div id="notifyContent">

<div class="show-note"></div>

</div>

</div>
</div>

</div>
</div>

の.show-notecssdisplay:none;もあります。

クリック可能なリンク:

<a href="#" id="dhtmlgoodies_control"  onclick="return false" onmousedown="javascript:slidedown_showHide('box1');" class="noti_bubble">(0)</a>
4

2 に答える 2

0

http://jsfiddle.net/9M396/

html

<div style="width:500px; margin:0 auto;">
    <div style="width:250px; float:right;">    
        <div class="dhtmlgoodies_contentBox" id="box1">
            <div class="dhtmlgoodies_content" id="subBox1">
            <!-- slide down content goes here -->
                <div id="notiHeading" class="notiHeadingContent">
                    <strong>Notifications</strong>
                </div>

                <div class="notif_barline"></div>

                <div id="notifyContent">                
                    <div class="show-note"></div>                
                </div>            
            </div>
        </div>
    </div>
</div>
    <a href="#" id="dhtmlgoodies_control" onmousedown="javascript:slidedown_showHide('box1');" class="noti_bubble">(0)</a>

js:

// show notifications
$(".noti_bubble").click(function () {
    var div = $(".show-note");

    if(div.is(":hidden")) {
        div.show();
        div.load("/echo/json/?json={}");
    }else{
        div.hide();
    }

    return false;
});

CSS:

div
{
    border: 1px solid black;
}

.show-note
{
    min-height: 100px;
    display:none;
}
于 2012-08-01T15:55:01.673 に答える
0

完全なコールバックを に.load()追加:

$(".show-note").load("scripts/notifications.php", function(response, status, xhr) {
    alert(status);
});
于 2012-08-01T15:56:07.140 に答える