以模态加载AJAX内容并更改URL

My current setup is on click a modal popups with data from the ajax action which has been passed an id, I want the URL to change on click.

我当前的设置是单击一个模式弹出窗口,其中包含来自ajax动作的数据,该动作已经传递了一个id,我希望在点击时更改URL。

But I also want it so that if you directly accessed the URL it would load say index with the modal preloaded.

但我也想要它,这样如果你直接访问URL,它会加载说预设模式的索引。

Very much like https://www.myunidays.com/perks/view/shoeaholics/online it loads the URL with the content in a model then if you click/close the modal the URL changes to the index page.

非常像https://www.myunidays.com/perks/view/shoeaholics/online,它会在模型中加载带有内容的URL,然后如果单击/关闭模式,URL将更改为索引页面。

I have seen related questions about changing URL on click but couldn't find anything to do with accessing URL directly (is their a rule I can add to my .htaccess).

我已经看到有关在点击时更改URL的相关问题,但无法找到与直接访问URL有关的任何事情(这是我可以添加到我的.htaccess的规则)。

(Any code/direction is appreciated)

(任何代码/方向表示赞赏)

1 个解决方案

#1

Create a partial view (so that layout isnt rendered twice) and add the action to controller

创建局部视图(以便布局不会呈现两次)并将操作添加到控制器

public function actionViewmodal($id)
{
    return $this->renderPartial('_view', array('model' => $this->findModel($id)));
}

Then within my index I did the following

然后在我的索引中我做了以下

$(document).ready(function() {
$('a').click(function() {

    pageurl = $(this).attr('href');
    var Id = jQuery(this).attr('id');
    $.ajax({
        type: 'POST',
        data: {
            'modal_id' : Id,
        },
        url : 'http://localhost:8888/directory/viewmodal?id='+Id,
        success: function(response) {
            if(response) {
                $('.modal_some_wrapper').html(response);
                $('#modal_'+Id).modal('show');
                $(document).on('hidden.bs.modal', modal_id, function (event) {
                    $(this).remove();
                });
            } else {
                alert('Error');
            }
        }
    });

       //to change the browser URL to the given link location
        if(pageurl!=window.location){
        window.history.pushState({path:pageurl},'',pageurl);
        }
        //stop refreshing to the page given in
        return false;

});

});

Could someone example how myunidays website works with modal and URL change?

有人可以举例说明myunidays网站如何使用模态和URL更改?

#1