Hello again,
I think I’ve been sitting here for the past 14 hours trying to figure out how to get the favorites module used with Ajax. This is driving me crazy. :-(
I am using jQuery for my JavaScript/Ajax needs but I’m a total beginner by all means and on every end.
Anyway, I hope (if I prayed, I’d have said I pray! But I don’t, so this will have to do) that any of you masters of the trade can help me in my effort to get this to work.
The task seems simple. I would like to have a dialog box appear upon clicking the appropiate link with the succes/error message that is stored in a template of its own.
I did manage to get as far as having the message display, “An entry id must be provided”. And I think this is where my problem seems to lie. I do not know for the life of me how I can make the entry_id get recognized by the ajax call.
So, here is the JavaScript code I am using:
$().ready(function() {
// select + reference "triggering element" -- will pass to $.jqm()
var triggers = $('a.ex3bTrigger')[0];
// NOTE; we could have used document.getElementById(), or selected
// multiple elemets with $(..selector..) and passed the trigger
// as a jQuery object. OR, just include the string '#ex3btrigger'
// as the trigger parameter (as typically demonstrated).
// NOTE; we supply a target for the ajax return. This allows us
// to keep the structure of the alert window. An element can
// also be passed (see the documentation) as target.
$('#ex3b').jqm({
trigger: triggers,
ajax: '/classifieds/favorite_add/' + $('a[@id=entry_id]'),
target: 'div.jqmAlertContent',
overlay: 0
});
// Close Button Highlighting. IE doesn't support :hover. Surprise?
if($.browser.msie) {
$('div.jqmAlert .jqmClose').hover(
function(){ $(this).addClass('jqmCloseHover'); },
function(){ $(this).removeClass('jqmCloseHover'); });
}
});
</script>
Then I have the div that should display the success/error message
<div class="jqmAlert" id="ex3b">
<div id="ex3b" class="jqmAlertWindow">
<div class="jqmAlertTitle clearfix">
<h1>Did you know?</h1><a href="#" class="jqmClose"><em>Close</em></a>
</div>
<div class="jqmAlertContent">
<p>Please wait... <img src=".../images/loading.gif" alt="loading" /></p>
</div>
</div>
And here is the link:
<a href="{path='/classifieds/favorite_add'}{entry_id}" class="ex3bTrigger" id="{entry_id}">Add</a>
I will explain what I have done.
1. assign the entry id to the anchor that will be clicked: id="{entry_id}”
2. construct the URL within Ajax: ajax: ‘/classifieds/favorite_add/’ + $(’a[@id=entry_id]’), (obviously horribly wrong). When I remove everything after the slash, it works, albeit outputs the error message I listed above ("An entry id must be provided").
The gist (I think) is that I need to find out how I can append the entry_id or url_title to the link.
I am hoping that some of you may have worked with the module in conjunction with jQuery or simply know 16 tons more of what I know.
Thanks a ton,
Maleika
PS: I am also willing to pay if anyone can help me understand this or is even willing to take a look at my code.
