Conflito entre Prototype.form.js e Jquery

[Elisame Araújo 0]

Estou montando uma página de contato usando o JotForm

Porém o menu do template usa javascript para fazer o dropdown e este entra em conflito com o plug-in "prototype.forms.js"

Se eu remover o "prototype.forms.js" o dropdown funciona, do contrário não, porém o este arquivo é necessário para o formulário.

 

Eis o código do JotForm

 <!--- JotForm --->
        	<script src="http://max.jotfor.ms/js/vendor/jquery-1.8.0.min.js?v=3.2.4473" type="text/javascript"></script>
			<script src="http://max.jotfor.ms/js/vendor/maskedinput.min.js?v=3.2.4473" type="text/javascript"></script>
			<script src="http://max.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
			<script src="http://max.jotfor.ms/static/jotform.forms.js?3.2.4473" type="text/javascript"></script>
			<script type="text/javascript">
			   JotForm.init(function(){
			      $('input_7').hint('Digite seu email aqui');
			      JotForm.setPhoneMaskingValidator( 'input_10_full', '####-####' );
			      JotForm.initCaptcha('input_8');
			      JotForm.alterTexts({
				  "alphabetic":"Este campo só pode conter letras",
				  "alphanumeric":"Este campo só pode conter letras e números.",
				  "characterLimitError":"Too many Characters.  The limit is",
				  "confirmClearForm":"Você tem certeza que quer limpar este formulário?",
				  "confirmEmail":"E-mail não confere",
				  "currency":"Este campo apenas admite valores monetários.",
				  "email":"Digite um endereço de e-mail válido.",
				  "fillMask":"Field value must fill mask.",
				  "generalError":"Preencha todos os campos obrigatórios antes de prosseguir!",
				  "generalPageError":"Corrija todos os erros no formulário antes de prosseguir!",
				  "gradingScoreError":"Pontuação total deve ser menor ou igual a ",
				  "incompleteFields":"Há campos obrigatórios vazio. <br>Preencha-os antes de prosseguir!",
				  "inputCarretErrorA":"A entrada não deve ser menor do que o valor mínimo:",
				  "inputCarretErrorB":"Valor não deve ser maior do que o máximo:",
				  "lessThan":"A sua pontuação deve ser inferior ou igual a",
				  "maxDigitsError":"O numero máximo de caracteres permitidos são",
				  "maxSelectionsError":"O número máximo de seleções permitido é",
				  "minSelectionsError":"O número mínimo exigido de seleções é",
				  "multipleFileUploads_emptyError":"{file} está vazio, por favor selecione os arquivos denovo.",
				  "multipleFileUploads_fileLimitError":"Only {fileLimit} file uploads allowed.",
				  "multipleFileUploads_minSizeError":"{file} é muito pequeno, o tamanho mínimo do arquivo é {minSizeLimit}.",
				  "multipleFileUploads_onLeave":"Os arquivos agora estão em upload, se você sair agora o upload será cancelado.",
				  "multipleFileUploads_sizeError":"{file} é muito grande, o tamanho máximo é {sizeLimit}.",
				  "multipleFileUploads_typeError":"O arquivo {file} é inválido, pois somente as extensões {extensions} são permitidas.",
				  "numeric":"Este campo pode conter apenas números","pastDatesDisallowed":"A data não pode ser passada.",
				  "pleaseWait":"Por favor aguarde...","required":"Este campo é obrigatório.",
				  "requireEveryCell":"Every cell is required.","requireEveryRow":"Todos os campos são requeridos.",
				  "requireOne":"Pelo menos um campo é requisitado",
				  "submissionLimit":"Desculpe, mas apenas um envio de dados é permitido. Múltiplas submissões estão desativadas nesse formulário.",
				  "uploadExtensions":"Só pode fazer upload dos seguintes ficheiros:",
				  "uploadFilesize":"O tamanho do arquivo não pode ser maior que:",
				  "wordLimitError":"Too many words. The limit is"});
   });
</script>

<link type="text/css" rel="stylesheet" href="http://jotformz.com/css/styles/buttons/form-submit-button-simple_green_apple.css?3.2.4473"/>

E o código do menu

<!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
				/**
				 * the menu
				 */
				var $menu = $('#ldd_menu');
				
				/**
				 * for each list element,
				 * we show the submenu when hovering and
				 * expand the span element (title) to 510px
				 */
				$menu.children('li').each(function(){
					var $this = $(this);
					var $span = $this.children('span');
					$span.data('width',$span.width());
					
					$this.bind('mouseenter',function(){
						$menu.find('.ldd_submenu').stop(true,true).hide();
						$span.stop().animate({},300,function(){
							$this.find('.ldd_submenu').slideDown(300);
						});
					}).bind('mouseleave',function(){
						$this.find('.ldd_submenu').stop(true,true).hide();
						$span.stop().animate({'width':$span.data('width')+'px'},300);
					});
				});
            });
        </script>

Qual a solução?

[William Bruno 1501]

Leia:

 

http://wbruno.com.br/jquery/noconflict-jquery-usando-2-bibliotecas-javascript-alias/