Search code examples
javascriptjqueryajaxsimplemodal

Simplemodal ajax

i have this function roadajax() which appends data to a .modal-content

$(".modal-content").append("text here");

this .modal-content is set to display:none;

then i add OnClick to element , so when i click that element it opens a modal on .modal-content and show me its content on the modal

$(document).on("click", ".element", function() {
    // remove the current active element
    $(".element").removeClass("active-element");
    // add active class on the current element
    $(this).addClass("active-element");
    curitem = $(this).attr("id");
    roadajax(); // assigns content to .modal-content
    // showing the current element modal
    $(".active-element .modal-content").modal();
});

when i click on .element event handler fires up and i see modal ! but no data what so ever so i inspected it using firebug ..

if i removed .modal() call from my event handler normal logic happens and .modal-content is populated by raodajax() but if i re-added .modal() call .. roadajax() seems to not be able to load data into .modal-content .. some kind of a race condition

i want to know how i can show my data into modal .. is there is any other way ?

Solution

  • You can use direct Ajax Model by placing this syntax:

    e.g.

    function roadajax() {
     // This is In-built Ajax Functionality Provide by SimpleModel
     $('.modal-content').load('http://yoursite.com/page.html').modal();
}

    This will automatically Load your page inside Model.