Jump to content
Q695

How to make a request to plop into a modal with AJAX

Recommended Posts

Here's what I'm starting with:

 

javascript:

$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false
    });
});

function run_modal( href, url_data ) {
//    $("#dialog").dialog("open");
    $( "#dialog" ).dialog( "open" );
    alert(href+"?"+url_data);
}

PHP:

echo "
<div id='dialog' title='Blog Post Viewer'></div>
";
function modalize($link_txt, $href, $url_data){
    //<a href='?$url_data' onmousedown='run_modal()' onclick='return false' >$link_txt</a>
    echo "
<a href='? $url_data ' onclick='return false' onmousedown=' run_modal ( \" $href \" , \" $url_data \" );'> $link_txt </a>
 ";


}

I'm struggling to make the modal popup.

 

From there I plan to plug in my own generic ajax loader to request the data to be populated in the modal.

Share this post


Link to post
Share on other sites

Try removing the return false for the onclick event and moving the run_modal() to the onclick event. If you need to you can return false at the end of your run_modal() function.

<a href='? $url_data ' onclick='run_modal ( \" $href \" , \" $url_data \" );' > $link_txt </a>
Edited by CroNiX

Share this post


Link to post
Share on other sites

Here's a better approach though, that uses more pure jquery than you are using. It also tremendously simplifies things.

 

 

<div id='dialog' title='Blog Post Viewer'></div>
 
//Just use the href, and create a html data attribute to hold the "url_data". Give them all the same class and jQuery will pick it all up using my function which is automatically invoked.
<a href='?a=a&b=b' data-urldata="data a" class="modalize"> link text a</a>
<a href='?c=c&d=d' data-urldata="data b" class="modalize"> link text b</a>
 
$(function() {
    
    //create a click event for all links with class of "modalize"
    $('a.modalize').on('click', function(e) {
        e.preventDefault(); //jQuery equiv for return false for click event
        
        var link = $(this); //the clicked link
        
        //grab the link href
        var href = link.attr('href');
        
        //grab the link urldata
        var urldata = link.data('urldata');
       
        alert('href: ' + href + "\nData: " + urldata);
        
        //now do the ajax, open dialog box, etc
        $( "#dialog" ).dialog({
          autoOpen: false
        });
    });
});
 

Example:

https://jsfiddle.net/tagwgLch/1/

Share this post


Link to post
Share on other sites

Here's a better approach though, that uses more pure jquery than you are using. It also tremendously simplifies things.

 

 

<div id='dialog' title='Blog Post Viewer'></div>
 
//Just use the href, and create a html data attribute to hold the "url_data". Give them all the same class and jQuery will pick it all up using my function which is automatically invoked.
<a href='?a=a&b=b' data-urldata="data a" class="modalize"> link text a</a>
<a href='?c=c&d=d' data-urldata="data b" class="modalize"> link text b</a>
 
$(function() {
    
    //create a click event for all links with class of "modalize"
    $('a.modalize').on('click', function(e) {
        e.preventDefault(); //jQuery equiv for return false for click event
        
        var link = $(this); //the clicked link
        
        //grab the link href
        var href = link.attr('href');
        
        //grab the link urldata
        var urldata = link.data('urldata');
       
        alert('href: ' + href + "\nData: " + urldata);
        
        //now do the ajax, open dialog box, etc
        $( "#dialog" ).dialog({
          autoOpen: false
        });
    });
});
 

Example:

https://jsfiddle.net/tagwgLch/1/

 

This would work, if I wasn't trying to run a modal instead of an alert for presentation reasons: https://jqueryui.com/dialog/#modal-form

 

The error I'm getting is: Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

Share this post


Link to post
Share on other sites

You're trying to run your function before jQuery is initialized then. You'll either want to place your function inside of jQuery's $(function(){ }); block, or actually use jQuery as it was intended, like CroNiX has pointed out. The alert he used is just an example, you can put whatever you want inside there.

Share this post


Link to post
Share on other sites

When I put the run_modal( href, url_data ) inside the jquery function() it says:
Uncaught Reference Error: run_modal is not defined

 

when outside It says:

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

 

when I remove the return false the hyperlink behaves as it always has.

 

I'm just trying to be able to pass the function variables in through the "old method" to make the function more understandable (maybe I need to see a video on how exactly the jquery variable system works).

 

vision:

you have X possible modals that can be triggered you're trying to only trigger 1 modal that will use the variables it receives to run its ajax lookup.

Share this post


Link to post
Share on other sites

You can try defining your function in the jQuery namespace.


$(function(){
$.modalize = function(href, url_data){
alert(href + '?' + url_data);
};
});
<a onclick="$.modalize('the-url', 'the-data');">Click Me</a>
Be careful with that approach though, so that you don't pollute the global namespace. If you want to do this with a bunch of functions then create a single property to put all of your functions under. Like, $.yourProjectName.modalize, $.yourProjectName.someOtherFunction.

Share this post


Link to post
Share on other sites

If I do that, I need a way to also search with JavaScript turned off.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.