snipt

Ctrl+h for KB shortcuts

Text only

Useful functions, ajax file upload

// old style confirm
if (confirm('Your question')) { 
 // do things if OK
}

// reset form
form.trigger('reset');

// prevent the default event from happening
.preventDefault();

// ajax file upload
var formData = new FormData($('#'+ id + 'form')[0]);

$.ajax({
       url: '/company/upload', 
       type: 'POST',
       data: formData, 
       contentType: false, 
       processData: false, 
       cache: false
   }).done(function(response) {
      if ( response == 1 )
      {
          $('#'+ id + 'form').trigger("reset");
          $('#image-upload-msg').html('Image uploaded successfully');
          $('#image-upload-msg').show();
          $('#img' + id).attr('src', '<?php echo Yii::$app->request->BaseUrl . '/companyimages/';?>' + id + '.jpg?id=' + Math.random());
      }   
   }); 
   
   
// scrollable height of a div
$('.cs-message').prop('scrollHeight')


       CorporateSpotlight: function($element) {
			var handleViewMore = function($tab) {
				var maxHeight = ($tab.css('max-height')).replace(/\D/g,'');
				var contentHeight = Math.round($tab.height());
				if (contentHeight >= maxHeight) {
					$('.cs-view-more', $tab).show();
				}

				$('.cs-view-more input[type="button"]', $tab).unbind("click");
				$('.cs-view-more input[type="button"]', $tab).click(function(){
					$tab.toggleClass('expanded');
					$(this).attr('value', $tab.hasClass('expanded') ? 'View Less' : 'View More');
				});
			};
			var $cs = $element.parents('#corporatespotlight');
			var iterations = 11;
			var iteration = function($tab) {
				if($cs.height()!==0) {
					handleViewMore($tab);
				} else if(--iterations > 0) {
					//If the parent has no height, that means it is display:none
					//due to being faded out, and then faded in as part of a preview.
					//Here we use a cheap hack to fire when the display has changed
					//to block.  The "right" way would be to override jQuery's fadeIn
					//function to fire an event when the fadeIn completes so that we
					//could listen for that and do our work then.  This hack will
					//suffice for now.
					window.setTimeout(function() { iteration($tab); }, 100);
				}
			};
			if($element.hasClass('cs-title-single')) {
				iteration($('.cs-message', $element.parent()));
			} else if($element.hasClass('cs-title')) {
				if($element.parent('li').hasClass('active')) {
					iteration($($element.attr('href')));
				}
				$element.click(function() {
					handleViewMore($($element.attr('href')));
				});
			} else {
				$element.change(function() {
					handleViewMore($($element.val()));
				});
			}
		}
    };
