モーダル [高機能版]

ボタンを押すと、検索ボックスがポップアップ表示されます。

セミナータイトルの他、会場名、講師名で検索できます。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    名古屋セミナーポータル検索
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">
                    <a href="https://www.seminar-portal.org/" target="_blank">名古屋セミナーポータル</a>
                </h4>
            </div>
            <div class="modal-body">
                <div class="ajaxform">
                    <form action="" method="get" class="ajaxsearch form-horizontal">
                        <div class="form-group">
                            <label for="seminartitle" class="col-sm-3 control-label">セミナータイトル</label>
                            <div class="col-sm-9">
                                <input type="text" name="keyword" id="seminartitle" class="text" placeholder="" value=""><!-- デフォルトの検索キーワードを設定する => value="検索キーワード" -->
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="seminarplace" class="col-sm-3 control-label">セミナー会場</label>
                            <div class="col-sm-9">
                                <input type="text" name="place" id="seminarplace" class="text" placeholder="" value=""><!-- デフォルトの会場名を設定する => value="会場名" -->
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="seminarname" class="col-sm-3 control-label">講師名</label>
                            <div class="col-sm-9">
                                <input type="text" name="name" id="seminarname" class="text" placeholder="" value=""><!-- デフォルトの講師名を設定する => value="講師名" -->
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-9">
                                <input value="検索" type="submit" class="btn btn-primary">
                            </div>
                        </div>
                    </form>
                </div>
                <ul class="searchresult"></ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>

<script>
    (function($){
        function dispLoading(){
            if($("#loading").size() == 0){
                $(".searchresult").append("<div id='loading'></div>");
            }
        }
        function removeLoading(){
            $("#loading").remove();
        }

        $(document).on("submit", ".ajaxsearch", function() {
            $(".searchresult").text("");
            dispLoading();
            var request = $.ajax({
                url: "https://www.seminar-portal.org/index.php/seminarsearch",
                type: "get",
                dataType: 'jsonp',
                jsonpCallback: "seminar",
                data: $(this).serialize(),
                timeout: 5000,
            });
            request.done(function(result, textStatus, xhr) {
                if (result.num >=1) {
                    // sort by date asc
                    result.items.sort(function(a,b) {
                        return (a.date < b.date ? -1 : 1);
                    });

                    $.each(result.items, function(i, val) {
                        textdata = $("<a></a>",{
                            href: val.url,
                            text: val.title,
                            target: "_blank"
                        });
                        textlist = $("<p></p>").html(textdata).append(" 会場: " + val.place + " 日時: " + val.date + val.time);
                        $('.searchresult').append(textlist);
                    });
                } else {
                    $('.searchresult').text("合致するセミナーはありません。");
                }
                removeLoading();

            });
            request.fail(function(xhr, textStatus, error) {
                $(".searchresult").text("接続できませんでした。しばらく待ってから、検索を実行してください。");
                removeLoading();
            });
            return false;
        });
    })(jQuery);
</script>

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

サンプルページ

モーダル表示高機能版のサンプル検索ページはこちらをごらんください。