Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am currently learning how to utilize ajax to post information to an external page and jquery to then refresh specific elements on the page based on the processing of the information posted. I am using the bootstrap-ajax plugin to get started with this and everything is working as expected. However, I'm thinking there has to be a better method or practice for creating the server side html then the method I am using.

This is how the ajax plugin works:

  1. You start with an initial php page and define the forms that are to be handled by the ajax plugin and the div's that you want to either replace or refresh once the data from the form has been posted.

  2. The plugin submits the data using ajax to a specified page, which then responds with a json encoded variable consisting of {'divToReplace'=>'renderedHTMLusedForReplacement'}

My current workflow consist of creating the initial php code for a div that will be updated, which typically looks like this:

<div id="<?php echo $itemID; ?>" class="<?php echo $thisDivClass; ?>">
   <div class="span5">
       <h4><?php echo $innerTitle;?></h4>
           .......
           ..........

I then have to copy and modify that div's code and create an additional function that will process the php and then save the html into a variable like this:

$divHtml='<div id="'.$itemID.'" class="'.$thisDivClass.'">
             <div class="span5">
                 <h4>'.$innerTitle.'</h4>';

Needless to say I'm having to do this with a MUCH larger amount of code and it just seems like there must be a better method for somehow rendering the original code and saving the html to a variable without having to copy and modify the entire set of code. I am rather new to ajax, jquery, and json, and I am slightly above novice grade on php so I very well may be going about this process completely wrong or missing something very basic.

Any help, advice, or suggestions would be highly appreciated. Thanks!

share|improve this question

1 Answer

up vote 0 down vote

Based on the documentation, it looks like the plugin does allow you to specify HTML fragments instead of the entire div. And if the snippets you posted are really representative of what you're doing, it looks like the structure of the divs aren't changing but the content is.

So based on what you posted at least, it's likely the case that you can just hand the plugin some key/value pairs that contain selectors for the parts of the div you want to change and the new content you want to go there. That should at least save you from having to recreate the whole div.

I will say that in my experience, it can sometimes be more confusing and can create more work to use plugins like these when you're just starting out with AJAX and jQuery and aren't yet comfortable with the basics. It could wind up actually being easier and less time-consuming (as well as more beneficial to you) to try accomplishing what you want using plain jQuery $.ajax() requests. At least you would be devoting time to learning the basics that apply to nearly all your projects, instead of trying to learn how to use someone's plugin. But, as always, your mileage may vary.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.