https://snipt.net/embed/46565c36e9ee3a613e98d89be8acd926/
/raw/46565c36e9ee3a613e98d89be8acd926/
46565c36e9ee3a613e98d89be8acd926
text
Text only
82
2019-06-24T06:46:46
True
False
False
/api/public/snipt/143125/
useful-functions-b6df2e9d
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a> <a href="#L-34">34</a> <a href="#L-35">35</a> <a href="#L-36">36</a> <a href="#L-37">37</a> <a href="#L-38">38</a> <a href="#L-39">39</a> <a href="#L-40">40</a> <a href="#L-41">41</a> <a href="#L-42">42</a> <a href="#L-43">43</a> <a href="#L-44">44</a> <a href="#L-45">45</a> <a href="#L-46">46</a> <a href="#L-47">47</a> <a href="#L-48">48</a> <a href="#L-49">49</a> <a href="#L-50">50</a> <a href="#L-51">51</a> <a href="#L-52">52</a> <a href="#L-53">53</a> <a href="#L-54">54</a> <a href="#L-55">55</a> <a href="#L-56">56</a> <a href="#L-57">57</a> <a href="#L-58">58</a> <a href="#L-59">59</a> <a href="#L-60">60</a> <a href="#L-61">61</a> <a href="#L-62">62</a> <a href="#L-63">63</a> <a href="#L-64">64</a> <a href="#L-65">65</a> <a href="#L-66">66</a> <a href="#L-67">67</a> <a href="#L-68">68</a> <a href="#L-69">69</a> <a href="#L-70">70</a> <a href="#L-71">71</a> <a href="#L-72">72</a> <a href="#L-73">73</a> <a href="#L-74">74</a> <a href="#L-75">75</a> <a href="#L-76">76</a> <a href="#L-77">77</a> <a href="#L-78">78</a> <a href="#L-79">79</a> <a href="#L-80">80</a> <a href="#L-81">81</a> <a href="#L-82">82</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>// old style confirm </span><span id="L-2"><a name="L-2"></a>if (confirm(&#39;Your question&#39;)) { </span><span id="L-3"><a name="L-3"></a> // do things if OK </span><span id="L-4"><a name="L-4"></a>} </span><span id="L-5"><a name="L-5"></a> </span><span id="L-6"><a name="L-6"></a>// reset form </span><span id="L-7"><a name="L-7"></a>form.trigger(&#39;reset&#39;); </span><span id="L-8"><a name="L-8"></a> </span><span id="L-9"><a name="L-9"></a>// prevent the default event from happening </span><span id="L-10"><a name="L-10"></a>.preventDefault(); </span><span id="L-11"><a name="L-11"></a> </span><span id="L-12"><a name="L-12"></a>// ajax file upload </span><span id="L-13"><a name="L-13"></a>var formData = new FormData($(&#39;#&#39;+ id + &#39;form&#39;)[0]); </span><span id="L-14"><a name="L-14"></a> </span><span id="L-15"><a name="L-15"></a>$.ajax({ </span><span id="L-16"><a name="L-16"></a> url: &#39;/company/upload&#39;, </span><span id="L-17"><a name="L-17"></a> type: &#39;POST&#39;, </span><span id="L-18"><a name="L-18"></a> data: formData, </span><span id="L-19"><a name="L-19"></a> contentType: false, </span><span id="L-20"><a name="L-20"></a> processData: false, </span><span id="L-21"><a name="L-21"></a> cache: false </span><span id="L-22"><a name="L-22"></a> }).done(function(response) { </span><span id="L-23"><a name="L-23"></a> if ( response == 1 ) </span><span id="L-24"><a name="L-24"></a> { </span><span id="L-25"><a name="L-25"></a> $(&#39;#&#39;+ id + &#39;form&#39;).trigger(&quot;reset&quot;); </span><span id="L-26"><a name="L-26"></a> $(&#39;#image-upload-msg&#39;).html(&#39;Image uploaded successfully&#39;); </span><span id="L-27"><a name="L-27"></a> $(&#39;#image-upload-msg&#39;).show(); </span><span id="L-28"><a name="L-28"></a> $(&#39;#img&#39; + id).attr(&#39;src&#39;, &#39;&lt;?php echo Yii::$app-&gt;request-&gt;BaseUrl . &#39;/companyimages/&#39;;?&gt;&#39; + id + &#39;.jpg?id=&#39; + Math.random()); </span><span id="L-29"><a name="L-29"></a> } </span><span id="L-30"><a name="L-30"></a> }); </span><span id="L-31"><a name="L-31"></a> </span><span id="L-32"><a name="L-32"></a> </span><span id="L-33"><a name="L-33"></a>// scrollable height of a div </span><span id="L-34"><a name="L-34"></a>$(&#39;.cs-message&#39;).prop(&#39;scrollHeight&#39;) </span><span id="L-35"><a name="L-35"></a> </span><span id="L-36"><a name="L-36"></a> </span><span id="L-37"><a name="L-37"></a> CorporateSpotlight: function($element) { </span><span id="L-38"><a name="L-38"></a> var handleViewMore = function($tab) { </span><span id="L-39"><a name="L-39"></a> var maxHeight = ($tab.css(&#39;max-height&#39;)).replace(/\D/g,&#39;&#39;); </span><span id="L-40"><a name="L-40"></a> var contentHeight = Math.round($tab.height()); </span><span id="L-41"><a name="L-41"></a> if (contentHeight &gt;= maxHeight) { </span><span id="L-42"><a name="L-42"></a> $(&#39;.cs-view-more&#39;, $tab).show(); </span><span id="L-43"><a name="L-43"></a> } </span><span id="L-44"><a name="L-44"></a> </span><span id="L-45"><a name="L-45"></a> $(&#39;.cs-view-more input[type=&quot;button&quot;]&#39;, $tab).unbind(&quot;click&quot;); </span><span id="L-46"><a name="L-46"></a> $(&#39;.cs-view-more input[type=&quot;button&quot;]&#39;, $tab).click(function(){ </span><span id="L-47"><a name="L-47"></a> $tab.toggleClass(&#39;expanded&#39;); </span><span id="L-48"><a name="L-48"></a> $(this).attr(&#39;value&#39;, $tab.hasClass(&#39;expanded&#39;) ? &#39;View Less&#39; : &#39;View More&#39;); </span><span id="L-49"><a name="L-49"></a> }); </span><span id="L-50"><a name="L-50"></a> }; </span><span id="L-51"><a name="L-51"></a> var $cs = $element.parents(&#39;#corporatespotlight&#39;); </span><span id="L-52"><a name="L-52"></a> var iterations = 11; </span><span id="L-53"><a name="L-53"></a> var iteration = function($tab) { </span><span id="L-54"><a name="L-54"></a> if($cs.height()!==0) { </span><span id="L-55"><a name="L-55"></a> handleViewMore($tab); </span><span id="L-56"><a name="L-56"></a> } else if(--iterations &gt; 0) { </span><span id="L-57"><a name="L-57"></a> //If the parent has no height, that means it is display:none </span><span id="L-58"><a name="L-58"></a> //due to being faded out, and then faded in as part of a preview. </span><span id="L-59"><a name="L-59"></a> //Here we use a cheap hack to fire when the display has changed </span><span id="L-60"><a name="L-60"></a> //to block. The &quot;right&quot; way would be to override jQuery&#39;s fadeIn </span><span id="L-61"><a name="L-61"></a> //function to fire an event when the fadeIn completes so that we </span><span id="L-62"><a name="L-62"></a> //could listen for that and do our work then. This hack will </span><span id="L-63"><a name="L-63"></a> //suffice for now. </span><span id="L-64"><a name="L-64"></a> window.setTimeout(function() { iteration($tab); }, 100); </span><span id="L-65"><a name="L-65"></a> } </span><span id="L-66"><a name="L-66"></a> }; </span><span id="L-67"><a name="L-67"></a> if($element.hasClass(&#39;cs-title-single&#39;)) { </span><span id="L-68"><a name="L-68"></a> iteration($(&#39;.cs-message&#39;, $element.parent())); </span><span id="L-69"><a name="L-69"></a> } else if($element.hasClass(&#39;cs-title&#39;)) { </span><span id="L-70"><a name="L-70"></a> if($element.parent(&#39;li&#39;).hasClass(&#39;active&#39;)) { </span><span id="L-71"><a name="L-71"></a> iteration($($element.attr(&#39;href&#39;))); </span><span id="L-72"><a name="L-72"></a> } </span><span id="L-73"><a name="L-73"></a> $element.click(function() { </span><span id="L-74"><a name="L-74"></a> handleViewMore($($element.attr(&#39;href&#39;))); </span><span id="L-75"><a name="L-75"></a> }); </span><span id="L-76"><a name="L-76"></a> } else { </span><span id="L-77"><a name="L-77"></a> $element.change(function() { </span><span id="L-78"><a name="L-78"></a> handleViewMore($($element.val())); </span><span id="L-79"><a name="L-79"></a> }); </span><span id="L-80"><a name="L-80"></a> } </span><span id="L-81"><a name="L-81"></a> } </span><span id="L-82"><a name="L-82"></a> }; </span></pre></div> </td></tr></table>
javascript, jquery
--- 
+++ 
@@ -31,4 +31,52 @@
    
    
 // scrollable height of a div
