0

<head>ビューに JavaScript がありますが、AJAX で別のコンテンツを読み込んだ後に再度実行されないため、ファイルに配置することなく AJAX から分離するビューに配置したいと考えています。コントローラ。どうすればいいのですか？JavaScript コードを CakePHP の方法で記述し、JavaScript ファイルと同じ方法でインライン false として設定する方法はありますか?

head 内の JavaScript コードでさえ AJAX では実行されないようですが、どうすればよいですか? JavaScript 関連の div を content div の外に配置する必要がありますか?

これは私の見解です：

    <script>
    var geocoder, lat, lng;
    function initialize() {
        var location = <?php echo "\"" . $location . "\""?>;
        location = location.replace(/\+/g, ' ');
        document.getElementById("address").innerHTML = location + " Weather";
        var latlng = new google.maps.LatLng(<?php echo $loc['lat'];?>, <?php echo $loc['lng'];?>);
        var mapOptions = {
            zoom: 12,
            center: latlng,
            navigationControl: false,
            mapTypeControl: false,
            scaleControl: false,
            draggable: false,
            scrollwheel: false,
            disableDoubleClickZoom: true,
            zoomControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        <?php $i = 0 ?>
        <?php foreach ($posts as $post): ?>
        var markerLatlng = new google.maps.LatLng(<?php echo h($post['Post']['latitude']); ?>, <?php echo h($post['Post']['longitude']); ?>);
        var marker = new google.maps.Marker({
        position: markerLatlng,
        map: map,
        title: '<?php echo h($post['Post']['temperature']); ?>',
        icon: 'http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.6|0|FF0000|12|_|<?php echo h($post['Post']['temperature']); ?>',
        url: '<?php echo $this->Html->url(array('controller' => 'posts', 'action' => 'view', $post['Post']['id'])); ?>'
        });
        google.maps.event.addListener(marker, 'click', function() {
            window.location.href = this.url;
        });
        <?php endforeach; ?>
    }

    function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyBoEBzeiYi-bCaTIlcK7lrNKUyvUfLQqGM&sensor=false&callback=initialize&region=LB";
        document.body.appendChild(script);
    }

    $(document).ready(function(){
        $(".post .toggle").toggle(function(){
            $(".post .toggle").css('background-image','url(../../img/down.png)');
            $(this).css('background-image','url(../../img/up.png)');
            $(".post .description").hide();
            $(this).parent().find(".description").show("slow");
            $(".post").height(100);
            $(this).parent().height(200);},
            function() {$(".post .toggle").css('background-image','url(../../img/down.png)');$(".post").height(100);$(".post .description").hide();$(this).css('background-image','url(../../img/down.png)');
        });
    });

    window.onload = loadScript;
    </script>
    <div id="weather">
    <center><div id="address">&nbsp;</div>
    <p><div id="coords"><?php echo $loc['lat'] . ", " . $loc['lng'];?></div></p></center>
    <div id="weather-menu">
    <?php echo $this->Html->link('Today', 'today/' . $location);?>
    <?php echo $this->Html->link('Yesterday', 'yesterday/' . $location);?>
    <?php echo $this->Html->link('Custom', 'custom/' . $location);?>
    <?php echo $this->Html->link('All', 'all/' . $location);?>
    </div>
    <div id="post-container">
    <?php /*
    if ($posts) {
    echo "<div id=\"post\"><div id=\"temperature\">";
    echo $posts[0]['Post']['temperature'] . "°C</div>";
    if ($posts[0]['Humidity']['humidity'])
        echo "<div id=\"humidity\">" . $posts[0]['Humidity']['humidity'] . "%</div>";
    echo "<div id=\"created\">" . $this->Time->niceShort($posts[0]['Post']['created']) . "              </div>";
        echo "<div id=\"username\">" . $posts[0]['User']['username'] . "</div>";
        echo "<div id=\"condition\">";
        if (strtotime($posts[0]['Post']['created']) > date_sunrise(strtotime($posts[0]         ['Post']['created']), SUNFUNCS_RET_TIMESTAMP, $posts[0]['Post']['latitude'], $posts[0] ['Post']['longitude'],90, 2) && strtotime($posts[0]['Post']['created']) < date_sunset(strtotime($posts[0]['Post']['created']), SUNFUNCS_RET_TIMESTAMP, $posts[0]['Post']['latitude'], $posts[0]['Post']['longitude'],90, 2))      
        echo $this->Html->image('/img/weather-icons/' . $posts[0]['Post']['condition'] . 'A.png');
    else
        echo $this->Html->image('/img/weather-icons/' . $posts[0]['Post']['condition'] . 'B.png');
    echo "</div></div>";
}*/
?>
     <?php


    //$posts = $this->requestAction('/weather/fetch');
        foreach (array_slice($posts, 0) as $post) {
        echo "<div class=\"post\"><div class=\"temperature\">";
        echo $this->Html->link($post['Post']['temperature'] . "°C", array('controller' =>     'posts', 'action' => 'view', $post['Post']['id'])) . "</div>";
    if ($post['Humidity']['humidity'])
        echo "<div class=\"humidity\">" . $post['Humidity']['humidity'] . "%</div>";
    echo "<div class=\"created\">" . $this->Time->niceShort($post['Post']['created']) . "</div>";
    echo "<div class=\"username\">" . $this->Html->link($post['User']['username'], array('controller' => 'users', 'action' => 'view', $post['Post']['user_id'])) . "</div>";
    echo "<div class=\"condition\">";
    if (strtotime($post['Post']['created']) > date_sunrise(strtotime($post['Post']

['created']), SUNFUNCS_RET_TIMESTAMP, $post['Post']['latitude'], $post['Post']['longitude'],90, 2) && strtotime($post['Post']['created']) < date_sunset(strtotime($post['Post']['created']), SUNFUNCS_RET_TIMESTAMP, $post['Post']['latitude'], $post['Post']['longitude'],90, 2))      
        echo $this->Html->image('/img/weather-icons/' . $post['Post']['condition'] . 'A.png');
    else
        echo $this->Html->image('/img/weather-icons/' . $post['Post']['condition'] . 'B.png');
    echo "</div>";
    echo "<div class=\"description\">" . $post['Description']['description'] . "</div>";
    echo "<div class=\"toggle\"></div>";
    echo "</div>";
}
?>
</div>
<div id="side-container">
<div id="map_canvas"></div>
<br/>
<div id ="current"><?php if (isset($w_temp)) echo "Current Temperature: " . $w_temp . "°C" . $this->Html->image('/img/wg.png');?></div>
</div>
<?php
$this->Paginator->options(array(
    'update' => '#content',
    'before' => $this->Js->get('#busy-indicator')->effect('fadeIn', array('buffer' => false)),
    'complete' => $this->Js->get('#busy-indicator')->effect('fadeOut', array('buffer' => false))
));
echo $this->Paginator->prev('« Previous ', null, null, array('class' => 'disabled'));
echo $this->Paginator->next('Next »', null, null, array('class' => 'disabled'));
echo $this->Js->writeBuffer();
?>
<div id="busy-indicator"></div>
</div>

これは私のコントローラーインデックスアクションです:

public function index($date, $location = null) {
    $this->set('location', $location);
    $address = urlencode($location);
    $loc = $this->getLocation($address);
    $this->set('loc', $loc);
    $this->loadModel('Post');
    if ($date == 'all') {
        $this->paginate = array('conditions' => array(
                'latitude BETWEEN ? AND ?' => array(
                    $loc['lat'] - 0.05, $loc['lat'] + 0.05), 
                'longitude BETWEEN ? AND ?' => array(
                        $loc['lng'] - 0.05, $loc['lng'] + 0.05)
                ),
            'order' => array('Post.created' => 'desc'),
            'limit' => '5');
        $this->set('posts', $this->paginate('Post'));
    }
    else if ($date == 'today') {
        $this->set('posts', $this->Post->find('all', array(
            'conditions' => array(
                'latitude BETWEEN ? AND ?' => array(
                    $loc['lat'] - 0.05, $loc['lat'] + 0.05), 
                'longitude BETWEEN ? AND ?' => array(
                        $loc['lng'] - 0.05, $loc['lng'] + 0.05),
                'Post.created >' => date('Y-m-d H:i:s', strtotime("-1 day"))
                ),
            'order' => array('Post.created' => 'desc'))));
    }
    else if ($date == 'yesterday') {
        $this->set('posts', $this->Post->find('all', array(
            'conditions' => array(
                'latitude BETWEEN ? AND ?' => array(
                    $loc['lat'] - 0.05, $loc['lat'] + 0.05), 
                'longitude BETWEEN ? AND ?' => array(
                        $loc['lng'] - 0.05, $loc['lng'] + 0.05),
                'Post.created >' => date('Y-m-d H:i:s', strtotime("-2 day")),
                'Post.created <' => date('Y-m-d H:i:s', strtotime("-1 day"))
                ),
            'order' => array('Post.created' => 'desc'))));
    }
    $this->wunder($location);
}
4

