CODEWITHSUNDEEP
jquery
user1315422
user1315422

Reputation: 47

JQuery Div Div id value (this)

I am using Simple Model (http://simplemodal.plasm.it/#examples) on a website i am designing and want to create pop up windows dynamically using AJAX.

The issue i have is getting the ID of the div that's inside the top div. I have the following HTML:

<div id="modal-ajax">
    <a href="#" id='test1:test2:test:3'>Link 1</a>
    <a href="#" id='test4:test5:test:6'>Link 2</a>
    <a href="#" id='test7:test8:test:9'>Link 3</a>
</div>

and jQuery:

window.addEvent("domready", function(e){
$("modal-ajax").addEvent("click", function(e){
    var values = this.id.split(':');
        var DisplayType = values[0];
        var ID = values[1];
        var three = values[2];

    e.stop();
    var SM = new SimpleModal({"btn_ok":"Confirm button", "width":600});
    SM.show({
        "model":"modal-ajax",
        "title":"Are you sure you want to delete this?",
        "param":{
        "url":"test.ajax.php",
        "onRequestComplete": function(){ }
        }
    });
})

});

so if i click link 1 i should get the value test1:test2:test:3 which i can then split on ":".

I need to do the above so i can send the split parts over AJAX to a php page that i can then draw a table from.

it seems no matter what i try i can not get the value test1:test2:test:3 when i click Link 1

Upvotes: 0

Views: 59

Answers (2)

anAgent
anAgent

Reputation: 2780

A better solution might be to use a data-* attribute(s) to make the code a little cleaner.

Example

<div id="modal-ajax">
    <a href="#" class="some-actionable-class" data-value1="test1" data-value2="test2">Link 1</a>
    <a href="#" class="some-actionable-class" data-value1="test1" data-value2="test2">Link 2</a>
    <a href="#" class="some-actionable-class" data-value1="test1" data-value2="test2">Link 3</a>
</div>

JavaScript

(function(){
    var getElementData = function(element) {
        return {
            value1: $(element).data('value1'),
            value2: $(element).data('value2')
        };
    }
    $('.some-actionable-class').on('click', function(e) {
        e.preventDefault();

        var data = getElementData(this);

        var SM = new SimpleModal({"btn_ok":"Confirm button", "width":600});
        SM.show({/* ... code removed .. */ });
    });

})();

Upvotes: 1

akatakritos
akatakritos

Reputation: 9858

For starters, you forgot the leading # in the selector.

But even if that where there. I'd be skeptical it would work because you bound your click event to the div, not the a tags. So when a link is clicked, the event bubbles up to the containing div. Inside your callback, this is bound to the div, not the a.

You probably want to do something like this:

$("#modal-ajax a").on("click", function(e) {
    alert(this.id); //see if this pops up what you expect

    // your code
});

This will bind click handlers to the links themselves.

Upvotes: 1

Related Questions