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

[Q695]

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.

[scootstah]

Any Javascript errors? Is your run_modal() function actually executing?

[CroNiX]

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 August 22, 2015 by CroNiX

[CroNiX]

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/

[Q695]

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'

[scootstah]

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.

[Q695]

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.

[scootstah]

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.

[Q695]

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

[scootstah]

Sure, I just left the href attribute out for the sake of example.