Question

I’m working on an inherited unfinished application that was using some prototype features for ajax calls, then I used JQuery for other purposes. At a certain moment I had an incompatibilty issue that I solved using the jQuery $.noConflict() option so I kept the prototype thing as everything was working smoothly on all browsers… except for the day when I tried to test it on IE (version 8). It kept displaying a stack overflow error and the application was not reacting properly. I did change the header by adding <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> just in case but after some research it seems that the problem is caused by the improper handling of the prototype library by IE. So instead I decided to switch everything to Jquery. The only remaining piece of code that uses prototype is the following :

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')
  });
}

Any idea on how to transform it so I can get the same behavior using JQuery syntax?

Basically the first function ajaxAll() catches the submit action of a form (pro_search_form) then calls the function inline_results() to update a div with an appear effect using the post method for the ajax call and the function putmks() that would basically eval the returned javascript content generated by the controller at the url ‘main/prosearch’ after send the same post data parameters (this function is the most critical part as it takes advantage of prototype ability to automatically eval any javascript as long as it has the proper header text/javascript).
The third function initornot() is just checking the display property of a div before taking an action.

N.B: used Prototype version is 1.5.0 and Jquery is 1.7.1

Please help

Answer 1

Yup I finally got it done with the following code improved a little bit:

$(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);
});
  }

})

I know, I’m answering my own question, but I just wanted to put the solution available for other folks in case they come across my question.

Thanks prodigitalson for the advice 😉