-$('.cs-message').prop('scrollHeight')+$('.cs-message').prop('scrollHeight')
+
+
+       CorporateSpotlight: function($element) {
+			var handleViewMore = function($tab) {
+				var maxHeight = ($tab.css('max-height')).replace(/\D/g,'');
+				var contentHeight = Math.round($tab.height());
+				if (contentHeight >= maxHeight) {
+					$('.cs-view-more', $tab).show();
+				}
+
+				$('.cs-view-more input[type="button"]', $tab).unbind("click");
+				$('.cs-view-more input[type="button"]', $tab).click(function(){
+					$tab.toggleClass('expanded');
+					$(this).attr('value', $tab.hasClass('expanded') ? 'View Less' : 'View More');
+				});
+			};
+			var $cs = $element.parents('#corporatespotlight');
+			var iterations = 11;
+			var iteration = function($tab) {
+				if($cs.height()!==0) {
+					handleViewMore($tab);
+				} else if(--iterations > 0) {
+					//If the parent has no height, that means it is display:none
+					//due to being faded out, and then faded in as part of a preview.
+					//Here we use a cheap hack to fire when the display has changed
+					//to block.  The "right" way would be to override jQuery's fadeIn
+					//function to fire an event when the fadeIn completes so that we
+					//could listen for that and do our work then.  This hack will
+					//suffice for now.
+					window.setTimeout(function() { iteration($tab); }, 100);
+				}
+			};
+			if($element.hasClass('cs-title-single')) {
+				iteration($('.cs-message', $element.parent()));
+			} else if($element.hasClass('cs-title')) {
+				if($element.parent('li').hasClass('active')) {
+					iteration($($element.attr('href')));
+				}
+				$element.click(function() {
+					handleViewMore($($element.attr('href')));
+				});
+			} else {
+				$element.change(function() {
+					handleViewMore($($element.val()));
+				});
+			}
+		}
+    };
--- 
+++ 
@@ -27,4 +27,8 @@
           $('#image-upload-msg').show();
           $('#img' + id).attr('src', '<?php echo Yii::$app->request->BaseUrl . '/companyimages/';?>' + id + '.jpg?id=' + Math.random());
       }   
