Как конвертировать скрипт из Prototype в JQuery? - PullRequest
Новая
       10

Как конвертировать скрипт из Prototype в JQuery?

0 голосов
/ 14 февраля 2012

Я работаю над унаследованным незаконченным приложением, которое использовало некоторые функции прототипа для вызовов ajax, затем я использовал JQuery для других целей.В определенный момент у меня возникла проблема несовместимости, которую я решил с помощью опции jQuery $ .noConflict (), поэтому я сохранил прототип, поскольку все работало без проблем во всех браузерах ... за исключением дня, когда я пытался протестировать его в IE(версия 8).Это продолжало отображать ошибку переполнения стека, и приложение не реагировало должным образом.Я изменил заголовок, добавив <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> на всякий случай, но после некоторых исследований кажется, что проблема вызвана неправильной обработкой библиотеки прототипов IE.Поэтому вместо этого я решил все переключить на Jquery.Единственный оставшийся кусок кода, который использует прототип, это: 

function ajaxAll() {
$('pro_search_form').onsubmit = function () {
    initornot();
    inline_results();
    putmks();
    return false;
}
}

function initornot() {
var $elem = $('conteneur');
if($elem.getStyle('display') == 'none') { setTimeout("init();", 77); }
else init();
}

function inline_results() {
new Ajax.Updater ('pro_description_div', base_url+'main/ajaxsearch', 
{
method:'post', 
postBody:'magasin=true&ltype='+$F('ltype')+'&lieu='+$F('lieu')+'&keywords='+$F('keywords')
});
new Effect.Appear('conteneur', {duration: 2.0});
}

function putmks()
{
var url = base_url+'main/prosearch';
var myAjax = new Ajax.Request(
  url,
  {
    method: 'post',
postBody:'magasin=true&ltype='+$F('ltype')+'&lieu='+$F('lieu')+'&keywords='+$F('keywords')
  });
}

Есть идеи, как его преобразовать, чтобы я мог получить то же поведение, используя синтаксис JQuery?

В основном первая функцияajaxAll () перехватывает действие отправки формы (pro_search_form), затем вызывает функцию inline_results () для обновления div с эффектом появления, используя метод post для вызова ajax и функцию putmks (), которая в основном оценивает возвращаемый контент javascriptгенерируется контроллером по URL 'main / prosearch' после отправки тех же параметров данных поста (эта функция является наиболее важной частью, поскольку она использует преимущества возможности прототипа для автоматической оценки любого javascript, если он имеет правильный заголовок text / javascript).Третья функция initornot () просто проверяет свойство отображения div перед выполнением действия.

Примечание: используемая версия прототипа - 1.5.0, а Jquery - 1.7.1

Пожалуйста, помогите

1 Ответ

1 голос
/ 15 февраля 2012

Да, я наконец-то сделал это с помощью следующего улучшенного кода: 

$(document).ready(function(){

$("#pro_search_form").submit(function(e) {

    allResults();
e.preventDefault();

 });

function allResults() {

$.post(base_url+"main/ajaxsearch", {'magasin':true, 'ltype':$("#ltype").val(), 'lieu':$("#lieu").val(), 'keywords':$("#keywords").val()}, function(results){
    $("#pro_description_div").html(results);
    $("#conteneur").fadeIn("slow");
});

var elem = $("#conteneur").css("display");
if (elem == 'none') { setTimeout("init()", 84); }
else {init();}

$.post(base_url+"main/prosearch", {'magasin':true, 'ltype':$("#ltype").val(), 'lieu':$("#lieu").val(), 'keywords':$("#keywords").val()}, function(results){
    val(results);
});
  }

})

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

Спасибо prodigitalson за совет;)

...