Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Embed Within AJAX Site?

svtguy88svtguy88 New
edited December 2012 in Vanilla 2.0 - 2.8

Okay, what I'm trying to do seems simple enough.

I have a div on my page which has content loaded to it dynamically via jQuery.load() and PHP include statements. For example, the when the user clicks on a navigation link on my home page, jQuery.load() loads the appropriate PHP file to the content div.

One of these navigation links loads a file called "forum.php" to the content div. This "forum.php" file contains a reference to the embed javascript for Vanilla. It's my thinking that using jQuery.load() to load this file to the content div should fill the div with the embedded Vanilla forum. However, rather than filling the content div, the entire page is replaced with nothing -- it is blank. The original page's DOM gets cleared, and the new one contains an iframe created by the embed plugin. This iframe is empty (it has #document, and tags, but it's all empty).

I assume it has something to do with the embed script taking over the whole window, and not just the content div that it was loaded into. Does anyone have any ideas or a solution?

I did some searching, and other people seem to be having issues embedding Vanilla into an AJAX site too.

Let me know if I can clarify anything...I'm not sure how exactly to explain this.

Comments

  • Options

    maybe you could post some of your code for an example.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Options
    svtguy88svtguy88 New
    edited December 2012

    I posted another thread with a better explanation. I was going to edit this one, but while I was editing it, my 15 minute window ran out, and it wouldn't let me save my changes.

    New thread is here: [http://vanillaforums.org/discussion/22200/use-embed-plugin-to-embed-vanilla-into-ajax-div]. I will post the key parts of my code later today.

  • Options

    @svtguy88 i've tried this one before, on my case it's a custom software, what i did is i embedded the custom software to vanilla instead and used custom pages for the other custom software's pages..

  • Options

    It not going to work due to how the script is called.

    Besides embedded or not it follows an url scheme (embedded uses # prefexed schemes like many dynamic apps).

    Embedded is essentially a dynamic ap in itself, so you don't really want a whole lot else there, you are working at cross purposes. it is really just so you can have a header an footer an sidebar.

    One of the mistake people make is they try an do everything with ajax reproach when ajax is really about fetching bits of data. yes content too, but it is meant to be atomic. that the whole point of being dynamic, if you are goign to change the whole page, then you are doing it wrong, as that defeats the point of being dynamic, you might as well be loading in an iframe. It doesn't usually improve the interface, in fact it can make it markedly worse. User really hate it when people render the functions of their browser useless.

    If you want to do it you should load the embedded forum on the page an just hide it. You can load it dynamically if you know how, by loading it again is pointless as the app is controlled through a iframe anyway, simply hide and reveal. It is convoluted to be calling a sever side script like that. That is an unnecessary step, because you are fetching something only to fetch something.

    grep is your friend.

  • Options

    I'm entirely open to other suggestions -- this is just the pat that I wandered down. My end goal is simply to have the header, footer and navigation bar remain persistent the entire time the user is on the site. If I can avoid, refreshing the whole page, I'd like to.

    I'm entirely new to PHP, and using it the way I am right now (jQuery mouse event loading a PHP script that loads a page) is a combination of some questions/answers on Stack Overflow. I had originally just used jQuery.load() to fill my content div, skipping any sort of PHP all together, but I didn't like the idea of using the URL hash (#forum, for example) for navigation.

  • Options
    x00x00 MVP
    edited December 2012

    The embed system has it own url scheme. it is a bit more than having an iframe.

    So it will use # but if you are using it for something else when you click on the forum links, the url scheme will be enforced.

    You can call the server, but like I said, the embed method already loads through scripting, so you don't need to place this on another php page, which you request asymmetrically.

    You only need to create the illusion of load through the same div.

    grep is your friend.

  • Options

    You may have to call a few thing like the height adjust each time you reveal.

    grep is your friend.

  • Options

    I had thought about showing/hiding the forum as necessary, but isn't that going to put a significant amount of overhead on the page? I'm trying to keep this as light as possible (mobile-friendly).

  • Options

    On a side note, I played a little more with simply putting Vanilla's index.php in an iframe, and it is working alright. There are some bugs to work out, but are there any real issues with simply putting vanilla in an iframe? I'd obviously have to write some code to allow for linking to threads and such, but it seems possible...

  • Options

    @svtguy88 said:
    I had thought about showing/hiding the forum as necessary, but isn't that going to put a significant amount of overhead on the page? I'm trying to keep this as light as possible (mobile-friendly).

    why? You are loading it once, you could even delay the load.

    Dynamic by its nature implies it is likely to change, the embed code is not going to change. You are missing the point of ajax.

    @svtguy88 said:
    On a side note, I played a little more with simply putting Vanilla's index.php in an iframe, and it is working alright. There are some bugs to work out, but are there any real issues with simply putting vanilla in an iframe? I'd obviously have to write some code to allow for linking to threads and such, but it seems possible...

    This is reinventing the wheel and the embed code does this better. Why not just put the ebbed code instead?

    Personally I would advise against the embed code in an SEO critical scenario, but just a iframe on its own is a pretty rubbish user experience.

    Your mileage may vary.

    grep is your friend.

  • Options

    No argument here that an iframe isn't the mot user-friendly way to do this -- just an idea, seeing as the embed script puts it in a frame.

    The forum is just one part of this site (which is for an automotive tuning shop), so I was trying to stick with the same "content loading" mechanism to keep things simple. Other parts of the site will require PHP scripting (a page for displaying dyno runs, for example), and I thought it would just be easier to set the forum up to match the way the rest of the pages are dealt with.

    If this isn't an option, it's not the end of the world. This site is really more of a learning experience for me than anything. The good thing about doing work for free (the shop is owned by a friend) is that you get to do/redo things until you are happy -- no paying client to satisfy by yesterday.

    Thanks for all of the comments, by the way. The Vanilla community seems pretty solid thus-far.

Sign In or Register to comment.