Using jQuery post() or load() within a Wordpress plugin

Question

Hi, I am developing a plugin and have a quick question...I first developed my plugin as an individual 'webpage' and am now integrating (wrapping) it into a WP plugin. It all functioned correctly before WP and almost functions correctly now but I have run into an interesting issue. Anyways, to my question...is there some sort of issue in using a jQuery .post() function from within the WP sidebar? I am trying to do this type of thing...

 jQuery.post("php/draw_calendar.php",
 {month: currentMonth, year:
 currentYear - 2000, days:
 daysInMonth}, function(data){
      jQuery("#Calender").html(data);
      jQuery( "#eventDialog" ).dialog({ autoOpen: false, resizable: false,
 width: 300, minHeight: 200 });
    jQuery( "#eventDialog" ).bind(
 "dialogopen", function(event, ui) {});
   });

Everything in the jQuery works fine except that it seems that the data returned from the file is never added to the HTML and all that is returned is 'This is a Variable'.

I think this may have to do something with the how the paths might work in jQuery and Wordpress but I am at a bit of a loss on what to do. I haven't seen any other info on this on the web so maybe I am just doing something dumb.

Thanks.

Answer 1

You should fetch the right directory for your WP Plugin with the WP API (bloginfo())... something like:

jQuery.post("<?php bloginfo('wpurl');  ?>/wp-content/plugins/calendar/draw_calendar.php",

As Brad points out you need to use wpurl. Also, as awats wrote, you might be able to just use the WP Constant for the plugin directory. I'm not sure quite how it's formatted:

jQuery.post("<?php echo PLUGINDIR;  ?>/calendar/draw_calendar.php",

Also from the determining plugin and content pages page, it looks like you can use plugin_basename();:

jQuery.post("<?php echo plugin_basename();  ?>/calendar/draw_calendar.php",

Answer 2

Is your plugin run on the admin side? In that case you could consider tapping into the built in AJAX processer. So you could do something like this...

<?php 

   add_action('wp_ajax_update_calender', 'update_calender_callback');

   function update_calender_callback(){
     //perhaps include your calender.php script here
     // and run the operations you need...
   }

  //break the php here in the plugin file and then your js is entered after ?>
<script type="text/javascript">
var calData = {
 month: currentMonth,
 year: currentYear - 2000, 
 days: daysInMonth 
 action: update_calender //notice we send an action here...
}

//The callback function I just copied and pasta from what you had...
jQuery.post('ajaxurl',calData,function(data){
      jQuery("#Calender").html(data);
      jQuery( "#eventDialog" ).dialog({ autoOpen: false, resizable: false,
 width: 300, minHeight: 200 });
    jQuery( "#eventDialog" ).bind(
 "dialogopen", function(event, ui) {});
   })
</script>   

http://codex.wordpress.org/AJAX_in_Plugins

Or for a less elegant, all js solution you could try...

jQuery.post(location.protocol+"//"+location.hostname+"/wp-content/plugins/yourpluginname/scriptname", data, function...