单击链接以获取json,在colorbox窗口中打开ajax结果

时间:2013-09-19 17:16:48

标签: jquery colorbox

我有一个链接,我可以点击,它使用ajax,获取json数据然后我循环并向div添加数据。这部分工作正常。我现在想要在彩色框中显示#IndeedResults中的结果,但无法使其工作。这就是我所拥有的:

<p><span id="IndeedJobs">Click here to see job opportunities.</span></p>
<div id="IndeedResults"></div>
<br /><br />
<script type="text/javascript">
   $(document).ready(function () {

       $('#IndeedJobs').click(function () {
           var vURL = "http://api.url.com";

           $.ajax({
                type: 'GET',
                url: vURL,
                dataType: 'jsonp',
                beforeSend: function() {
                    $('#IndeedResults').empty();
                    $('#IndeedResults').show();
                },
                complete: function() {
                    $('#IndeedJobs').hide();
                },
                success: function(data) {

                    var x = data.results;
                    for (var i=0; i<x.length; i++)
                    {
                        var vJobTitle = x[i].jobtitle;
                        var vCompany = x[i].company;
                        var vCity = x[i].city;
                        var vState = x[i].state;
                        var vCountry = x[i].country;
                        var vLocation = x[i].formattedLocation;
                        var vSource = x[i].source;
                        var vDate = x[i].date;
                        var vSnippet = x[i].snippet;
                        var vResultURL = x[i].url;
                        var vRelativeTime = x[i].formattedRelateiveTime;
                        var vHTML = '<hr>' + vJobTitle + '<br />'
                        vHTML += vCompany + '<br />'
                        vHTML += vLocation + '<br />'
                        vHTML += '----------------'
                        vHTML += '<p>' + vSnippet + '<span><a href="' + vResultURL  + '">View More</a></span><br /><b>' + vDate + '</b></p>'
                        vHTML += '----------------'


                        $('#IndeedResults').append(vHTML);



                    }
                    $('#IndeedResults').colorbox({inline:true});

                },error: function (jxhr, msg, err) {
                   $('#IndeedResults').html("Data NOT posted. Error returned:" + JSON.stringify(jxhr));
               }
            });



        });
   });
</script>

预期的结果是输出我在颜色框窗口中附加到#IndeedResults的html代码。

0 个答案:

没有答案