0

我使用 jQuery 作为标准库。但是，我不得不使用 Prototype 来执行一个简单的功能。但这引起了冲突！

如何使下面的代码与 jQuery 一起使用并分配 Prototype？

<script type="text/javascript" language="javascript">
function trim(str){str = str.replace(/^\s*$/, '');return str;}
function signup() { 
    var email   = trim($F("email"));
    var name    = trim($F("name"));
    //EMAIL VALIDATION
    var goodEmail = email.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\.arpa)|(\.asia)|(\.cat)|(\.int)|(\.jobs)|(\.tel)|(\.travel)|(\.xxx)|(\..{2,2}))$)\b/gi);
    apos=email.indexOf("@");dotpos = email.lastIndexOf(".");lastpos=email.length-1;
    var badEmail    = (apos<1 || dotpos-apos<2 || lastpos-dotpos<2);
    if (name=="") {
        $("myResponse").style.display="inline";                 //3 lines to show and style the error message
        $("myResponse").style.color="white";                        // there are more ways to do it using css classes for example.
        $("myResponse").innerHTML="Por favor, digite seu nome";     // you could also make an error function.
        $("name").clear(); $("name").focus();                                       // clear the field and put cursor inside
        return false;
        /*  YOU CAN REPEAT THE ABOVE ELSE IF BLOCK IF YOU HAD OTHER FIELDS IN YOUR FORM, 
            LIKE LAST NAME, ADDRESS ETC. AS AN EXAMPLE SEE HOW THE NAME IS HANDLED AND REPEAT
        */
    }
    else if (email=="" || !goodEmail || badEmail) {
        $("myResponse").style.display="inline";             //3 lines to show and style the error message
        $("myResponse").style.color="white";
        $("myResponse").innerHTML="Por favor, insira um email válido";
        $("email").focus();
        return false;
    }
    else {
        //YOU MAY WANT TO CHANGE THE URL IN THE LINE BELOW
        var url = "includes/optIn.php";
        var params =  $("subform").serialize();
        new Ajax.Request(url, {onComplete:showResponse, onException:showException, onFailure:showException, asynchronous:true, method:'post', evalScripts:false, postBody:params});
        $("submit", "myResponse").invoke('hide');   // Hide the buttom and the message
        $("loading").show();                        // show the loading image.
        return false;
    }
}
function showResponse(req)  {
        $("loading").hide();
        $("myResponse").innerHTML=req.responseText; //Writes the "Thank you" message that comes from optIn.php and styles it.
        $("myResponse").style.display="inline";
        $("myResponse").style.color="white";
        $("submit").show();
        $("name", "email").invoke('clear'); 
}
function showException(req) {
    $("myResponse").innerHTML=req.responseText;
    alert("A comunicação com o servidor falhou. Tente novamente!");
    $("loading", "myResponse").invoke('hide');
    $("submit").show();
    $("name", "email").invoke('clear');    
}
</script>
4

3 回答 3

0

对于 jQuery，您需要更改选择器以使用#id 选择器。此外，jQuery 不区分集合和单个元素，它总是调用集合中每个元素的方法。

特别是，您将使用.val()、.css()、.show()、.hide()和.focus()方法来替换 Prototype 和原生 DOM 方法。此外，您将切换到该功能 - 在API 文档jQuery.ajax中查找它们。

于 2013-03-12T19:25:15.493 回答
0

你试试 jQuery.noConflict() 吗？

http://api.jquery.com/jQuery.noConflict/

于 2013-03-12T19:01:03.877 回答
0

以下是您需要完成的一些替换

$F('id') => $('#id').val();

//directly
$("id").style.display='inline' => $('#id')[0].style.display='inline';

//the "jQuery" way
$("id").style.display='inline' => $('#id').css('display','inline')

$("id").style.color="white" => $("#myResponse").css('color',"white")

$("id").innerHTML="Por favor, digite seu nome" => $('#id').html("Por favor, digite seu nome")

//.clear() has no direct equivalent method but this is close
$("id").clear() => $('#id').val(null)

$("subform").serialize() => $("#subform").serialize()

$("submit", "myResponse").invoke('hide') => $("#submit, #myResponse").hide()

这些都是简单的替换，我将把它留给你来做Ajax.Request()转换$.ajax()

于 2013-03-12T20:45:13.790 回答