This is quite a complicated one but I’ll try and explain it as best as I can.

I am developing a wordpress site that utilises quite a few jQuery plugins (plupload, jCrop etc).

On some pages there are multiple instances of plupload and some of these instances require the user to be able to crop an image.

To save me writing the same code out multiple times I just use the same jQuery but with variables appended by a php variable.

I created a class that ‘writes’ the required jQuery into the dom and then it can pass in a variable to be used to append the jQuery variables to make them unique.

I then just instantiate multiple objects of that class at different parts on the web page as and when I need that functionality.

For instance (example simplified for clarity)…

On a web page..

<div>
<?php
  $thisUploader = new reqJqueryClass("firstUploader");
  $thisUploader->implementMainUploadPicture;
?>
</div>
<div>
<?php
  $anotherUploader = new reqJqueryClass("secondUploader"); 
  $anotherUploader->implementSecondaryUploadPicture; // This also has crop functionality
?>
</div>

And then the Class takes the parameter passed to it (firstUploader / secondUploader in this case) and writes it to $this->dynamicPartOfVar.

Inside the class I have…

public function implementMainUploadPicture() {
  $this->start_Javascript();
  $this->set_Up_Object_Specfic_Vars();
  $this->run_Plupload_jQuery();
  $this->end_Javascript();
}
public function implementSecondaryUploadPicture() {
  $this->start_Javascript();
  $this->set_Up_Object_Specfic_Vars();
  $this->run_Jcrop_jQuery();
  $this->run_Plupload_jQuery();
  $this->end_Javascript();
}

etc .. etc.. (this is actually more functionality included other than just an upload and crop library)

Then I have methods that simply look like this…

protected function start_Javascript() {
?>
  <script type="text/javascript">
  jQuery(document).ready(function($) {
<?php
}
protected function end_Javascript() {
?>
  });
  </script>
<?php
}
protected function set_Up_Object_Specfic_Vars() {
?>
  var dynamicPartOfVar = "<?php echo $this->dynamicPartOfVar; ?>"; 
// $this->dynamicPartOfVar is firstUploader or secondUploader (or whatever was passed in)
  var imageManipulationObject = ();
<?php
}
public function run_Jcrop_jQuery() {
?>
  imageManipulationObject["myVariable"+dynamicPartOfVar];
  // rest of vars set up the same way
  // so that I can have multiple instances of this jquery
  // on the same page without conflict ....
<?
}
public function run_Plupload_jQuery() {
?>
  imageManipulationObject["anotherVar"+dynamicPartOfVar];
  // rest of vars set up the same way
  // so that I can have multiple instances of this jquery
  // on the same page without conflict ....
<?
}

Even though this is a bit of a code smell it seems to work a treat. My only concern is whether this system will be scalable (I need quite a few upload/jcrop etc objects on one page) or whether it will bog the browser down doing it this way?

I thought that once the site is tested and working then I would copy all the jQuery from the browser, paste it into it’s own file, minify it and then just call it via the header (or footer) as normal?

However, I wondered if there was a “correct” way of achieving the same thing that I’m trying to do here?

I’m self-taught in everything that I’m doing so rarely implement the ‘best practice’ and I don’t know of any other way to achieve what I’m trying to do here?

Thanks for any help you can give me. :-)

Read more here: A simple way to implement multiple use jquery functions


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , ,

Wordpress related questions and answers: