jQuery Mobile和普通jQuery对话框冲突/不工作
jQuery Mobile and Normal jQuery dialogs conflicting/not working
我有一系列的对话框被调用时，一个网站上的表单提交。此后，我对该网站进行了调整，以适应移动使用，并将jquery mobile(1.4.2)合并到标准jquery和jquery-ui中。
我的问题是，在移动站点上，当所有三个脚本都加载时，表单显示的对话框不能与加载的jquery移动脚本一起工作。
下面是我的网站代码;普通的jquery (1.11.0)， jquery移动版(1.4.2)和jquery UI(1.10.4)由于尺寸的原因没有显示，但在主HTML页面中有链接。
主HTML<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/CSS/jquery_mobile.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="CSS/Main.css">
<link rel="stylesheet" type="text/css" href="CSS/Dropdown.css">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="CSS/Dropdown_ie.css"/>
<![endif]-->
<!--[if IE 8]>
<style>
.contact_form_message
{
width: 320px;
max-width: 330px;
height: 100px;
margin-left: 82px !important;
background-color: #F4FAD8;
color: #2D4206;
margin-top: 5px;
outline: none;
border: 1px solid;
border-color: #A9AC95;
position: absolute;
}
#form_mail_logo
{
width: 50px;
height: 50px;
position:relative;
border: none;
top: -61px;
right: -435px;
}
.contact_form_fieldset
{
padding-left: 10px;
padding-right: 10px;
height: 355px;
}
.Form .ui-dialog-titlebar-close
{
float: right;
margin-top: 90px;
margin-right: 8px;
background-color: #A9AC95;
border: 1px solid;
border-color: #2D4206;
color: #2D4206;
font-size: 16px;
outline: none;
}
</style>
<![endif]-->
<!--[if IE 9]>
<style>
.Form .ui-dialog-titlebar-close
{
float: right;
margin-top: 90px;
margin-right: 8px;
background-color: #A9AC95;
border: 1px solid;
border-color: #2D4206;
color: #2D4206;
font-size: 16px;
outline: none;
}
</style>
<![endif]-->
<meta name="description" content="Tree Pro Ltd">
<meta name="keywords" content="Tree Surgery, TreePro, Tree Pro, Tree Care">
<meta name="author" content="Tree Pro Ltd">
<meta name="viewport" content="width=device-width, initial-scale=0.333">
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<title>
Contact us
</title>
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="JS/jquery_ui.js"></script>
<script type="text/javascript" src="JS/Main.js"></script>
<script type="text/javascript" src="JS/dropdownhover.js"></script>
<script type="text/javascript" src="JS/dropdown.js"></script>
<script type="text/javascript" src="JS/cookie_accepted.js"></script>
<script type="text/javascript" src="JS/mobile_detect.js"></script>
</head>
<body id="bodyid">
<div title="Cookie Policy" class="Cookie_Warning" >
<p>Wellcome to Tree Pro Ltd. By using this site, you agree to that cookies will be stored on your computer.</p>
Read more about our cookie policy <a href="privacy.html">here</a>.
</div>
<div class="container">
<p>
<div class="topheader"><img src="Images/general/logo.jpg" alt="logo" id="logo"><span id="sitetitle">Tree Pro Ltd</span><span id="telnumber">Tel: 01622 851576</span>
<a href="http://facebook.treeproltd.co.uk"><img id="facebook_logo" src="Images/icons/Facebook.png" alt="Facebook icon"></a><a href="http://twitter.treeproltd.co.uk"> <img id="twitter_logo" src="Images/icons/Twitter.png" alt="Twitter icon"></a><a href="mailto:contact@treeproltd.co.uk?Subject=Enquiry"> <img id="mail_logo" src="Images/icons/Mail.png" alt="Mail icon"></a></div>
<p>
<div class="bottomheader">
<ul class="dropdown">
<li class="left"><a href="/">Home</a>
<ul class="sub_menu">
</ul>
</li>
<li><a>Our Services</a>
<ul class="sub_menu">
<li class="top"><a href="felling.html">Tree Surgery - Felling</a></li>
<li><a href="pruning.html">Tree Surgery - Pruning</a></li>
<li class="bottom"><a href="patiocleaning.html">Patio Cleaning</a></li>
</ul>
</li>
<li><a href="gallery.html">Gallery</a>
<ul class="sub_menu">
</ul>
</li>
<li ><a>Our Work</a>
<ul class="sub_menu">
<li class="top"><a href="aboutus.html">About Us</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="ourpartners.html">Our Partners</a></li>
<li class="bottom"><a href="faqs.html">FAQ's</a></li>
</ul>
</li>
<li class="right"><a>Contact</a>
<ul class="sub_menu">
<li class="top"><a href="contactus.html">Contact Us </a></li>
<li class="bottom"><a href="findus.html">Find Us</a></li>
</ul>
</li>
</ul>
<form id="searchform" name="search" action="searchresults.php" method="get" >
<input id="searchbox" type="text" name="query" value="" >
<input id="searchbutton" value="Search" onClick="Clear();" type="submit" >
<input id="hidden" type="hidden" name="search" value="1">
</form>
</div>
<div id="mobile_bottomheader">
<select class="mobile_dropdown" id="mobile_select">
<option class="mobile_dropdown_option" value="contactus.html">Contact us</option>
<option value="/">Home</option>
<option value="felling.html">Tree Felling</option>
<option value="pruning.html">Tree Pruning</option>
<option value="patiocleaning.html">Patio Cleaning</option>
<option value="gallery.html">Gallery</option>
<option value="aboutus.html">About us</option>
<option value="testimonials.html">Testimonials</option>
<option value="ourpartners.html">Our Partners</option>
<option value="faqs.html">FAQ's</option>
<option value="findus.html">Find us</option>
</select>
</div>
<p>
<div class="maincontent">
<div class="form_content_title">Contact Us</div>
<br><br>
<div class="form_text_content">
We thank you for taking interest in Tree Pro and appreciate you want to contact us. <br><br>
Please use the contact form below to directly contact us or alternatively email us by clicking the mail icon on the form.
<br><br> To find out where we are, either click <a href="findus.html">here</a> or select the "Find Us" option from the contact menu.
</div>
<img src="Images/general/woodland_1.jpg" alt="Woodland Image" id="static_form_image">
<br><br>
<form data-role="none" class="contact_form" name="contact_form">
<fieldset class="contact_form_fieldset">
<label class="contact_form_label">Name:</label> <input id="name" class="contact_form_input" name="name" type="text"><br><br>
<label class="contact_form_label">E-mail:</label> <input id="email" class="contact_form_input" name="email" type="text"><br><br>
<label class="contact_form_label">Phone:</label> <input id="phone" class="contact_form_input" name="phone" type="text"><br><br>
<label class="contact_form_label">Subject:</label>
<select data-role="none" class="contact_form_input_subject" id="subject" name="subject">
<option data-role="none" value="Tree Surgery">Tree Surgery</option>
<option data-role="none" value="Patio Cleaning">Patio Cleaning</option>
<option data-role="none" value="Fire Wood / Wood Chippings">Fire wood / Wood chippings</option>
<option data-role="none" value="Testimonial">Testimonial</option>
<option data-role="none" value="Complaint">Complaint</option>
<option data-role="none" value="Other">Other</option>
</select>
<br><br>
<label class="contact_form_label">Message:</label> <textarea class="contact_form_message" id="message" name="message"></textarea>
<br><br>
<input class="contact_form_button" name="submit" data-role="none" type="submit" onclick="Form_Validation()" value="submit">
</fieldset>
</form>
<a href="mailto:contact@treeproltd.co.uk?Subject=Enquiry"> <img id="form_mail_logo" src="Images/icons/Mail.png" alt="Mail icon"></a>
<div id="success_message" title="Thankyou" class="hidden_message" >
<p>Thank you for contacting us, we shall be in touch shortley.</p>
</div>
<div id="no_name_message" title="No Name entered" class="hidden_message">
<p >No name has been entered, please enter a name.</p>
</div>
<div id="invalid_email_message" title="Invalid E-mail address" class="hidden_message">
<p>The email address you have entered is invalid, please enter a valid one.</p>
</div>
<div id="invalid_phone_message" title="Invalid phone number" class="hidden_message">
<p>The phone number you have entered is invalid, please enter a valid one consisting of 11 digits.</p>
</div>
<div id="invalid_phone_and_email_message" title="Invalid contact details" class="hidden_message">
<p>Both the phone number and the email address you have entered are not valid, please ensure they are both correct.</p>
</div>
</div>
<p class="maincontentspace"></p>
<br><br>
<div class="footer">
<p>
<div id="footer_links"><a href="terms.html">Terms & Conditions</a> <a href="privacy.html">Privacy Policy</a> <a href="help.html">Help</a></div>
<div id="copyright">© Copyright Tree Pro Ltd 2014 </div></div>
<p class="footerspace"></p>
</div>
</body>
</html>
mobile_probe .js(决定jquery mobile是否按屏幕宽度加载，如果是，还显示ID元素"mobile_select"，这是网站的移动导航菜单)
$(function(){
if (screen.width < 600)
{
var imported = document.createElement('script');
imported.src = '/JS/jquery_mobile.js';
document.head.appendChild(imported);
document.getElementById("mobile_select").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
}
});
main.js(在表单提交过程中满足条件时显示隐藏div中的对话框)
// Initation when submit button is clicked
$(function() {
$(".contact_form_button").click(function() {
//Getting ID's from html
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var subject = $("select#subject").val();
var message = $("textarea#message").val();
//Triming of white space for email adresses and phone numbers
var trimed_email = $.trim($("#email").val());
var trimed_phone = $.trim($("#phone").val());
//Getting posistion of email elemnts
var x=document.getElementById("email").value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
//Validation below
if (document.getElementById("name").value == "")
{
$("#no_name_message").dialog({dialogClass: "Form"});
return false;
}
else if (((atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) && (trimed_email.length>=1)) && (trimed_phone.length!==11 && trimed_phone.length!==0))
{
$("#invalid_phone_and_email_message").dialog({dialogClass: "Form"});
return false;
}
else if (trimed_phone.length!==11 && trimed_phone.length!==0 )
{
$("#invalid_phone_message").dialog({dialogClass: "Form"});
return false;
}
else if ((atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) && (trimed_email.length>=1))
{
$("#invalid_email_message").dialog({dialogClass: "Form"});
return false;
}
else
{
//Form proceesing below
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&subject=' + subject + '&message=' + message;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "php/form.php",
data: dataString,
success: $("#success_message").dialog({dialogClass: "Form"}),
});
return false;
}
});
});
所以，任何想法为什么div类"hidden_message"不显示时，jquery移动加载?
非常感谢你的帮助，Elliott。
最后我解决了。必须调整其中一个java脚本文件，因为它阻止了对话框的JS代码加载
相关文章：
- PHP/AAJAX阻止jquery工作
- Chrome扩展和Chome浏览器中的Jquery工作方式不同
- 2次点击事件不会'我在jquery工作
- 使用 href=“#” JQuery 工作，但使用 href=“page.jsp” 不起作用
- 迭代 javascript 对象无法通过 jQuery 工作
- 让简单的Javascript / jQuery工作(Ariel Flesler的ScrollTo）
- 更新面板阻止 jquery 工作
- Jquery工作，但只是暂时的
- 一个jQuery工作，两个不工作
- 当我使用AngularJS部分时，如何让JQuery工作
- 为什么不;我的jquery工作(使用延迟、hasclass、addclass、removeclass、keyUp、key
- jQuery工作不正常
- 我有一个JQuery工作，但小越野车
- :has() jquery工作不正常
- JQuery工作得太快了
- 如果一个输入单选被选中，改变父元素'的颜色:不能'使它与jQuery工作
- Chrome扩展:访问DOM的弹出.html和让jQuery工作
- 如何使下拉jQuery工作
- 尝试使jquery工作
- RegEx不与我的jQuery工作
