Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.07.2014, 01:44
Новичок на форуме
Отправить личное сообщение для ingod Посмотреть профиль Найти все сообщения от ingod
 
Регистрация: 02.07.2014
Сообщений: 5

Парсинг картинки из google на лету.
Здравствуйте.

Опишу саму задачу:
Пользователь вводит на сайте запрос, ему выдается страница (точнее она не выдается, а появляется из display:none, т.е. фактически он остается на той же страницу) с запросом и картинкой. Картинка берется по запросу из гугла.

Все уже реализовано, но проблема! На сайте не работает. А локально (если просто документ html открыть) - работает, и только в хроме.
Вот часть кода:
google.setOnLoadCallback(function()
{
var imgname = document.getElementById('ид инпута').value;
var image_key=encodeURIComponent(imgname);
function getimage(id) {
   $('#imgbook')['attr']('src', './progress.gif');
   $['getJSON']('http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=' + image_key + '&rsz=2&imgsz=medium&callback=?', function (json) {
       $('#imgbook')['attr']('src', (json['responseData']['results'][id]['url']));
       $('#imgbook')['error'](function () {
           getimage(id + 1);
       });
   });
};
getimage(0);
});

А в html просто выводится:
<img id="imgbook" width="200" src="">



Я заметил, что проблема именно из-за того, что картинка берется по запросу, который введет пользователь.
Если задать переменную сразу (например var = 'запрос для картинки' то все нормально.


Вторые сутки вожусь, не могу никак сделать. Пожалуйста, выручайте.
Ответить с цитированием
  #2 (permalink)  
Старый 02.07.2014, 03:00
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

ingod,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<script>
$(function(){
  var imgname = document.getElementById('ид инпута').value;
  var image_key=encodeURIComponent(imgname);
  
  function getimage(id) {
     $('#imgbook')['attr']('src', './progress.gif');
     $['getJSON']('http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=' + image_key + '&rsz=2&imgsz=medium&callback=?', function (json) {
         $('#imgbook')['attr']('src', (json['responseData']['results'][id]['url']));
         $('#imgbook')['error'](function () {
             getimage(id + 1);
         });
     });
  };
  getimage(0);
});


</script>
<input id="ид инпута" value="1" >
<img id="imgbook" width="200" src="">

Всё работает.
Скорее всего проблема в google.setOnLoadCallback - хз когда он должен срабатывать, видать не тогда когда готово всё...
__________________
29375, 35

Последний раз редактировалось Aetae, 02.07.2014 в 03:02.
Ответить с цитированием
  #3 (permalink)  
Старый 02.07.2014, 12:02
Новичок на форуме
Отправить личное сообщение для ingod Посмотреть профиль Найти все сообщения от ingod
 
Регистрация: 02.07.2014
Сообщений: 5

Да он то работает, но все равно проблема таже. В вашем варианте значение инпута уже дано изначально, а оно будет вводиться пользователем. И вот тогда то и не работает.

Цитата:
Скорее всего проблема в google.setOnLoadCallback - хз когда он должен срабатывать, видать не тогда когда готово всё...
А можно его как-то заставить по другому работать? Или какие-то есть еще варианты?
Ответить с цитированием
  #4 (permalink)  
Старый 02.07.2014, 12:16
Новичок на форуме
Отправить личное сообщение для ingod Посмотреть профиль Найти все сообщения от ingod
 
Регистрация: 02.07.2014
Сообщений: 5

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<script>
$(function(){
  var imgname = document.getElementById('focusedInput').value;
  var image_key=encodeURIComponent(imgname);
  
  function getimage(id) {
     $('#imgbook')['attr']('src', './progress.gif');
     $['getJSON']('http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=' + image_key + '&rsz=2&imgsz=medium&callback=?', function (json) {
         $('#imgbook')['attr']('src', (json['responseData']['results'][id]['url']));
         $('#imgbook')['error'](function () {
             getimage(id + 1);
         });
     });
  };
  getimage(0);
});

</script>
<input id="focusedInput" value="сиськи" >
<button type="submit" id="find-file">Поиск</button>

<img id="imgbook" width="200" src="">

Вот как заставить работать? Чтобы по нажатию поиска, картинка новая бралась, на основе введенного запроса?
Ответить с цитированием
  #5 (permalink)  
Старый 02.07.2014, 13:39
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
 
<script>
$(function(){
  $('#find-file').click(function(){
    getimage(0, encodeURIComponent($('#focusedInput').val()));
  });

  function getimage(id, image_key) {
     $('#imgbook')['attr']('src', './progress.gif');
     $['getJSON']('http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=' + image_key + '&rsz=2&imgsz=medium&callback=?', function (json) {
         $('#imgbook')['attr']('src', (json['responseData']['results'][id]['url']));
         $('#imgbook')['error'](function () {
             if(json['responseData']['results'][++id]) getimage(id, image_key); //проверка, чтоб небыло бесконечного цикла
         });
     });
  };
});
 
</script>
<input id="focusedInput" value="сиськи" >
<button type="submit" id="find-file">Поиск</button>
 
<img id="imgbook" width="200" src="http://javascript.ru/forum/images/smilies/smile.gif">
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 02.07.2014, 14:14
Новичок на форуме
Отправить личное сообщение для ingod Посмотреть профиль Найти все сообщения от ingod
 
Регистрация: 02.07.2014
Сообщений: 5

Aetae, спасибо!
Так гораздо лучше.
Ответить с цитированием
  #7 (permalink)  
Старый 02.07.2014, 17:51
Новичок на форуме
Отправить личное сообщение для ingod Посмотреть профиль Найти все сообщения от ingod
 
Регистрация: 02.07.2014
Сообщений: 5

У меня еще вопрос появился.
Как теперь получить url новой картинки и задать его в переменную?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
 
<script>
$(function(){
  $('#find-file').click(function(){
    getimage(0, encodeURIComponent($('#focusedInput').val()));
  });

  function getimage(id, image_key) {
     $('#imgbook')['attr']('src', './progress.gif');
     $['getJSON']('http://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=' + image_key + '&rsz=2&imgsz=medium&callback=?', function (json) {
         $('#imgbook')['attr']('src', (json['responseData']['results'][id]['url']));
         $('#imgbook')['error'](function () {
             if(json['responseData']['results'][++id]) getimage(id, image_key); //проверка, чтоб небыло бесконечного цикла
         });
     });
  };
});

var imgurl = $("#imgbook").val();
$("#img-url").text(imgurl);
</script>
<input id="focusedInput" value="сиськи" >
<button type="submit" id="find-file">Поиск</button>
 
<img id="imgbook" width="200" src="http://javascript.ru/forum/images/smilies/smile.gif">
<br>
<tr>
					<td>Url картинки</td>
					<td id="img-url"></td>					
				  </tr>


Доработайте пожалуйста. У меня получалось сделать, но выводился ./progress.gif, а не новая.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос к знатокам google apps script gtr-kaz Общие вопросы Javascript 3 22.10.2014 08:31
Ресайз картинки на лету FRIE Работа 2 20.04.2011 10:30
эмитировать перемещение google map amigo* Элементы интерфейса 3 18.07.2010 18:24
Получение координат от картинки EmDmAl Events/DOM/Window 4 08.11.2009 14:34
Как изменить размер картинки? Mihail Общие вопросы Javascript 1 25.10.2009 13:42