Jump to content

Custom jQuery Fails


rick053
 Share

Recommended Posts

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

Share this post


Link to post
Share on other sites

  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)

Share this post


Link to post
Share on other sites

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"

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More