<a href="#?cat=MT&typ=1" data-reveal-id="reveal_popup" onclick="pop();" data-closeonbackgroundclick="false" data-dismissmodalclass="close-reveal-modal">due today</a>
<a href="#?cat=MT&typ=2" data-reveal-id="reveal_popup" onclick="pop();" data-closeonbackgroundclick="false" data-dismissmodalclass="close-reveal-modal">due in 2 days</a>
<div id="reveal_popup" class="reveal-modal">
<div id="popup"></div>
<a class="close-reveal-modal">×</a>
</div>
function pop() {
var cat=**value of cat parameter in href**
var type=**value of typ parameter in href**
$.ajax({
type:'post',
url:site_url()+'/event/deleteEventSingle',
data:{'cat':cat,'type':typ},
async:false,
success:function(result){}
});
}
これでは、ユーザーがhrefをクリックすると、同じポップアップが異なるデータとともに表示されます。実際には10を超えるhrefがあり、ポップアップにユーザーが入力したデータを含むカレンダーを表示しようとしています。これは、hrefに示すように、2つのパラメーターcatとtypに依存します。
すべてのhrefには、独自のcatとtypの値があります。 hrefがクリックされたときに、クリックされたhrefのcat値とtyp値がjqueryを使用して取得されるようにし、これらの変数をajaxで渡すことができるようにします。
var cat=**value of cat parameter in href**
var type=**value of typ parameter in href**
あなたは以下のようにsoemeのことをすることができます
$('a').bind('click',function(){
var url = ($(this).attr('href'));
var cat = getURLParameter(url, 'cat');
var typ = getURLParameter(url, 'typ');
//calling the ajax function
pop(cat, typ)
});
function getURLParameter(url, name) {
return (RegExp(name + '=' + '(.+?)(&|$)').exec(url)||[,null])[1];
}
function pop(cat, typ) {
$.ajax({
type:'post',
url:site_url()+'/event/deleteEventSingle',
data:{'cat':cat,'type':typ},
async:false,
success:function(result){}
});
}
ライブフィドルの例をチェックしてください http://jsfiddle.net/mayooresan/aY9vy/
これを試して :
function getUrlParams(url) {
var params = {};
url.substring(1).replace(/[?&]+([^=&]+)=([^&]*)/gi,
function (str, key, value) {
params[key] = value;
});
return params;
}
使用法:
function pop(e) {
var url = $(e.target).attr("href");
var params = getUrlParams(url);
var cat= params["cat"];
var type= params["typ"];
alert(cat);
alert(type);
}