Custom jQuery Fails

[rick053]

Hello,

 

I'm new to prestashop and I have a problem with my custom jquery functions. I've written 2 scripts to make modal dialog screens appear in front of the website but for some reason the jquery doesn't work. The really strange thing is that when i place a <script> tag with a link to googles jquery library at the top of my script it works, but the menu stops working...

 

I've already tried nearly every tip i could find on google, like placing the code between {literal} tags, but it stil doesn't work. Maybe you guys can help me with this problem. The code i've written is the following:

 

$(function(){
				$(".modal-dialog-screen").click(function(){
					return false;
				})
				$(".modal-dialog-background").click(function(){
					$(".modal-dialog-background").fadeOut(500);
					$("body").css("overflow-y", "auto");
				});
				$(".modal-close-button").click(function(){
					$(".modal-dialog-background").fadeOut(500);
					$("body").css("overflow-y", "auto");
				});
				$(".bel-me-button").click(function(){
					$(".modal-dialog-background").fadeIn(500);
					$("body").css("overflow-y", "hidden");
				});
				$("#bel-terug-naam").keyup(function(){
					this.value = this.value.replace(/[<>/@!#$%&*()0-9{}:;{}]/g,'');
				})
				$("#bel-terug-tel").keyup(function(){
					this.value = this.value.replace(/[^0-9-]/g,'');
				})
				$("#bel-terug-order").keyup(function(){
					this.value = this.value.replace(/[^0-9]/g,'');
				})
				$("td input, td textarea").blur(function(){
					var $this = $(this),
						$naam   = $("#bel-terug-naam").attr("class"),
						$tel	= $("#bel-terug-tel").attr("class"),
						$order  = $("#bel-terug-order").attr("class");

					if($this.val() == ""){ //Check if input is empty

						$this.addClass("modal-error");
						$this.removeClass("modal-ok");
						$this.css("border-color", "#f00");

					}else{

						if( $this.attr("id") == "bel-terug-tel"){

							if($(this).val().length < 10) {
								$this.addClass("modal-error");
								$this.removeClass("modal-ok");
								$this.css("border-color", "#f00");
							}else{
								$this.addClass("modal-ok");
								$this.removeClass("modal-error");
								$this.css("border-color", "#088A08");
							}

						}else{
							$this.addClass("modal-ok");
							$this.removeClass("modal-error");
							$this.css("border-color", "#088A08");

						}
					}
				});
				$("td textarea").keypress(function(){
					var $this   = $(this),
						$naam   = $("#bel-terug-naam").attr("class"),
						$tel	= $("#bel-terug-tel").attr("class"),
						$order  = $("#bel-terug-order").attr("class");

					if($this.val() != ""){

						$this.addClass("modal-ok");
						$this.css("border-color", "#088A08");

						if($naam == "modal-ok" && $tel == "modal-ok"){
							$("#modal-submit").removeAttr("disabled");
						}

					}else{
						$this.addClass("modal-error");
						$this.css("border-color", "#f00");
					}
				});
				$("#modal-submit").click(function(){
					$("#modal-submit").attr("disabled", true);
					var $data = $("#modal-form-content").serialize();
					sendForm($data);					  
				});

			});

			function sendForm(string){
				var url = "sendBelForm.php?" + string;

				var target = document.getElementById('modal-form-content');
				target.innerHTML = "Bezig met laden...";	//shows when the request is submitted
				var req;
				if(window.XMLHttpRequest){
					req = new XMLHttpRequest();
				}else if(window.ActiveXObject){
					req = new ActiveXObject("microsoft.XMLHTTP");
				}
				if(req != undefined) {
					req.onreadystatechange = function() {
					 // Code to fire when there is a response
						if(req.readyState == 4){	
							if(req.status == 200){
								target.innerHTML = req.responseText;
							} else {
								target.innerHTML = "An error has occured: " + req.responseText;
							}
						}
				}
				req.open("GET", url, true);
				req.send("");
				}
			}

[vekia]

1. what prestashop version you use?
   
2. where you pasted this script (what file?)
   
3. you use any other non-default jquery libraries?
   
4. what is your page URL (if it is possible to test the script, please share the url)
   

[rick053]

I use prestashop version 1.5.4.1.

The script is pasted in the psmodhomelatestnews.tpl. I customized that tpl to use it for contact info etc. in 4 blocks. No i'm using only the default jquery lib. It works fine when i run it on my laptop...

The script is on: robin-test.nl in the middle of the index page. It has a header: "Contact met Robin Design"

[vekia]

Uncaught TypeError: Object [object Object] has no method 'autocomplete' robin-test.nl/:393

Uncaught TypeError: Cannot read property 'statuses' of null jquery.js:4

 

it looks like you've got problem with search tool and autocomplete function. try to reinstall this module (it looks like problem with .js library related to this module).

 

 

moreover jquery.js looks like nondefault jquery library

[rick053]

Thanks for the suggestion! I'll try to reinstall the modules and hope the script works after this. !