4 に答える 4

1

君たちありがとう。これを私のjavascriptコードに追加する必要がありました:

var pathname = window.location.pathname;
window.onload = loadScript;
$(document).ready(function() {
    $.ajax({
        url: pathname,
        success: function(){
          loadScript();
        }
    })
});
于 2012-12-13T12:45:53.657 に答える
0

「AJAX」を使用してスクリプトをページに挿入していると思いますが、jQueryを使用するか、element.innerHTML = contentを介してコンテンツをDOMにプルする方法を使用していますが、間違っていますか？

ただし、element.innerHTMLで渡されたスクリプトは実行されません。これは、jQueryがHTML応答をフラグメント化するために使用するものです。

IMHOを行う最良の方法は、「AJAX」を使用して、CakePHPアプリからjavascriptフロントエンドに（JSON応答を使用して）データを取得することです。次に、このデータをjavascriptコード内で使用してグラフを表示します。それははるかに効率的であり、shoesoleがDOM要素の参照を失うことについて話している問題はありません。

または、このハックを使用して、これを怠惰な方法で行うことができます：

<img style="display:none" src="data:image/png,script" onerror="
 console.log('Hey I am javascript code running as long as javascript isnt disabled!');
"/>
于 2012-12-10T00:16:18.480 に答える
0

あなたが書いた：

ビューに JavaScript がありますが、AJAX で別のコンテンツを読み込んだ後、再度実行されません

私はあなたが何をしているのかを簡単に見ただけですが、どこで AJAX リクエストを行っているのかすぐにはわかりませんでした。他の人が指摘しているように、その点を明確にすることは役に立ちます。ただし、AJAX を使用して新しいコンテンツを読み込んだ後、置換されたコンテンツのイベント ハンドラーがスクリプトに含まれている場合は、Javascript でイベント ハンドラーを破棄して再作成する必要があります (同一の DOM 要素に置き換えた場合でも)。

ここまで：

JavaScript コードを CakePHP の方法で記述し、JavaScript ファイルと同じ方法でインライン false として設定する方法はありますか?

したがって、これは基本的に CakePHP で外部ソース ファイルを参照するのと同じ方法で行います。次のように置き換えることができます。

<script>
...
</script>

次のように:

$this->Html->ScriptBlock('your javascript here', array('inline'=>false));

次に、セクションで次のことを確認します (cakePHP 2.1 以降の場合):

echo $this->fetch('script');

または (cakePHP 2.0x 以前の場合)

$scripts_for_layout();
于 2012-12-09T20:40:54.760 に答える