Диалоги jQuery Mobile и Normal jQuery конфликтуют / не работают

0

У меня есть ряд диалогов, которые вызываются при отправке формы на сайте. С тех пор я адаптировал сайт для мобильного использования и включил jquery movile (1.4.2) в стандартный jquery и jquery-ui.

Моя проблема заключается в том, что на мобильном сайте, где и когда загружаются все три сценария, диалоги, отображаемые в форме, не работают с загруженным скриптом jquery.

Ниже приведен код моего сайта; нормальный jquery (1.11.0), jquery mobile (1.4.2) и jquery ui (1.10.4) не отображаются из-за размера, но связаны на главной странице html.

Основной HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/jquery_mobile.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="/Main.css">
<link rel="stylesheet"  type="text/css" href="/Dropdown.css">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/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="/jquery.js"></script> 
<script type="text/javascript" src="/jquery_ui.js"></script>

<script type="text/javascript" src="/Main.js"></script>
<script type="text/javascript"  src="/dropdownhover.js"></script>
<script type="text/javascript" src="/dropdown.js"></script>
<script type="text/javascript" src="/cookie_accepted.js"></script>
<script type="text/javascript" src="/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:[email protected]?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:[email protected]?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>&nbsp;&nbsp;<a href="privacy.html">Privacy Policy</a>&nbsp;&nbsp;<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_detect.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 (отображает диалоги из скрытых divs, когда условия выполняются во время отправки формы)

// Initation when submit button is clicked
$(function() {
  $(".contact_form_button").click(function() {

//Getting ID 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;
    }

  });

});

Итак, любые идеи, почему divs с классами "hidden_message" не отображаются, когда загружается jquery mobile?

Любая помощь очень ценится, Эллиот.

Теги:
jquery-mobile
dialog

1 ответ

0

Я решил это в конце. Придется настроить один из файлов java-скриптов, так как это предотвращает загрузку JS-кода для диалога.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню