2014-01-06 81 views
1

我有一個colorbox內容的問題,無法弄清楚如何處理它。另外,我對jQuery不是很熟悉。jbox裏面的colorbox不起作用

我有一個Colorbox顯示通常的html內容(它不是iframe-d)。在那裏我有一個用於計算的小腳本,取決於複選框的選擇。此代碼在靜態頁面上正常工作,但不適用於Colorbox。我讀到$ .colorbox.element(),但沒有得到它..

這裏是我的代碼的一部分,任何幫助,高度讚賞

<script type="text/javascript"><!-- 
$('[id^=acc]').click(function() { 
    if($(this).attr("checked")) { 
     $('‪#‎total‬').text(parseInt($('#total').text()) + parseInt($(this).data('amount'))); 
     $('‪#‎monthly‬').text(parseInt($('#monthly').text()) + parseInt($(this).data('monthly'))); 
    } else { 
     $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount'))); 
     $('#monthly').text(parseInt($('#monthly').text()) - parseInt($(this).data('monthly'))); 
    } 
}); 
//--></script> 

<span id="total">0</span> AZN 
<span id="monthly">0</span> AZN 
<input type="checkbox" class="accCheck" id="acc1" name="accessory[]" data-amount="100" data-monthly="15"/> 
<label for="acc1"><span></span>Add to credit</label> 

這是代碼,調用的形式向部分內部顏色框

<script type="text/javascript"><!-- 
$(function() { 
    $("[id^=onlineCredit]").submit(function() { 
     $.post($(this).attr("action"), $(this).serialize(), function(data) { 
      $.colorbox({html:data}); 
     }, 
     'html'); 
     return false; 
    }); 
}); 
//--></script> 
+1

錯誤(控制檯)?什麼東西? –

+0

什麼都沒有(((問題是,這段代碼在正常頁面上完全工作 –

+0

我想這可能是一個與瀏覽器指向的問題,那兩個跨度(#total和#monthly)實際上是colorbox元素 –

回答

0

page1.html

<span id="total">0</span> AZN 
<span id="monthly">0</span> AZN 
<input type="checkbox" class="accCheck" id="acc1" name="accessory[]" data-amount="100" data-monthly="15"/> 
<label for="acc1"><span></span>Add to credit</label> 

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript"> 
     $('#acc1').click(function() { 
      if($(this).attr("checked")) { 
       $('#‎total').text(parseInt($('#total').text()) + parseInt($(this).data('amount'))); 
       $('#‎monthly').text(parseInt($('#monthly').text()) + parseInt($(this).data('monthly'))); 
      } else { 
       $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount'))); 
       $('#monthly').text(parseInt($('#monthly').text()) - parseInt($(this).data('monthly'))); 
      } 
     }); 
    </script> 

page2.html

012被打印
<form class="ajax" href="page1.html"> 
    <input type="submit"/> 
</form> 

<link href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" rel="stylesheet"></link> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $(".ajax").colorbox({width:"50%"}); 
    }); 
</script> 

試試這個:)

+0

這意味着有一個鏈接顯示在頁面上...... –

+0

是的,如果你想從其他頁面調用表單HTML。 請參閱http://www.jacklmoore.com/colorbox/example1/ – radouane

+0

在提交表單後打開colorbox。我猜$ .colorbox({html:data});是不是調用它的正確方法。我應該考慮將類型更改爲內嵌或iframe ...但是這會影響我所有的項目(( –

0

嘗試將所有的腳本頁面你顯示colorbox上。

也尋找propattr的使用attr("checked")在我的瀏覽器中未定義。

例如

<script> 
    $(document).ready(function(){ 

     $('[id^=acc]').click(function() { 

     alert($(this).attr("checked")); -- this doesn't work on my browser 
     alert($(this).prop("checked")); -- this does. 

     if($(this).attr("checked")) { 
      $('‪#‎total‬').text(parseInt($('#total').text()) + parseInt($(this).data('amount'))); 
      $('‪#‎monthly‬').text(parseInt($('#monthly').text()) + parseInt($(this).data('monthly'))); 
     } else { 
      $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount'))); 
      $('#monthly').text(parseInt($('#monthly').text()) - parseInt($(this).data('monthly'))); 
     } 
    });   

     $(function() { 
      $("[id^=onlineCredit]").submit(function() { 
       $.post($(this).attr("action"), $(this).serialize(), function(data) { 
        $.colorbox({html:data}); 
       }, 
       'html'); 
       return false; 
      }); 
    }); 
<\script> 
+0

沒有工作((我猜是點擊複選框內的顏色框不被瀏覽器識別 –

+0

'colorbox'出現後,我會查看頁面的'viewSource'並檢查已經呈現的內容,這可能會幫助你發現它爲什麼沒有按預期工作。 –

0

與其他形式在溶液同一頁

<a id="inline" href="#myForm">myForm</a> 
<form id="myForm" style="display:none"> 
    <span id="total">0</span> AZN 
    <span id="monthly">0</span> AZN 
    <input type="checkbox" class="accCheck" id="acc1" name="accessory[]" data-amount="100" data-monthly="15"/> 
    <label for="acc1"><span></span>Add to credit</label> 
    <input type="submit"/> 
</form> 
<link href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" rel="stylesheet"></link> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#inline").click(function(){ 
      $("#myForm").css("display","inline"); 
     }).colorbox({inline:true, href:"#myForm",width:"50%", 
         onClosed:function(){ 
            $("#myForm").css("display","none"); 
           } 
        }); 
    }); 
    $('#acc1').click(function() { 
     if($(this).attr("checked")) { 
      $('#‎total').text(parseInt($('#total').text()) + parseInt($(this).data('amount'))); 
      $('#‎monthly').text(parseInt($('#monthly').text()) + parseInt($(this).data('monthly'))); 
     } else { 
      $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount'))); 
      $('#monthly').text(parseInt($('#monthly').text()) - parseInt($(this).data('monthly'))); 
     } 
    }); 
</script> 
相關問題