2013-03-22 2 views
2

При загрузке страницы мой getJSON вызов отображает свой вывод в div (называемый myDiv).Как добавить результаты getJSON в div каждый раз, когда я нажимаю кнопку loadmore?

Теперь я хочу добавить кнопку в конце страницы, и когда пользователь нажмет на эту кнопку, я хочу сделать еще один звонок getJSON, но на этот раз я хочу увеличить число_шт. На единицу, каждый раз, когда пользователь нажимает кнопку и отображает новый результат в конце предыдущих результатов. Не могли бы вы, ребята, показать мне, как я могу это сделать?

<head> 
    <script> 
    //var counter = 1; 
    $.getJSON('http://anyorigin.com/get?url=https://www.myothersite.com/getit.php?page_number=+counter&type=TopVideos&sortBy=newest&callback=?', function(data){ 
     var siteContents = data.contents; 
     //writes to textarea 
     document.myform.outputtext.value = siteContents; 
     document.getElementById("myDiv").innerHTML=siteContents; 
     $('#loadingimg').hide(); 
    }); 
    </script> 
</head> 
<body> 
    <div class="MainDiv"> 
    <div class="MainContent"> 
     <div class="ContentWidth"> 
     <div id="JSListVideo" class="VideoList"> 
      <div id="myDiv"></div> 

И код кнопки:

<div class="MoreButtonSection"> 
    <div class="RedButton"> 
    <span class="LeftEnd"></span> 
    <span class="Centre"> 
     <a href="javascript:void(0);" onclick="seemore();" title="See more">see more</a> 
    </span> 
    <span class="RightEnd"></span> 
    </div> 
</div> 

ответ

2

Прежде чем ответить, я бы посоветовал вам придерживаться одного подхода, либо JQuery синтаксис или Javascript. Я думаю, вам нужен код разбивки на страницы. Код ниже может быть вам полезен.

Я хотел бы рассказать вам немного о том, как это можно сделать. Пожалуйста, поправьте меня, если я ошибаюсь.

//initialize page number to 1 default 
var pagenumber=1; 
$(document).ready(function(){ 
    //load first page records on page load 
    getResult(pagenumber); 
}); 

//pass pagenumber to function to fetch correct page records 
function getResult(pagenumber){ 
    $.getJSON('http://anyorigin.com/get?url=https://www.myothersite.com/getit.php?page_number='+ pagenumber +'+counter&type=TopVideos&sortBy=newest&callback=?', function(data){}); 
    //after every call increment page number value 
    pagenumber++; 
} 
$('btnLoadMore').click(function(){ 
    //simply call getResult 
    getResult(pagenumber); 
}); 

Я не могу найти seemore() функцию в вашем коде. Возможно, вам нужно что-то подобное. Ваш HTML должен быть:

<a href="#" onclick="return seemore();" title="See more">see more</a> 

JS должен быть:

function seemore(){ 
    counter++; 
    return false; 
} 

counter должна быть глобальной переменной, так что она доступна. Никакая идея о вашей URL:

http://anyorigin.com/get?url=https://www.myothersite.com/getit.php?page_number=+counter&type=TopVideos&sortBy=newest&callback=? 

Я не думаю, что это должно быть:

http://anyorigin.com/get?url=https://www.myothersite.com/getit.php?page_number='+ counter +'&type=TopVideos&sortBy=newest&callback=? 
+0

можете ли вы добавить несколько комментариев в лету ур код? будет полезно. – Sangeeta

+0

см. Правки. – Sangeeta

+0

Я не могу заставить свою кнопку работать с вашим событием click! должен ли я разместить свой первый код внутри другой функции и назвать его видным? – user1788736

1

Вы можете просто добавить значение к текущему значению. см. ниже:

document.getElementById("myDiv").innerHTML += siteContents; 
+0

спасибо передние ответа .Но как увеличивает номер страницы каждый раз, когда я нажмите кнопку для вызова getjson (номер страницы по умолчанию я хотите, чтобы он был одним, поскольку это значение, которое выполняется при загрузке страницы в первый раз? – user1788736

2

Прежде всего код обертывания внутри $(document).ready();.

Теперь вам нужно создать click события для кнопки, так что при нажатии на кнопке, он будет вызывать getJson, а затем вы можете добавить данные в нужном DIV, потому что прямо сейчас ваш код будет просто запустить во время загрузки.

Пример

$(document).ready(function() { 
    var counter = 1; 
    $('button').on('click',function() { 
    $.getJSON('http://anyorigin.com/get?url=https://www.myothersite.com/getit.php?page_number=+counter&type=TopVideos&sortBy=newest&callback=?', function(data) { 
     var siteContents = data.contents; 
     document.myform.outputtext.value = siteContents; 
     $("myDiv").html(siteContents); 
     $('#loadingimg').hide(); 
    }); 
    counter++; 
    }); 
}); 
+0

спасибо, можете ли вы рассказать мне, как изменить мою кнопку, чтобы ваше событие click работало с ней правильно? – user1788736

+0

@ user1788736 вам нужно добавить уникальный идентификатор к своему , а затем просто замените '$ ('button')' на '$ ('# buttonID')'. –