2014-03-25 59 views
0

我正在使用PHP,JavaScript Json來填充表單中的字段。一切工作正常,直到我將我的joomla從3.1.5升級到3.2.2。我認爲它與jquery衝突。如何在Joomla中使用jquery noconflict

所以這裏我使用的代碼。如果我使用這個獨立版本,它的工作原理絕對好,但在Joomla中無效。

請幫我解決這個jQuery的衝突。

<?php 

try { 

    $objDb = new PDO('mysql:host=localhost;dbname=prod', 'xxx', 'xxxx'); 
    $objDb->exec('SET CHARACTER SET utf8'); 

    $sql = "SELECT id, Master, Area, Rate1 
      FROM `products` 
      WHERE `Master` = 0"; 
    $statement = $objDb->query($sql); 
    $list = $statement->fetchAll(PDO::FETCH_ASSOC); 

} catch(PDOException $e) { 
    echo 'There was a problem'; 
} 

?> 
<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <link href="/1/finished/css/core.css" rel="stylesheet" type="text/css" /> 
    <!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head> 
<body> 
<script> 
function sendForm() { 
    document.myform.submit() 
} 
</script> 

<div id="wrapper"> 

    <form id="myform" action="/index.php/it-hardware-disposal-cost-upto-25-items" method="post"> 

     <select name="Area" id="Area" class="update"> 
      <option value="">Select Your Location</option> 
      <?php if (!empty($list)) { ?> 
       <?php foreach($list as $row) { ?> 
        <option value="<?php echo $row['id']; ?>"> 
         <?php echo $row['Area']; ?> 
        </option> 
       <?php } ?> 
      <?php } ?> 
     </select> 

     <select name="County" id="County" class="update" 
      disabled="disabled"> 
      <option value="">----</option> 
     </select> 

     <select name="City" id="City" class="update" 
      disabled="disabled" onchange="this.form.submit()"> 
      <option value="">----</option> 
     </select> 


    </form> 

</div> 


<script src="/1/finished/js/jquery-1.6.4.min.js" type="text/javascript"></script> 
<script src="/1/finished/js/core.js" type="text/javascript"></script> 
</body> 
</html> 

參見下面是core.js我堅信,問題是在這裏,可能是因爲在一些的Joomla其他代碼是相互衝突的。

var formObject = { 
     run : function(obj) { 
       if (obj.val() === '') { 
         obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true); 
       } else { 
         var id = obj.attr('id'); 
         var v = obj.val(); 
         jQuery.getJSON('/1/finished/mod/update.php', { id : id, value : v }, function(data) { 
           if (!data.error) { 
             obj.next('.update').html(data.list).removeAttr('disabled'); 
           } else { 
             obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true); 
           } 
         }); 
       } 
     } 
}; 
$(function() { 

     $('.update').live('change', function() { 
       formObject.run($(this)); 
     }); 

}); 

因此,Core.js使用Jquery.json來使用update.php填充數據,該數據有以下代碼。

<?php 
if (!empty($_GET['id']) && !empty($_GET['value'])) { 

     $id = $_GET['id']; 
     $value = $_GET['value']; 

     try { 

       $objDb = new PDO('mysql:host=localhost;dbname=xxxx', 'xxx', 'xxx'); 
       $objDb->exec('SET CHARACTER SET utf8'); 

       $sql = "SELECT id, Master, Area 
           FROM `products` 
           WHERE `master` = ?"; 
       $statement = $objDb->prepare($sql); 
       $statement->execute(array($value)); 
       $list = $statement->fetchAll(PDO::FETCH_ASSOC); 

       if (!empty($list)) { 

         $out = array('<option value="">Select Your Area, City</option>'); 

         foreach($list as $row) { 
           $out[] = '<option value="'.$row['id'].'">'.$row['Area'].'</option>'; 
         } 

         echo json_encode(array('error' => false, 'list' => implode('', $out))); 

       } else { 
         echo json_encode(array('error' => true)); 
       } 

     } catch(PDOException $e) { 
       echo json_encode(array('error' => true)); 
     } 

} else { 
     echo json_encode(array('error' => true)); 
} 
?> 
+0

如果您將jQuery安裝到Joomla上,那麼可能是這樣。此外,你應該已經在谷歌或堆棧溢出搜索:http://api.jquery.com/jQuery.noConflict/ – SparoHawk

+0

SparoHawk,如果我知道如何解決它;我不會在這裏發佈求助。你能否發現我應該做些什麼來解決它? – user2107349

+0

你能發佈你得到的錯誤嗎? – SparoHawk

回答

0

我相信jQuery live方法在Joomla中包含的jQuery版本中已棄用。它在示例代碼中起作用,因爲您正在加載jQuery 1.6.4。在Joomla的代碼嘗試chainging這樣的:

$(function() { 

     $('.update').live('change', function() { 
       formObject.run($(this)); 
     }); 

}); 

要這樣:

jQuery(function() { 

     jQuery('.update').on('change', function() { 
       formObject.run(jQuery(this)); 
     }); 

}); 

,看看它是否工作。

編輯

我從附加的鏈接,其中有兩個錯誤,我們應該首先解決的屏幕截圖。

enter image description here

  1. 腳本選項卡,state.js拋出未定義jQuery的錯誤。這很可能意味着你還沒有加載jQuery庫,導致錯誤。
  2. bootsrap.min.js拋出一個錯誤,指出沒有方法'on'表示jQuery已經加載,但是舊版本。 Joomla 3.x自帶1.8.23,但是在您的網頁上查看DOM後顯示版本1.6正在加載。

jQuery和引導用的Joomla核心是如下來加載正確的方法:

JHtml::_('jquery.framework'); 
JHtml::_('bootstrap.framework'); 

您應該刪除手動裝載任一這些框架的任何線和如果可能的話,將這些方法在頂部您的模板的index.php,以確保它們在任何其他嵌入式腳本運行之前加載。

嘗試解決這些問題,並查看是否從控制檯中刪除了這些錯誤,以及代碼在正確加載後是否按預期執行。

+0

我試過了,結果沒有什麼不同,依然不起作用。你能想到可能導致這個問題的事情嗎? – user2107349

+0

當你看看你的瀏覽器控制檯日誌是否有任何錯誤?你有一個我可以導航到公共的鏈接? –

+0

我必須說,你是一個天才,現在正在工作。 – user2107349

0

當的Joomla使用jQuery,其最好使用jQuery的()而不是出廠符號$()。所以你沒有衝突。 Joomla默認使用MooTools,因此MooTools擁有工廠符號的所有權。

否則,你需要使用jQuery.noConflict()

例如..所以這一點:

$(function() { 

    $('.update').live('change', function() { 
      formObject.run($(this)); 
    }); 

}); 

會變成這樣:

jQuery(function() { 

    jQuery('.update').live('change', function() { 
      formObject.run(jQuery(this)); 
    }); 

}); 

如何使用jQuery.noConflict一個例子( ),所以你可以使用$()工廠符號:

<!-- Another way to put jQuery into no-conflict mode. --> 
<script src="mootools-core.js"></script> 
<script src="jquery-min.js"></script> 
<script> 
jQuery.noConflict(); 
jQuery(document).ready(function($) { 
     // You can use the locally-scoped $ in here as an alias to jQuery. 
     $("div").hide(); 
}); 

// The $ variable in the global scope has the mootools-core.js meaning. 
window.onload = function(){ 
    var mainDiv = $("main"); 
} 
</script> 

Joomla也有jQuery noConflict插件,所以如果您不想自己添加它,也可以使用其中一個插件。

的Joomla插件查看:

jQuery Easy

jQuery Scripts Joomla Plugins

要麼你有你的自定義的jQuery代碼之前,使用jQuery.noConflict(),或者你總是使用jQuery的(),而不是$()

看看是否有幫助!

UPDATE

如果你打開你的瀏覽器控制檯,你會看到,你有一個像5個JavaScript錯誤..像沒有被定義的jQuery,並根據jQuery的其他錯誤。另外,如果您查看腳本正在加載的順序,您將看到jQuery在依賴jQuery的其他腳本之後加載。您將不得不確保jQuery在Joomla中正確加載,並且所有錯誤都已修復,以使您的代碼可以正常工作。

+0

我試過了,結果沒有什麼不同,依然不起作用。你能想到可能導致這個問題的事情嗎? – user2107349

+0

@ user2107349 - 你有什麼想法,或者只有一個?檢查用於Joomla 3.2.2版本的jQuery的版本,看看你是否使用任何已被棄用的jQuery方法。 –

+0

@ user2107349如果你打開你的瀏覽器控制檯,你會看到你有** 5 ** JavaScript錯誤..就像沒有定義jQuery和其他錯誤取決於jQuery。另外,如果您查看腳本正在加載的順序,您將看到jQuery在依賴jQuery的其他腳本之後加載。您將不得不確保jQuery在Joomla中正確加載,並且所有錯誤都已修復,以使您的代碼可以正常工作。 –