-   }); +   }); 
+   
+   
+// scrollable height of a div
+$('.cs-message').prop('scrollHeight')
--- 
+++ 
@@ -6,6 +6,8 @@
 // reset form
 form.trigger('reset');
 
+// prevent the default event from happening
+.preventDefault();
 
 // ajax file upload
 var formData = new FormData($('#'+ id + 'form')[0]);
--- 
+++ 
@@ -2,6 +2,9 @@
 if (confirm('Your question')) { 
  // do things if OK
 }
+
+// reset form
+form.trigger('reset');
 
 
 // ajax file upload
--- 
+++ 
@@ -1,4 +1,25 @@
 // old style confirm
 if (confirm('Your question')) { 
  // do things if OK
-}+}
+
+
+// ajax file upload
+var formData = new FormData($('#'+ id + 'form')[0]);
+
+$.ajax({
+       url: '/company/upload', 
+       type: 'POST',
+       data: formData, 
+       contentType: false, 
+       processData: false, 
+       cache: false
+   }).done(function(response) {
+      if ( response == 1 )
+      {
+          $('#'+ id + 'form').trigger("reset");
+          $('#image-upload-msg').html('Image uploaded successfully');
+          $('#image-upload-msg').show();
+          $('#img' + id).attr('src', '<?php echo Yii::$app->request->BaseUrl . '/companyimages/';?>' + id + '.jpg?id=' + Math.random());
+      }   
+   }); 
1
2
3
4
5
6
7
--- 
+++ 
@@ -0,0 +1,4 @@
+// old style confirm
+if (confirm('Your question')) { 
+ // do things if OK
+}