2

I am building a Wordpress plugin to display a list of jobs to a user pulled from a recruiting platform API. On click of a job, a cURL request is sent to the API that pulls the job details as a full HTML page (the online job advertisement). I have everything working fine in terms of pulling the HTML, but I cannot figure out how to display it to the user.

How can I either:

  • Open a new tab to display the HTML pulled from the AJAX request

    or

  • Open the full HTML within a div on the same page (i.e. a modal)

I would prefer to open the HTML in a new page, but don't know how to use jQuery to do this... Opening within the page in a modal is also fine, but as far as I understand iFrames (which I would rather not use anyway), you have to pass a url (and I simply have the full markup). Is there a way to display this within a page, perhaps using canvas? It carries its own links to CSS and Javascript that need to apply only within that sub-page.

EDIT:

As a clarification, I know that I can simply place the HTML within the page. My issue is that it is a full page. This means it has a <head> <body>, and its own CSS links. Just putting it in the page messes with the rest of the CSS and produces invalid HTML.

This is what I already have:

$.post(ajaxurl, data, function(response) {
    $('.sg-jobad-full').html(response);
});

It places the response within the page perfectly well... but it messes up the page by introducing a <body> within a <body> and competing CSS.

robooneus
  • 1,344
  • 8
  • 10

2 Answers2

2

If you put the response in a <div>, it will mess the markup because css/js/meta definitions may not be put into the <body>.

If there is a way to retrieve the data without the markup already beeing in, you could parse the data and let it print via a javascript, which is the method I'd prefere.

According to your comment, you should really go with iframes, all other methods will alter your markup to have <html> tags inside <html>, which is very bad practice. Iframes can be styled just like a <div> element, and it is realy not dirty to use iframes for the purpose you mentioned (it does not load from a foreign host, it is not hidden, it does not track).

<iframe class="job-offers-plugin" src=".../wp-content/plugins/yourplugin/getJobs.php">
</iframe>

Put some style into it like width;height;padding;margin;overflow; place it where you like..

This helps you with the databse:

Using WPDB in standalone script?

Add permalinks to your plugin script:

http://teachingyou.net/wordpress/wordpress-how-to-create-custom-permalinks-to-use-in-your-plugins-the-easy-way/

Community
  • 1
  • 1
Daniel W.
  • 31,164
  • 13
  • 93
  • 151
  • I am already capturing the response of the cURL request... the issue is that it is a full HTML page, i.e. inclusive of , , css links, etc. I need to display this response within an already full page. Echoing the reponse simply puts it inline with the page and causes conflicts with the css of the main-page and the css of the cURL response. It also means invalid HTML. – robooneus Jul 15 '13 at 13:23
  • Aye, this was what I tried originally... but I was having an issue with displaying only the cURL response. I made a php file that would fire the cURL and show only the output, but it wasn't able to get access to the WP database to pull the correct params (client id, etc). Is there a way to create a page in Wordpress with a plugin file that is not within the confines of the theme, without creating a new template? Or how can I use a php file to produce clean output for the iframe? – robooneus Jul 15 '13 at 13:50
  • You need this then: http://stackoverflow.com/questions/5306612/using-wpdb-in-standalone-script – Daniel W. Jul 15 '13 at 14:16
  • Ah, wow. That works fantastically. Could not find the right answer for something like that at all. Is there any issue with presenting this to the user? i.e. that they would then see the full path to the file in the url bar (wp-content/plugins/plugin-name/includes/...)? Can easily pass the right id for which item was clicked as a query string, just need to know if there is some security issue with this. – robooneus Jul 15 '13 at 14:29
  • Someone could get the iframe URL from the sourcecode and open that in a new tab, but is this a problem? As long as you care for common mysql injection and validate your variables, there is no security issue. – Daniel W. Jul 15 '13 at 14:36
  • That was my question -- was thinking of just opening it in its own tab (no iframes to keep things simple). Just wanted to be sure that showing the full url like that wasn't an issue (as most wordpress pages have abstracted urls). Am just building the list with link as link to the file?jobid=xxxxx. Then the file can run the cURL from there. Works great! – robooneus Jul 15 '13 at 14:44
  • If my answer solved your problem, don't hesitate to accept it. I think that you can add an abstracted url like `/joboffer/xxxxx`, found this: http://zagar.biz/2011/wordpress-creating-custom-permalinks/ – Daniel W. Jul 15 '13 at 14:47
  • http://teachingyou.net/wordpress/wordpress-how-to-create-custom-permalinks-to-use-in-your-plugins-the-easy-way/ – Daniel W. Jul 15 '13 at 14:49
  • Excellent - thanks. Will be nice to abstract the URL a bit for production. – robooneus Jul 15 '13 at 14:53
0

If you get the full HTML in an jQuery.ajax(...) call, you can always just show it in a certain div on your page.

$.ajax({
   success: function (resp){
       // resp should be your html code
       $("#div").html(resp);
   }
});

You can use the $(selector).html(htmlCode) everywhere you want. You can insert it into modals, divs, new pages...

If you have to inject a whole HTML page you can: strip the tags you don't need or use an iframe and write the content to that iframe: How to set HTML content into an iframe

iframes aren't my favourite thing... but it's a possibility

Community
  • 1
  • 1
Arninja
  • 735
  • 1
  • 12
  • 24
  • If it is a whole page you can always use an iframe. It's not something pretty, but it should work just fine. Even in IE8 / IE9. – Arninja Jul 15 '13 at 13:59