tag:blogger.com,1999:blog-71358855009976112432024-03-26T23:38:15.732-07:00Jiansen Lu's Computing BlogOnline computer courses, code, programming tutorial and sidebar information for monitoring Canadian S&P/TSX index. Build friendship and networking. Welcome to visit my blogs often!!! I also have two other sites: <a href="http://www.youtube.com/user/MrJiansenlu/videos?flow=grid&view=0"> YouTube Channel</a> and <a href="https://sites.google.com/site/jiansenphptutorial/jiansen-lu-contact-me-form/my-profile"> Google site.</a>Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.comBlogger948125tag:blogger.com,1999:blog-7135885500997611243.post-1635358410913764032019-03-14T14:08:00.003-07:002019-03-14T14:08:26.112-07:00Using JS Chosen library for multiselect dropdown<jiansen .lu="" gmail.com=""><br /></jiansen>
<jiansen .lu="" gmail.com="">JS Chosen library<br /><a href="https://harvesthq.github.io/chosen/">https://harvesthq.github.io/chosen/</a><br /><br />Example:<br /><a href="https://stackoverflow.com/questions/30190588/html-select-multiple-as-dropdown">https://stackoverflow.com/questions/30190588/html-select-multiple-as-dropdown</a><br /><br />JS and CSS used:<br /><br /><script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js</a>"></script><br /><script src="<a href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js">https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js</a>"></script><br /><link href="<a href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css">https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css</a>" rel="stylesheet"/><br /><br />Initialization<br /><span style="color: blue;"> $(".chosen-select").chosen({<br /> no_results_text: "Oops, nothing found!"<br /> }) </span><br />Set default value<br /><br /><span style="color: blue;"> var str_array = "9999,90";<br /> var dataarray=str_array.split(","); <br /> $("select[name='department1']").val(dataarray).trigger("chosen:updated"); </span><br /><br />php post<br /><span style="color: blue;"> $.ajax({<br /> type: "POST",<br /> //$('select[name="Status"]').val() is cfp_appt_status<br /> data: {'department1': $('select[name="department1"]').val()},<br /> async: true, </span> <br />...........................<br /> Process data example:<br /><span style="color: blue;"> $pad_id = $this->input->post('department1');<br /> $con =1;<br /> foreach ($pad_id as $pad_id0)<br /> {<br /> if($pad_id0=='9999') $con =0;<br /> if($pad_id0==$entry['pad_id']) $con =0;<br /> }<br /> if($con==1) continue;</span></jiansen>Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-24194246968414382152018-12-07T15:40:00.007-08:002018-12-07T15:40:56.452-08:00Design search in a manual in PHP<jiansen .lu="" gmail.com=""><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-0626602611006770",
enable_page_level_ads: true
});
</script>
<br /><br /></jiansen><br />
<br />
<jiansen .lu="" gmail.com="">Design search in a manual in PHP<br /><b>1) Instead of search in MySQL database</b><br />such as<br /><span style="color: blue;">SELECT * FROM tutorial WHERE MATCH(title,description) AGAINST ('left right' IN NATURAL LANGUAGE MODE);</span><br />I design search algorithm in PHP <br /><b>2) Search box</b><br /><span style="color: blue;"> <form method="post" action=""><br /> <input class="" name="search" type="text" placeholder="" <br /> value="<?php echo htmlspecialchars($_POST["search"]); ?>" />&nbsp;&nbsp;<input id="Search_button" value="Search" type="submit"><br /> </form></span><br /><b>3) Replace search word with highlight background red text white , search title and content</b><br /><span style="color: blue;"> $pattern = htmlspecialchars($_POST["search"]);<br /> $replacement = '<span style="background-color:red;color:white;">'.$pattern.'</span>';<br /> $entry['title'] = eregi_replace($pattern, $replacement, $entry['title']); </span><br /><b>4) Using function context_find($haystack, $needle, $context)</b><br />to show searching Word with 10 surrounding Words in first occurance, add link "Read More"<br />add '&search='.$_POST["search"] in link. When the link is clicked, highlight of search word shown in the text.<br /><br /><b>5) Example code index.php</b><br /><span style="color: blue;"> <div id="userGuide_list"><br /> <ul class="paginatedList nav nav-list instlist" style='padding:10px 5px;' ><br /> <?php <br /> $j=0; <br /> foreach($categories as $row){<br /> $cat_each = '<li class="'.$row['NameAbb'].'"><h5 class="strong section">'.$row['Name'].'</h5><ul class="sub-list">';<br /> $category = $UserManualController->loadTableOfContents($row['NameAbb']);<br /> $item = "";<br /> $i==0;<br /> $extra = "";<br /> foreach($category as $entry){<br /> if(trim($_POST["search"])!=""){<br /> $pattern = htmlspecialchars($_POST["search"]);<br /> if (strpos($entry['title'], $pattern) !== false) $i= $i + 1;<br /> $replacement = '<span style="background-color:red;color:white;">'.$pattern.'</span>';<br /> $entry['title'] = eregi_replace($pattern, $replacement, $entry['title']);<br /> $loadContent = $UserManualController->loadContent($entry['content_id']);<br /> $extra = $UserManualController->context_find($loadContent['content'], $pattern, 10);<br /> $extra = eregi_replace($pattern, $replacement, strip_tags($extra));<br /> if(!empty($extra))<br /> $extra ='<div>... '.$extra.' ...<a href="'.SITE_BASE_URL.'/TRACSManual/tracs-manual-content.php?id='.$entry['content_id'].'&search='.$_POST["search"].'"> Read More ...</a></div>';<br /> }<br /> <br /> if(trim($_POST["search"])=="" || strpos($entry['title'], $pattern) !== false|| strpos($loadContent['content'], $pattern) !== false)<br /> $item .= '<li><a href="'.SITE_BASE_URL.'/TRACSManual/tracs-manual-content.php?id='.$entry['content_id'].'&search='.$_POST["search"].'">'.$entry['title'].'</a>'.$extra;<br /> }<br /> $item .= '</ul></li>';<br /> if(trim($_POST["search"])=="" || $item != '</ul></li>' ||$extra!="" ){<br /> echo $cat_each.$item;<br /> $j=$j+1;<br /> } <br /> <br /> }<br /> if($j==0) echo "No match found.";<br /> ?><br /> </ul><br /> </div></span><br /><b>6. Example code of search ten words</b><br />(https://stackoverflow.com/questions/22762797/php-show-searching-word-with-5-surrounding-words)<br /><span style="color: blue;"> function context_find($haystack, $needle, $context) {<br /> <br /> $haystack=' '.$haystack.' ';<br /> if ($i=strpos($haystack, $needle)) {<br /> $start=$i;<br /> $end=$i;<br /> $spaces=0;<br /><br /> while ($spaces < ((int) $context/2) && $start > 0) {<br /> $start--;<br /> if (substr($haystack, $start, 1) == ' ') {<br /> $spaces++;<br /> }<br /> }<br /><br /> while ($spaces < ($context +1) && $end < strlen($haystack)) {<br /> $end++;<br /> if (substr($haystack,$end,1) == ' ') {<br /> $spaces++;<br /> }<br /> }<br /><br /> while ($spaces < ($context +1) && $start > 0) {<br /> $start--;<br /> if (substr($haystack, $start, 1) == ' ') {<br /> $spaces++;<br /> }<br /> }<br /><br /> return(trim(substr($haystack, $start, ($end - $start))));<br /> } else {<br /> return false;<br /> }<br /> } </span></jiansen>Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-5092698340108871052018-11-22T16:23:00.001-08:002018-11-22T16:24:53.080-08:00PHP setting for PHP5.3 and PHP 7 in Ubuntu<jiansen .lu="" gmail.com=""><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-0626602611006770",
enable_page_level_ads: true
});
</script>
<br /></jiansen><br />
<jiansen .lu="" gmail.com=""><b>1) check php version</b><br /> <span style="color: blue;">php -v</span><br /> PHP 7.0.32-0ubuntu0.16.04.1 (cli) ( NTS )<br />Copyright (c) 1997-2017 The PHP Group<br />Zend Engine v3.0.0, Copyright (c) 1998-2017 Zend Technologies</jiansen><br />
<jiansen .lu="" gmail.com=""> with Zend OPcache v7.0.32-0ubuntu0.16.04.1, Copyright (c) 1999-2017, by Zend Technologies</jiansen><br />
<br />
<jiansen .lu="" gmail.com="">Found PHP is updated from 5.3 to 7.</jiansen><br />
<br />
<jiansen .lu="" gmail.com="">need to re-config /etc/php/7.0/apache2/php.ini<br /> 1) Change<br /><span style="color: blue;"> short_open_tag = Off</span><br />to<br /><span style="color: blue;"><span style="background-color: white;">short_open_tag = On</span></span></jiansen><br />
<jiansen .lu="" gmail.com="">2) restart server<br /><span style="color: blue;"> sudo service apache2 restart </span></jiansen>Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com1tag:blogger.com,1999:blog-7135885500997611243.post-59963394049570287272018-11-22T16:19:00.002-08:002018-11-22T16:29:44.619-08:00MySQl, Error Number: 1055 Expression #2 of SELECT list is not in GROUP BY clause and contains nonaggregated column<jiansen .lu="" gmail.com=""><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-0626602611006770",
enable_page_level_ads: true
});
</script>
<br /></jiansen><br />
<jiansen .lu="" gmail.com=""> MySQL version is updatde from 5.5.36 to 5.7.24 in Ubuntu,<br />when I run MySQL script, the following message showed<br /><span style="color: red;">"MySQl, Error Number: 1055 Expression #2 of SELECT list is not in GROUP BY clause and contains nonaggregated column"</span><br /><br />As of MySQL 5.7.5, the default SQL mode includes ONLY_FULL_GROUP_BY which means when you are grouping rows and then selecting <br />something out of that groups, <br />you need to explicitly say which row should that selection be made from. <br />To turn off warning message<br /><b>1. In file /etc/mysql/my.cnf</b><br /> add<br /> <span style="color: red;">sql_mode = STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION</span><br /> under<br /> [mysqld]<br /><b>2. restart mysql server in </b><br /><span style="color: red;">sudo service mysql restart Ubuntu</span></jiansen><br />
<br />
<jiansen .lu="" gmail.com="">Reference:</jiansen><br />
<jiansen .lu="" gmail.com=""><span style="color: red;"><span style="color: black;">https://stackoverflow.com/questions/34115174/error-related-to-only-full-group-by-when-executing-a-query-in-mysql </span></span></jiansen>Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com1tag:blogger.com,1999:blog-7135885500997611243.post-54133206636677338712018-11-22T14:43:00.007-08:002018-11-22T14:43:55.312-08:00Install the PHP module curl Ubuntu<jiansen .lu="" gmail.com=""><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-0626602611006770",
enable_page_level_ads: true
});
</script>
<br /><br /></jiansen><br />
<jiansen .lu="" gmail.com="">I have following error messge for my web server in Ubuntu after CAS server upgrade<br />"You need to install the PHP module curl to be able to use CAS authentication."<br />The following steps is to install the PHP module curl at Ubuntu:<br /><b>1) Install CURL</b><br /><span style="color: blue;">sudo apt-get install curl</span><br /><b>2) restart Apache</b><br /><span style="color: blue;">sudo service apache2 restart</span><br /><b>3) Install PHP CURL</b><br /><span style="color: blue;">sudo apt-get install php-curl</span><br />( note: do not run sudo apt-get install php5-curl<br />it will return message:<br />"Package 'php5-curl' has no installation candidate"<br />In Ubuntu 16.04 default PHP version is 7.0, if you want to use different version then you need to install<br /> PHP package according to PHP version:<br /><br /> PHP 7.2: sudo apt-get install php7.2-curl<br /> PHP 7.1: sudo apt-get install php7.1-curl<br /> PHP 7.0: sudo apt-get install php7.0-curl<br /> PHP 5.6: sudo apt-get install php5.6-curl<br /> PHP 5.5: sudo apt-get install php5.5-curl<br /> <br /> or just run sudo apt-get install php-curl<br />)<br /><b>4) restart Apache</b><br /><span style="color: blue;">sudo service apache2 restart </span><br /><br /><b>Another notes:</b><br />remove php 5 package<br /><b>a) check php5 package</b><br />dpkg -l | grep php5<br />dpkg --purge --force-all php5-curl<br /><b>b) remove</b><br />sudo dpkg --purge --force-all php5-curl<br />sudo apt-get remove php5-*<br />sudo apt-get purge php5-*<br />sudo apt-get autoremove<br />dpkg -l | grep php5<br /><b>c) check unix server OS and version</b><br /> uname -a<br />Linux facts2 4.4.0-139-generic #165-Ubuntu SMP Wed Oct 24 10:58:50 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux<br /><b>d) du -k</b><br />check space used<br /><b>f) df -k </b><br />check space available<br /> </jiansen>Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-35724841402922853262018-11-21T16:10:00.005-08:002018-11-21T16:11:33.551-08:00JS: reload current page and reload parent window<jiansen .lu="" gmail.com=""><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-0626602611006770",
enable_page_level_ads: true
});
</script><br /></jiansen><br />
<b><jiansen .lu="" gmail.com="">Current page is opened in parent window through the link</jiansen></b><br />
<jiansen .lu="" gmail.com="">" <a target=”_blank” href='SITASwapSection.php'> HERE</a>"<br /><b>To reload current page is JS:</b><br /><span style="color: blue;">location.reload();</span><br /><br /><b>To reload parent window </b><br /><span style="color: blue;">window.opener.location.reload();</span><br /><br /><b>More codes:</b><br /><span style="color: blue;">if(confirm('Are you sure to swap '+section1 + ' ' +stakeholder_name1+' with ' +section2 + ' ' +stakeholder_name2 +' in '+course+'? Click OK to proceed. Click Cancel to cancel')) { <br /> $.post("../_ajaxParts/SITAAssign/SITAAssignPOST.php", {funct:'updateSITAswap',<br /> courses_offered_id1:courses_offered_id1,<br /> stakeholder_id1:stakeholder_id1,<br /> section1:section1,<br /> assignedID1:assignedID1,<br /> courses_offered_id2:courses_offered_id2,<br /> stakeholder_id2:stakeholder_id2,<br /> section2:section2,<br /> assignedID2:assignedID2<br /> <br /> }, function(data){<br /> formatJson(data,"div#notice", function(json){<br /> <br /> if(json.data['success']==1){<br /> <br /><span style="color: red;"> location.reload();<br /> window.opener.location.reload();</span><br /> formatJson('{"success":"Swap sections successfully."}', "div#notice", null);<br /> }else if(json.data['success']==-1){<br /> alert("Can not swap due to different ranks"); <br /> }else if(json.data['success']==-2){<br /> alert("Can not swap due to empty contract"); <br /> }else{<br /> formatJson(json.data['error'], "div#notice", null);<br /> }<br /> });<br /><br /> });</span><br /> <br />}<br /><br /><br /> </jiansen>Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-73709070676286915372018-11-16T13:47:00.001-08:002018-11-16T13:47:26.712-08:00Watch Halloween firework from balcony Richmond BC Oct 31 2018<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-0626602611006770",
enable_page_level_ads: true
});
</script>
<br />
<br />
I stayed at home but still have a nice view watching Halloween firework from balcony at Richmond BC on Oct 31 2018.
<br />
<br />
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Q_swH3ZtSnU/0.jpg" frameborder="0" height="480" src="https://www.youtube.com/embed/Q_swH3ZtSnU?feature=player_embedded" width="640"></iframe>Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-31819753172870779352018-03-15T09:44:00.002-07:002018-03-15T09:44:46.226-07:00Update PHP version from 5.5.11 to 5.5.38 due to security in Windows Server 2012<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-0626602611006770" data-ad-slot="4962036764" style="display: inline-block; height: 90px; width: 728px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x15, created 10/14/10 -->
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-0626602611006770" data-ad-slot="3734232982" style="display: inline-block; height: 15px; width: 728px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
In PHPMyAdmin, my PHP version is 5.5.11 and needs to update to 5.5.38 due to security issue in Windows Server 2012<br />
First stop IIS web services. In Windows Server 2012<br />
Administrative tool->Service<br />
stop<br />
<pre><code>World Wide Web Publishing Service</code></pre>
<br />1. Open the Web PI application from the following location on your filesystem.<br />
<pre><code>C:\Program Files\Microsoft\Web Platform Installer\WebPlatformInstaller.exe
</code></pre>
2. Go to Products<br />
3. Search PHP,<br />
4. Click PHP 5.5.38. click Add<br />
5. Click Install<br />
6. restart<br />
<br />
<pre><code>World Wide Web Publishing Service</code></pre>
Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com6tag:blogger.com,1999:blog-7135885500997611243.post-91374978773948212762018-02-13T10:17:00.000-08:002018-02-13T10:17:06.276-08:00Notepad++ - Add C++ compiler <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-0626602611006770" data-ad-slot="4962036764" style="display: inline-block; height: 90px; width: 728px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x15, created 10/14/10 -->
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-0626602611006770" data-ad-slot="3734232982" style="display: inline-block; height: 15px; width: 728px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<br />
1) One way to add C++ compiler is to use Pocket C++.<br />Pocket C++ can be downloaded from:<br />https://github.com/dacap/pocketcpp<br />After installation, You can use F9 key to compile C++ files, and Ctrl+F9 to execute the compiled program.<br />Recently I found there is popup windows to block<br />me compile C++ code.<br />2) second way is to install g++ compiler separately and <br />integrate in Notepad++.<br /><br />a) Install g++ using Cygwin (<a href="http://www.edparrish.net/common/cygwin.php">http://www.edparrish.net/common/cygwin.php</a>)<br />or using MinGW (<a href="https://nuwen.net/mingw.htm">https://nuwen.net/mingw.htm</a>l)<br /><br />b) Open the Plugin Manager in Notepad++.<br /><br />Plugins > Plugin Manger > Show Plugin Manager<br /><br />c) Find the NppExec plugin in the list and install it.<br /><br /> Check the box<br /> Press the Install button<br /><br />d) Open the NppExec Execute dialog.<br /><br />NppExec > Execute...<br /><br />e) Copy and paste the following script into the Commands box.<br />(assume g++ installed in C:\cygwin\bin\g++.exe. If using MinGW, replacing with MinGW g++ directory)<br /><br /><span style="color: blue;">SET G++ = C:\cygwin\bin\g++.exe<br />NPP_SAVE // save current file<br />cd $(CURRENT_DIRECTORY) // go to directory of the current file<br />"$(G++)" -Wall -Wextra -Wpedantic -std=c++11 -o "$(NAME_PART)" "$(FILE_NAME)"</span><br /><br />f) Save the script with a name like: C++ compile.<br /><br /> Press Save button<br /> Enter the script name<br /> Press the Save button<br /> <br />g)To only compile, press the keys Ctrl-6 together or use the following set of menu commands:<br /><br /> To both compile and run a program, press the keys Ctrl-7 together or use the following set of menu commands:<br /><br /> Follow the menu to the NppExec Execute dialog<br /><br /> Plugins > NppExec > Execute<br /><br /> Select C++ compile and run script from the dropdown list.<br /> Press the OK button.<br /> <br />References:<br /><a href="https://github.com/dacap/pocketcpp">https://github.com/dacap/pocketcpp</a><br /><a href="https://nuwen.net/mingw.html">https://nuwen.net/mingw.html</a><br /><a href="http://www.edparrish.net/common/cygwin.php">http://www.edparrish.net/common/cygwin.php</a><br /><a href="http://www.edparrish.net/common/npp4c.html">http://www.edparrish.net/common/npp4c.html</a><br /><a href="https://stackoverflow.com/questions/27980134/how-to-compile-execute-c-code-from-within-notepad">https://stackoverflow.com/questions/27980134/how-to-compile-execute-c-code-from-within-notepad</a><br /><a href="http://preshing.com/20141108/how-to-install-the-latest-gcc-on-windows/">http://preshing.com/20141108/how-to-install-the-latest-gcc-on-windows/</a><br />Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com4tag:blogger.com,1999:blog-7135885500997611243.post-32507639383900296202017-03-29T16:27:00.001-07:002018-01-23T14:52:08.365-08:00Datatable export excel wraptext and newline
<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0626602611006770"
data-ad-slot="4962036764"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
I have 14 column table id is tab1 under div class <code>ajax_list, following code</code><br />
<code>is to solve Datatable export excel wraptext and newline</code><br />
<br />
<div class="container">
<div class="line number1 index0 alt2">
<span style="color: blue;"><code class="js plain">$(document).ready( </code><code class="js keyword">function</code><code class="js plain">() {</code></span></div>
<span style="color: blue;"><code>var buttonCommon = {<br /> exportOptions: {<br /> format: {<br /> body: function(data, column, row) {<br /> data = data.replace(/<br\s*\/?>/ig, "\r\n");<br /> data = data.replace(/<.*?>/g, "");<br /> data = data.replace("&amp;", "&");<br /> data = data.replace("&nbsp;", "");<br /> data = data.replace("&nbsp;", "");<br /> return data;<br /> }<br /> }<br /> }<br />};<br />$.extend(true, $.fn.dataTable.defaults, {<br /> "lengthChange": false,<br /> "pageLength": 100,<br /> "orderClasses": false,<br /> "stripeClasses": [],<br /> dom: 'Bfrtip',<br /> buttons: [<br /> $.extend(true, {}, buttonCommon, {<br /> extend: 'excel',<br /> exportOptions: {<br /> columns: [0, 1, 2, 3, 4, 5,6,7,8,9,10,11,12,13]<br /> },<br /> customize: function(xlsx) {<br /> var sheet = xlsx.xl.worksheets['sheet1.xml'];<br /> <br /> $('row c[r^="A"]', sheet).attr( 's', '50' ); //<-- left aligned text<br /> $('row c[r^="B"]', sheet).attr( 's', '50' ); //<-- left aligned text<br /> $('row c[r^="C"]', sheet).attr( 's', '55' ); //<-- wrapped text<br /> // $('row:first c', sheet).attr( 's', '32' );<br /> $('row c[r^="D"]', sheet).attr( 's', '55' ); //<-- wrapped text<br /> $('row c[r^="E"]', sheet).attr( 's', '55' ); //<-- wrapped text<br /> $('row c[r^="F"]', sheet).attr( 's', '55' ); //<-- wrapped text<br /> $('row c[r^="G"]', sheet).attr( 's', '55' ); //<-- wrapped text<br /> $('row c[r^="H"]', sheet).attr( 's', '55' ); //<-- wrapped text<br /> $('row c[r^="I"]', sheet).attr( 's', '55' ); //<-- wrapped text<br /> $('row c[r^="J"]', sheet).attr( 's', '55' ); //<-- wrapped text<br /> $('row c[r^="K"]', sheet).attr( 's', '55' ); //<-- wrapped text<br /> $('row c[r^="L"]', sheet).attr( 's', '55' ); //<-- wrapped text<br /> $('row c[r^="M"]', sheet).attr( 's', '55' ); //<-- wrapped text <br /> $('row c[r^="N"]', sheet).attr( 's', '55' ); //<-- wrapped text <br /> }<br /> })<br /> ]<br />});<br /> $("div.ajax_list").find('#tab1').DataTable({</code></span><br />
<span style="color: blue;"><code> paging: false,<br /> fixedHeader: true<br /> } );</code></span><br />
<div class="line number13 index12 alt2">
<span style="color: blue;"><code class="js plain">} );</code></span></div>
<div class="line number13 index12 alt2">
</div>
<div class="line number13 index12 alt2">
<span style="color: blue;"><code class="js plain">Reference:</code></span></div>
<div class="line number13 index12 alt2">
<a href="http://stackoverflow.com/questions/40996078/datatables-buttons-excelhtml5-vertical-cell-alignment"><span style="color: blue;"><code class="js plain">http://stackoverflow.com/questions/40996078/datatables-buttons-excelhtml5-vertical-cell-alignment</code></span></a></div>
<div class="line number13 index12 alt2">
</div>
<div class="line number13 index12 alt2">
<span style="color: blue;"><code class="js plain"><a href="https://jsfiddle.net/lbriquet/0n9j52jx/">https://jsfiddle.net/lbriquet/0n9j52jx/</a></code></span><br />
<br />
<span style="color: blue;"><code class="js plain">In some case, we need to update the cell and need to reinitialize datatable.</code></span><br />
<span style="color: blue;"><code class="js plain">To reinitialize datatable: (</code></span>for table id is tab1)<br />
<b> $('#tab1').DataTable( {<br /> destroy: true,</b><br />
<b> paging: false,<br /> fixedHeader: true<br /> } );</b> <br />
<span style="color: blue;"><code class="js plain"><br /></code></span></div>
<div class="line number13 index12 alt2">
</div>
</div>
Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com9tag:blogger.com,1999:blog-7135885500997611243.post-56187147936564699802017-03-06T11:00:00.000-08:002018-01-23T14:54:40.008-08:00Powerful js library datable to export table in pdf, excel, sorting, freezing column and table header fixed (sticky)
<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0626602611006770"
data-ad-slot="4962036764"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
Datable js library can be downloaded from<br />
<a href="https://datatables.net/download/release">https://datatables.net/download/release</a><br />
<br />
<h2 data-anchor="DataTables">
DataTables</h2>
DataTables is the core software of the DataTables project, and involves two primary files, the DataTables Javascript and CSS.<br />
<br />
js:<br />
<a href="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js</a><br />
css:<br />
<a href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css </a><br />
<br />
<h3 data-anchor="FixedHeader">
FixedHeader</h3>
The FixedHeader plug-in will freeze in place the header, footer and
left and/or right most columns in a DataTable, ensuring that title
information will remain always visible.<br />
js:<br />
<a href="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js">https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js</a><br />
css <br />
<a href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css </a><br />
<br />
Example:<br />
<br />
<code>$('#myTable').DataTable( {<br /> fixedHeader: true<br />} );</code><br />
<h3 data-anchor="FixedColumns">
FixedColumns</h3>
FixedColumns "freezes" in place the left most columns in a scrolling
DataTable, to provide a guide to the end user (for example an index
column).<br />
js:<br />
<a href="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js">https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js </a><br />
css<br />
<a href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css">https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css </a><br />
<h3 data-anchor="FixedColumns">
Export pdf and excel</h3>
<h3 data-anchor="FixedColumns">
Example</h3>
<div class="container">
<div class="line number1 index0 alt2">
<code class="js plain">$(document).ready(</code><code class="js keyword">function</code><code class="js plain">() {</code></div>
<div class="line number2 index1 alt1">
<code class="js spaces"> </code><code class="js plain">$(</code><code class="js string">'#example'</code><code class="js plain">).DataTable( {</code></div>
<div class="line number3 index2 alt2">
<code class="js spaces"> </code><code class="js plain">dom: </code><code class="js string">'Bfrtip'</code><code class="js plain">,</code></div>
<div class="line number4 index3 alt1">
<code class="js spaces"> </code><code class="js plain">buttons: [</code></div>
<div class="line number5 index4 alt2">
<code class="js spaces"> </code><code class="js string">'copy'</code><code class="js plain">, </code><code class="js string">'csv'</code><code class="js plain">, </code><code class="js string">'excel'</code><code class="js plain">, </code><code class="js string">'pdf'</code><code class="js plain">, </code><code class="js string">'print'</code></div>
<div class="line number6 index5 alt1">
<code class="js spaces"> </code><code class="js plain">]</code></div>
<div class="line number7 index6 alt2">
<code class="js spaces"> </code><code class="js plain">} );</code></div>
<div class="line number8 index7 alt1">
<code class="js plain">} );</code></div>
</div>
In addition to the above code, the following Javascript library files are loaded for use in this example:<br />
<ul>
<li>
<a href="https://code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li>
<li>
<a href="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js</a>
</li>
<li>
<a href="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js</a>
</li>
<li>
<a href="https://cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js">//cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js</a>
</li>
<li>
<a href="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js</a>
</li>
<li>
<a href="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js</a>
</li>
<li>
<a href="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js">//cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js</a>
</li>
<li>
<a href="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js">//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js</a>
</li>
<li>
<a href="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js">//cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js</a>
</li>
</ul>
Reference:<br />
<a href="https://datatables.net/extensions/buttons/examples/initialisation/export.html">https://datatables.net/extensions/buttons/examples/initialisation/export.html </a><br />
<h3 data-anchor="FixedColumns">
Sorting</h3>
<h3 data-anchor="FixedColumns">
<a href="https://datatables.net/examples/basic_init/table_sorting.html">https://datatables.net/examples/basic_init/table_sorting.html </a></h3>
Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com6tag:blogger.com,1999:blog-7135885500997611243.post-65730907640802837802016-11-30T11:17:00.001-08:002018-01-23T14:54:54.226-08:00Sweet Alert JS library - beautiful replacement of JavaScript Alert
<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0626602611006770"
data-ad-slot="4962036764"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
You may think JS alert is boring and less flexible. You can use Sweet Alert. You can download and see the demo of sweet alert from:<br />
<a href="http://t4t5.github.io/sweetalert/">http://t4t5.github.io/sweetalert/</a><br />
Then initialize the plugin by referencing the necessary files (js and css):<br />
<pre><span style="color: blue;"><<span class="tag">script</span> <span class="attr">src</span>=<span class="str">"sweetalert.min.js"</span>></<span class="tag">script</span>>
<<span class="tag">link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="tag">type</span>=<span class="str">"text/css"</span> <span class="tag">href</span>=<span class="str">"sweetalert.css"</span>></span></pre>
Example 1: error message:<br />
<span style="color: blue;">sweetAlert("Not Allowed", "Average of Chair's Recommended Step exceeds 1.25!", "error"); </span><br />
<br />
result:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPAftIfL2uAaTiNDn2m2qS1FQ_jiN-BYVMex_dxQTlIqiNicqblR4zMfdJgNhP7v05ipN3kdTYOwFsSwmVwpb2tXs0Oj1EX_Sd3jrlKX2QU043NKcjBSWGiDZudjib3jM5JTt__-p_3AHf/s1600/SweetAlertError.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="219" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPAftIfL2uAaTiNDn2m2qS1FQ_jiN-BYVMex_dxQTlIqiNicqblR4zMfdJgNhP7v05ipN3kdTYOwFsSwmVwpb2tXs0Oj1EX_Sd3jrlKX2QU043NKcjBSWGiDZudjib3jM5JTt__-p_3AHf/s320/SweetAlertError.JPG" width="320" /></a></div>
Example 2: error message:<br />
<span style="color: blue;"> sweetAlert({<br /> title:" Are you sure?",<br /> text:"You will not be able to edit.",<br /> type:"warning",<br /> showCancelButton:true,<br /> confirmButtonClass: "btn-danger",<br /> confirmButtonText: "Yes, Submit & Lock",<br /> confirmButtonColor: "#DD6B55",<br /> cancelButtonText: "Cancel",<br /> closeOnConfirm: true,<br /> closeOnCancel:true<br /> },<br /> function(response){<br /> if(response == true){<br /> <br /> }else{<br /> <br /> }<br /> });</span><br />
<br />
result:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfgI_fA3lnKre2-FMENZXLgLPf0WS2OIoAt0i9dufmVDNNgAHqLtusBrIpDI60Hb-KEQ2q_aH5qve3lq4a7lUJxBcwV9QxaR4EOx0DuY6qDzQsgEHHU6qVaRNDhZmr4H3z6ukVIsYmuY-w/s1600/SweetAlertWarning.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfgI_fA3lnKre2-FMENZXLgLPf0WS2OIoAt0i9dufmVDNNgAHqLtusBrIpDI60Hb-KEQ2q_aH5qve3lq4a7lUJxBcwV9QxaR4EOx0DuY6qDzQsgEHHU6qVaRNDhZmr4H3z6ukVIsYmuY-w/s320/SweetAlertWarning.JPG" width="320" /></a></div>
<br />Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com12tag:blogger.com,1999:blog-7135885500997611243.post-17628366900185283982016-11-13T21:27:00.001-08:002018-01-23T14:55:05.648-08:00Bootstrap Datepicker on change firing 3 times
<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0626602611006770"
data-ad-slot="4962036764"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
I used Bootstrap Datepicker in js and it fires three times in post<br />
<span style="color: blue;"> $('.date-picker').datepicker({<br /> format: "yyyy-mm-dd",<br /> autoclose: true<br /> });</span><br />
<span style="color: blue;"> $('<code><span class="str">.date-picker</span></code>').change(function() {<br /> var row = $(this).parent().parent();<br /> var stakeholder_id =row.find(".sid").val();<br /> var salutation = $(this).val();<br /> var postdata = {stakeholder_id:stakeholder_id,salutation:salutation};<br /> var url = '/tracs/ajax/salaryReview_chair_ajax/update_salaryreviewchair';<br /> $.post(url, postdata, function(data) {<br /> $("div#notice").html('Salutation is updated.');<br /> $("div#notice").css('display', 'block');<br /> $("div#notice").fadeOut(5000);<br /> });<br /> });</span><br />bootstrap-datepicker.js needs to be fixed, the new version can be found:<br />
<a href="https://github.com/uxsolutions/bootstrap-datepicker/tree/master/js"> https://github.com/uxsolutions/bootstrap-datepicker/tree/master/js</a><br />
or used<br />
wget https://raw.githubusercontent.com/uxsolutions/bootstrap-datepicker/master/js/bootstrap-datepicker.js<br />
<br />
If you still used old bootstrap-datepicker.js, you can use<br />
<pre class="default prettyprint prettyprinted"><span style="color: blue;"><code><span class="kwd">var</span><span class="pln"> datePicker </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'.date-picker'</span><span class="pun">).</span><span class="pln">datePicker</span><span class="pun">().</span><span class="pln">on</span><span class="pun">(</span><span class="str">'changeDate'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">ev</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="com">//Functionality to be called whenever the date is changed</span><span class="pln">
</span><span class="pun">});</span></code></span></pre>
<pre class="default prettyprint prettyprinted"><code><span class="pun"> </span></code></pre>
<pre class="default prettyprint prettyprinted"><code><span class="pun">or </span></code></pre>
<pre class="default prettyprint prettyprinted"><span style="color: blue;"><code><span class="pun"><code><span class="kwd">var</span><span class="pln"> c</span><span class="pun">=</span><span class="lit">0</span><span class="pun">;</span><span class="kwd">var</span><span class="pln"> send</span><span class="pun">=</span><span class="kwd">false</span><span class="pun">;</span><span class="pln">
$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
jQuery</span><span class="pun">(</span><span class="pln"> </span><span class="str">".ed"</span><span class="pln"> </span><span class="pun">).</span><span class="pln">datepicker</span><span class="pun">({</span><span class="pln">
format</span><span class="pun">:</span><span class="pln"> </span><span class="str">"yyyy-mm-dd"</span><span class="pun">,</span><span class="pln">
autoclose</span><span class="pun">:!</span><span class="lit">0</span><span class="pln">
</span><span class="pun">}).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'change'</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd">if</span><span class="pun">(</span><span class="pln">c</span><span class="pun">==</span><span class="lit">2</span><span class="pun">){</span><span class="pln">
c</span><span class="pun">=</span><span class="lit">0</span><span class="pun">;</span><span class="pln">
send</span><span class="pun">=</span><span class="kwd">true</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="kwd">else</span><span class="pun">{</span><span class="pln">
c</span><span class="pun">++;</span><span class="pln">
send</span><span class="pun">=</span><span class="kwd">false</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="pun">});</span></code></span></code></span></pre>
<pre class="default prettyprint prettyprinted"><code><span class="pun"><code><span class="pun"> </span></code></span></code></pre>
<pre class="default prettyprint prettyprinted"><code><span class="pun"><code><span class="pun">Reference:</span></code></span></code></pre>
<pre class="default prettyprint prettyprinted"><code><span class="pun"><a href="http://stackoverflow.com/questions/22614041/bootstrap-datepicker-on-change-firing-3-times"><code><span class="pun">http://stackoverflow.com/questions/22614041/bootstrap-datepicker-on-change-firing-3-times </span></code> </a></span></code></pre>
Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com1tag:blogger.com,1999:blog-7135885500997611243.post-32991706640317524162016-10-19T10:23:00.000-07:002018-01-23T14:55:16.804-08:00SEC_ERROR_UNKNOWN_ISSUER when https in Firefox
<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0626602611006770"
data-ad-slot="4962036764"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
When you connect to https website in Firrefox, you may get an error: you connection is not secure and SEC_ERROR_UNKNOWN_ISSUER error.<br />
<br />
This is due to that Firefox background ssl certificate process is not updated. We can remove temporary Firefox storage to fix the problem. The process is as following:<br />
<br />
1) Click Any folder in Windows<br />
2) Click Tool->View at top menu of the folder.<br />
3) Check "Show hidden files, folder and drive" checkbox<br />
4) Go to C:\Users, click your user name<br />
5) Backup Firefox bookmark<br />
6) Go to AppData\Local\Mozilla, remove Firefox folder<br />
7) Go to AppData\Roaming\Mozilla, remove Firefox folder<br />
8) If folder AppData\LocalLow\Mozilla exsits, go to AppData\LocalLow\Mozilla and
remove Firefox folder.
Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com1tag:blogger.com,1999:blog-7135885500997611243.post-9525620552827097572016-09-28T15:05:00.000-07:002018-01-23T14:26:09.437-08:00Make bootstrap Modal dialog draggable, move up and change header/footer style
<br />
I have Modal code:<br />
<br /><!-- Universal Modal --><br /><span style="color: blue;"><div class="modal fade" id="universalModal" <span style="color: red;"> style="margin-top:-150px;"</span> tabindex="-1" role="dialog" aria-labelledby="universalModalLabel" aria-hidden="true"><br /> <div class="modal-dialog" style="width:1000px;"> <br /> <div class="modal-content"><br /> <form role="form" id="universalModalForm"><br /> <div class="modal-header"><br /> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"> Close</span></button><br /> <h4 class="modal-title" id="universalModalLabel"><span class="glyphicon glyphicon-pencil"></span> Edit<span class="modal-title">.model-title</span></h4><br /> </div><br /> <div class="alert alert-danger fade in" id="universalModal-alert" style="display: none;"><br /> <span class="alert-body"></span><br /> </div><br /> <div class="modal-body">.modal-body</div><br /> <div class="modal-footer"><br /> <input type="hidden" id='stakeholder_id' name='stakeholder_id'><br /> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button><br /> <button type="submit" class="btn btn-primary" id="submitBtn"></button><br /> </div><br /> </form><br /> </div><br /> </div><br /></div></span><br /><!-- End Universal Modal --><br />
1) To move bootstrap Modal dialog up, I used <span style="color: blue;"><span style="color: red;"> <span style="color: black;">style="margin-top:-150px;" for my id in top div including modal class.</span></span></span><br />
<span style="color: blue;"><span style="color: red;"><span style="color: black;">2) To make bootstrap Modal dialog draggable via modal header, body and footer</span></span></span><br />
<span style="color: blue;"> <span style="color: red;"><span style="color: black;"><span style="color: blue;"> $('#universalModal').modal('show');<br /> $('#universalModal .modal-dialog').draggable({<br /> handle: ".modal-header, .modal-body, .modal-footer"<br /> });</span></span></span></span><br />
<span style="color: blue;"><span style="color: red;"><span style="color: black;">3) To change header and footer style</span></span></span><br />
<span style="color: blue;"><style><br /> .modal-header {<br /> background-color: #5cb85c;<br /> color:white !important;<br /> text-align: center;<br /> font-size: 20px;<br /> }<br /> .modal-footer {<br /> background-color: #5cb85c;;<br /> }</span><br />
<span style="color: blue;"></style> </span>Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-39868792508023657992016-03-28T20:46:00.002-07:002018-01-23T14:55:36.168-08:00Use Youtube as screencast to record Desktop Screen
<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0626602611006770"
data-ad-slot="4962036764"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
We can use Youtube as screencast to record Desktop Screen. It is free and we can directly post to Youtube.<br />
<br />
1) Step 1: Sign-in to YouTube. Got to Creator Studio. Click events under Live Streaming in left panel.<br /><br />2) Set video a title, Change video from public to private if you want to keep video private at the beginning, and click the “Go Live Now” <br />button.<br /><br />3) If this is the first time, you will be reminded to Install the Hangouts Plugin to get started. Click "install plugin" and run GoogleVioceAndVideoSetup.exe.<br /><br />4) Click video icon to turn off webcam and unmute microphone if you want to record voice.<br /><br />5) Click the Screenshare button, which is second icon in the left toolbox. If popup, select full screen in first. If you choose other options, you may not switch between different desktop windows.<br /><br />6) click Start Broadcast to start recording the screen. After finish, click to stop Broadcast.<br /><br />7) Go back Youtube Creator Studio, under Video manager, you can find the video you recorded. Change setting and publish in Youtube.<br />
<br />
Compare to other screencast, I did not find pause button using this method,<br />
<br />
Video:Use Youtube as screencast to record your Desktop Screen<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="853" height="480" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/qJ89Nvqj3pU/0.jpg" src="https://www.youtube.com/embed/qJ89Nvqj3pU?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com3tag:blogger.com,1999:blog-7135885500997611243.post-15499472443483733442016-02-06T23:38:00.000-08:002018-01-23T14:56:00.451-08:00Norton family compromised by kill Norton family in task manager in Windows 10
<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0626602611006770"
data-ad-slot="4962036764"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
If a child account in Windows 10 starts task manager and kills Norton family, Norton family<br />
will not work. We need to disable standard users to kill Norton family in task manager.<br />
a. Go to C:\Windows\System32\<span class="skimlinks-unlinked">taskmgr.exe</span>,<br />
b. right click on the file,<br />
c. chose properties,<br />
d. go to the security tab<br />
e. click on advanced,<br />
----------------------------------------------------------------------------------------------------------- <br />
If owner is trustedInstraller not Administrators, you need to change it to Administrator as follows<br />
f. Click change<br />
g. In popup, click "Object Type", only select group<br />
h Under "Enter object name to select"<br />
Enter<br />
Administrators<br />
click OK<br />
--------------------------------------------------------------------------------------------------------------<br />
i. back to Taskmgr Properties windows, click Edit<br />
j.Select Users<br />
k uncheck "Read and execute" and check "Read" <br />
<br />
Now when your child login, he can not start task manager. <br />
<br />Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-20697153651010465422015-12-20T21:42:00.002-08:002015-12-20T21:42:52.572-08:00Microsoft Family Windows 10 Parental Controls Screen time not working and swtich to Norton family<script type="text/javascript">
<!--
google_ad_client = "pub-0626602611006770";
/* 728x90, created 10/14/10 */
google_ad_slot = "4962036764";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script> <script type="text/javascript">
<!--
google_ad_client = "pub-0626602611006770";
/* 728x15, created 10/14/10 */
google_ad_slot = "3734232982";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script> <br />
<br />
I have windows 8, later upgraded to Windows 10. Parental Controls Screen time is not working anymore after upgrading. First screen time does not show correctly. My hourly rule and block all days are not working. I checked the solution by google. was told that <span><span>On the Start screen, right click and the find run and click, and type <strong>C:\ProgramData\Microsoft\Windows\Parental Controls</strong> and press Enter. </span></span><br />
<span><span> </span></span><span><span>Delete all contents of the Parental Controls folder. "</span></span><br /><span><span>This will delete any corrupt files. Your settings will be downloaded again from
<strong>familysafety.microsoft.com</strong> the next time you sign in."</span></span><br />
<span><span>I did find settings.bin, but inside almost empty, only "{}".</span></span><br />
<br />
<span><span>I think there is a problem in Microsoft family Windows 10 parental control. Finally I switched to Norton Family. Norton Family has same feature Microsoft family has, but has more, although I need to pay small money each year.</span></span><br />
<span><span><br /></span></span>
<span><span>Norton family premier link:</span></span><br />
<a href="https://onlinefamily.norton.com/familysafety/loginStart.fs"><span><span>https://onlinefamily.norton.com/familysafety/loginStart.fs</span></span></a><br />
<span><span><br /></span></span>
<span><span>There is 30 days free trial. I am quite satisfied Norton family during trial.</span></span><br />
<span><span><br /></span></span>Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-25466717304568280292015-06-21T08:27:00.000-07:002015-06-21T08:28:10.332-07:00Set up a child account and set screen time limit in Windows 8<script type="text/javascript">
<!--
google_ad_client = "pub-0626602611006770";
/* 728x90, created 10/14/10 */
google_ad_slot = "4962036764";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script> <script type="text/javascript">
<!--
google_ad_client = "pub-0626602611006770";
/* 728x15, created 10/14/10 */
google_ad_slot = "3734232982";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script><br /><br />
1) To set up a child account in Windows 8:<br />
a) Click start menu and click control panel<br />
b) Click User Account, click manage another account<br />
c) Add a new account<br />
d) Click add a child account with email or with email account<br />
e) Click mange family safety online or directly go to your Microsoft account online <br />
<br />
2)Set screen time limit for child account under parental control<br />
a) Go to your microsoft account<br />
https://account.microsoft.com/<br />
b)click family and click screen time and select maximum time per day your child can use computer.<br />
you can also choose which kind of websites, apps and games your child can access.<br />
Video: Set up a child account and set screen time limit in Windows 8<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/aPzlMgIHZbQ/0.jpg" frameborder="0" height="600" src="https://www.youtube.com/embed/aPzlMgIHZbQ?feature=player_embedded" width="800"></iframe></div>
<br />Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com19tag:blogger.com,1999:blog-7135885500997611243.post-86231948802591303952015-06-10T21:56:00.001-07:002015-06-10T22:02:04.547-07:00MySQL data type timestamp auto-initialized and auto-updated<script type="text/javascript">
<!--
google_ad_client = "pub-0626602611006770";
/* 728x90, created 10/14/10 */
google_ad_slot = "4962036764";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script> <script type="text/javascript">
<!--
google_ad_client = "pub-0626602611006770";
/* 728x15, created 10/14/10 */
google_ad_slot = "3734232982";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
<br />
<br />
When we set MySQL data type timestamp, the default is auto-initialized. It is set to the current
timestamp for inserted rows. This can be used in a column such as creation date. In PHPMyAdmin,<br />
the attribute is empty.<br />
<br />
When we set the attributes "on update current_timestamp" and type 'timestamp' in PHPMyAdmin, the column is auto-updated. It is automatically updated
to the current timestamp when the value of any other column
in the row is changed from its current value. The column
remains unchanged if all other columns are set to their
current values. This can be used in a column such as modification date.<br />
<br />
MySQL:<br />
<span style="color: blue;"><code class="sql"><span class="syntax"><span class="inner_sql"><span class="syntax_alpha syntax_alpha_reservedWord">ALTER</span> <span class="syntax_alpha syntax_alpha_reservedWord">TABLE</span> <span class="syntax_quote syntax_quote_backtick">`max_term_default_ttr_lut`</span> <span class="syntax_alpha syntax_alpha_reservedWord">ADD</span> <span class="syntax_quote syntax_quote_backtick">`CreateDate`</span> <span class="syntax_alpha syntax_alpha_columnType">TIMESTAMP</span> <span class="syntax_alpha syntax_alpha_reservedWord">NULL</span> <span class="syntax_alpha syntax_alpha_columnAttrib">DEFAULT</span> <span class="syntax_alpha syntax_alpha_reservedWord">NULL</span> <span class="syntax_punct syntax_punct_listsep">,</span><br /> <span class="syntax_alpha syntax_alpha_reservedWord">ADD</span> <span class="syntax_quote syntax_quote_backtick">`ModificationDate`</span> <span class="syntax_alpha syntax_alpha_columnType">TIMESTAMP</span> <span class="syntax_alpha syntax_alpha_reservedWord">ON</span> <a href="http://fasstracs-staging.arts.sfu.ca/phpmyadmin/url.php?url=http%3A%2F%2Fdev.mysql.com%2Fdoc%2Frefman%2F5.1%2Fen%2Fupdate.html&token=e28e2c54e178f0e4fa2a3379917bb952" target="mysql_doc"><span class="syntax_alpha syntax_alpha_reservedWord">UPDATE</span></a> <span class="syntax_alpha syntax_alpha_reservedWord">CURRENT_TIMESTAMP</span> <span class="syntax_alpha syntax_alpha_reservedWord">NULL</span> <span class="syntax_alpha syntax_alpha_columnAttrib">DEFAULT</span> <span class="syntax_alpha syntax_alpha_reservedWord">NULL</span> <span class="syntax_punct syntax_punct_listsep">,</span><br /> <span class="syntax_alpha syntax_alpha_reservedWord">ADD</span> <span class="syntax_quote syntax_quote_backtick">`creator`</span> <span class="syntax_alpha syntax_alpha_columnType">VARCHAR</span><span class="syntax_punct syntax_punct_bracket_open_round">(</span> <span class="syntax_digit syntax_digit_integer">45</span> <span class="syntax_punct syntax_punct_bracket_close_round">)</span> <span class="syntax_alpha syntax_alpha_reservedWord">NULL</span> <span class="syntax_alpha syntax_alpha_columnAttrib">DEFAULT</span> <span class="syntax_alpha syntax_alpha_reservedWord">NULL</span> <span class="syntax_punct syntax_punct_listsep">,</span><br /> <span class="syntax_alpha syntax_alpha_reservedWord">ADD</span> <span class="syntax_quote syntax_quote_backtick">`modifier`</span> <span class="syntax_alpha syntax_alpha_columnType">VARCHAR</span><span class="syntax_punct syntax_punct_bracket_open_round">(</span> <span class="syntax_digit syntax_digit_integer">45</span> <span class="syntax_punct syntax_punct_bracket_close_round">)</span> <span class="syntax_alpha syntax_alpha_reservedWord">NULL</span> <span class="syntax_alpha syntax_alpha_columnAttrib">DEFAULT</span> <span class="syntax_alpha syntax_alpha_reservedWord">NULL</span> <span class="syntax_punct syntax_punct_queryend">;</span></span></span></code> </span>Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-21188379503548875342015-06-10T09:48:00.002-07:002018-01-23T14:58:33.271-08:00Parse JSON in JavaScript<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0626602611006770"
data-ad-slot="4962036764"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />In PHP, I used<br />
<span style="color: blue;"> $message['success'] = "Personal Information Updated";<br /> echo json_encode($message);</span><br />
to pass $message to Javascript .post<br />
<span style="color: blue;"> $.post('stakeholderInfo.php', $(".box#stakeholderInfo div #editInfoForm").serialize(), function(jsonMessage) { <br /> obj = JSON.parse(jsonMessage);<br /> alert(obj['success']);<br /> <br /> });</span><br />
<br />
Here I used JSON.parse to parse JSON in JavaScript, then display message alert(obj['success']);<br />
<pre class="default prettyprint prettyprinted"><code><span class="pln"></span><span class="pln">
</span></code></pre>
Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-36692523168033890102015-06-08T22:04:00.005-07:002018-01-23T14:57:56.536-08:00phpexcel toggle expand and hide column in EXCEL and summary
<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0626602611006770"
data-ad-slot="4962036764"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
PHP has built-in feature to read and write CSV files. PHPExcel extends this feature and allow you to write to and read from different spreadsheet file formats, like Excel (BIFF) .xls, Excel 2007 (OfficeOpenXML) .xlsx, CSV, Libre/OpenOffice Calc .ods, Gnumeric, PDF, HTML, ... This project is built around Microsoft's OpenXML standard and PHP.<br />
<br />
PHPExcel can be downloaded from:<br />
<a href="https://phpexcel.codeplex.com/"> https://phpexcel.codeplex.com/</a><br />
<br />
To start PHPExcel, PHPExcel library path should be included first, for example installed in _classes<br />
<span style="color: blue;"> include_once "./_classes/PHPExcel.php";<br /> include_once './_classes/PHPExcel/Writer/Excel2007.php';</span><br />
<br />
<span style="color: blue;"> $objPHPExcel = new PHPExcel();<br /><br /> //choose the first page<br /> $objPHPExcel->setActiveSheetIndex(0);<br /> $objSheet = $objPHPExcel->getActiveSheet();</span><br />
Toggle expand and hide columns A to C default expand:<br />
<span style="color: blue;"> foreach (range('A','C') as $column) {<br /> $objSheet->getColumnDimension($column)->setOutlineLevel(1);<br /> $objSheet->getColumnDimension($column)->setCollapsed(true);<br /> }</span><br />
Toggle expand and hide columns A to C default hide:<br />
<span style="color: blue;"> foreach (range('A','C') as $column) {<br /> $objSheet->getColumnDimension($column)->setOutlineLevel(1);</span><br />
<span style="color: blue;"> $objSheet->getColumnDimension($column)->setVisible(false);<br /> $objSheet->getColumnDimension($column)->setCollapsed(true);<br /> }</span><br />
Toggle expand and hide row 1<br />
<span style="color: blue;"> $objSheet->getRowDimension(1)->setOutlineLevel(1); </span><br />
<span style="color: blue;"> $objSheet->getRowDimension(1)->setVisible(false);<br /> $objSheet->getRowDimension(1)->setCollapsed(true);<br /> </span><br />
Set autosize<br />
<span style="color: blue;"> foreach (range('A','Z') as $column) {<br /> $objSheet->getColumnDimension($column)->setAutoSize(true);<br /> }</span><br />
Set font size<br />
<span style="color: blue;"> $objSheet->getStyle("A1:AM1")->getFont()->setSize(14);</span><br />
Set font bold<br />
<span style="color: blue;"> $objSheet->getStyle("A1:AM1")->getFont()->setBold(true);</span><br />
Set column A1 header value<br />
<span style="color: blue;"> $objSheet->SetCellValue('A1', 'faculty');</span><br />
Set cell column 1 row 2 value '4'<br />
<span style="color: blue;"> $objSheet->setCellValueByColumnAndRow(1, 2, '2');</span><br />
Set number 1 as 0001 instead of 1<br />
<span style="color: blue;"> $objSheet->getStyle('F1:F'.$currentRow)->getNumberFormat()->setFormatCode('0000');</span><br />
Set alignment left<br />
<span style="color: blue;"> $objSheet->getDefaultStyle()<br /> ->getAlignment()<br /> ->setHorizontal(PHPExcel_Style_Alignment::HORIZONTAL_LEFT);</span><br />
Set column width<br />
<span style="color: blue;"> $objSheet->getColumnDimension('A1')->setWidth(15);</span><br />
Set cell background color lightgreen<br />
<span style="color: blue;"> $objSheet->getStyle("A1:AM1")->applyFromArray(<br /> array(<br /> 'fill' => array(<br /> 'type' => PHPExcel_Style_Fill::FILL_SOLID,<br /> 'color' => array('rgb' => 'C3FDB8')<br /> )<br /> ));</span><br />
Set line break using double quote to parse \n in PHP<br />
<span style="color: blue;"> $objSheet->SetCellValue('N1', "Instr\n contact \n hrs");</span><br />
<span style="color: blue;"> $objSheet->getStyle('N1')->getAlignment()->setWrapText(true);</span><br />
Write out EXCEL file<br />
<span style="color: blue;"> ini_set('zlib.output_compression','Off');<br /> header("Pragma: public");<br /> header("Expires: 0");<br /> header("Cache-Control: must-revalidate, post-check=0, pre-check=0");<br /> header("Content-Type: application/force-download");<br /> header("Content-Type: application/octet-stream");<br /> //the folowing two lines make sure it is saved as a xls file<br /> header('Content-type: application/vnd.ms-excel');<br /> //set the course offered id as page name<br /> $objSheet->setTitle("Export");<br /> $filename = " Export_".date("Ymd").".xls";<br /> header('Content-Disposition: attachment; filename= "'.$filename.'"');<br /> header("Content-Transfer-Encoding: binary");<br /> $objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5');<br /> $objWriter->save('php://output');</span><br />
<br />Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-76819099782760814282015-05-31T00:15:00.005-07:002018-01-23T14:57:33.121-08:00jQuery autocomplete in PHP and force to pickup
<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0626602611006770"
data-ad-slot="4962036764"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
jQuery autocomplete introduction<br />
<span style="color: blue;"> https://jqueryui.com/autocomplete/ </span><br />
<br />
My example: autocomplete data from php<br />
Input box values force to come from autocomplete dropdown<br />
<br />
Two files: jquery_autocomplete.php, tags.php<br />
jquery_autocomplete.php<br />
<span style="color: blue;"><!doctype html><br /><html lang="en"><br /><head><br /> <meta charset="utf-8"><br /> <title>jQuery UI Autocomplete - Default functionality</title><br /> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"><br /> <script src="//code.jquery.com/jquery-1.10.2.js"></script><br /> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script><br /> <link rel="stylesheet" href="/resources/demos/style.css"><br /> <script><br /> $(function() {<br /><br /> $( "#tags" ).autocomplete({<br /> source: 'tags.php',<br /> minLength : 0,<br /><br /> select : function(event, ui) {<br /> newname = ui.item.label; <br /> var url = '';<br /> $.post(url, ui.item.label, function(data) {<br /> //alert(ui.item.label);<br /> <br /> }); <br /> },<br /> change : function() { <br /> curname = $("#tags").val();<br /> if(curname.trim()!= newname) {<br /> alert("You need to pick a tag from the tag list.");<br /> $("#tags").val(oldname);<br /> } <br /><br /> }<br /> }).focus(function(){<br /> $(this).autocomplete('search');<br /> oldname=$(this).val();<br /> });<br /> <br /> });<br /> <br /> </script><br /></head><br /><body><br /> <form onsubmit="return false" id="editContractInfo"><br /><div class="ui-widget"><br /> <label for="tags">Tags: </label><br /> <input type="text" id="tags" name="tags"><br /></div><br /></form> <br /><br /></body><br /></html></span><br />
<br />
tags.php<br />
<span style="color: blue;"><?php<br />$availableTags = array(<br /> array("label"=>".Tbd", "value"=>".Tbd"),<br /> array("label"=>"ActionScript", "value"=>"ActionScript"),<br /> array("label"=>"AppleScript", "value"=>"AppleScript"),<br /> array("label"=>"Asp", "value"=>"Asp") <br /> );<br />echo json_encode($availableTags);<br />?> </span><br />
Video: jQuery autocomplete in PHP and force to pickup<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="800" height="600" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/3BH2BptwG9s/0.jpg" src="https://www.youtube.com/embed/3BH2BptwG9s?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-32317742233597301242015-05-30T21:52:00.002-07:002018-01-23T14:57:06.333-08:00Bootstrap Modal Dialog Example in PHP
<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0626602611006770"
data-ad-slot="4962036764"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
This article is to show how to popup a dialog in Modal and post in PHP.<br />
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap can be downloaded from:<br />
<a href="http://getbootstrap.com/"> http://getbootstrap.com/</a><br />
Two files for this demo:<br />
modal_dialog.php, mydialogexample.js<br />
modal_dialog.php<br />
<span style="color: blue;"><!DOCTYPE html><br /><html lang="en"><br /><head><br /> <title>Bootstrap Example</title><br /> <meta charset="utf-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1"><br /> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><br /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><br /> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><br /> <script src="mydialogexample.js"></script><br /></head><br /><body><br /><div class="container"><br /> <h2>Modal Dialog Example</h2><br /> <!-- Universal Modal --><br /> <h4>Student Number: <input type="text" name="student_number"><br /><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="searchBtn_studentNum">Search Student</button> </h4> <br /><div class="modal fade" id="universalModal" tabindex="-1" role="dialog" aria-labelledby="universalModalLabel" aria-hidden="true"><br /> <div class="modal-dialog" style="width:1000px;"> <br /> <div class="modal-content"><br /> <form role="form" id="universalModalForm"><br /> <div class="modal-header"><br /> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"> Close</span></button><br /> <h4 class="modal-title"><span class="glyphicon glyphicon-pencil"></span> Edit<span class="modal-title">.model-title</span></h4><br /> </div><br /> <div class="alert alert-danger fade in" id="universalModal-alert" style="display: none;"><br /> <span class="alert-body"></span><br /> </div><br /> <div class="modal-body">.modal-body</div><br /> <div class="modal-footer"><br /> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button><br /> <button type="submit" class="btn btn-primary" id="submitBtn"></button><br /> </div><br /> </form><br /> </div><br /> </div><br /></div><br /><!-- Result Modal--><br /><textarea id="searchResultForm" style="display:none"><br /> <table class="table table-striped table-hover" ><br /> <tbody><br /> <tr><br /> <td><b>Last Name: </b></td><br /> <td> <input type="text" name="lname"><br /> </td><br /><br /> <td><b>First Name:</b> </td><br /> <td> <input type="text" name="fname"></td><br /> <br /> </tr> </tr><br /> </tbody><br /> </table> <br /></textarea><br /> <!-- Trigger the modal with a button --> <br /></div><br /></body><br /></html></span> <br />
mydialogexample.js<br />
<span style="color: blue;"> $(document).ready(function(){<br /><br /> $('#universalModal form').submit(function (event){<br /> event.preventDefault();<br /><br /> var formObj = {};<br /> var inputs = $(this).serializeArray();<br /> var url = '';<br /> $.each(inputs, function(i, input) {<br /> formObj[input.name] = input.value;<br /> });<br /> var len = inputs.length;<br /> var dataObj = {};<br /> for (i=0; i<len; i++) {<br /> dataObj[inputs[i].name] = inputs[i].value;<br /> } <br /> //inputs['lname'];<br /> $.post(url, inputs, function(data) {<br /> $('#universalModal').modal('hide');<br /> <br /> }); <br /> <br /> });<br /> <br /> $('#searchBtn_studentNum').off('click').click(function(){<br /> var student_num = $('input[name="student_number"]').val();<br /> <br /> $('#universalModal').modal('show');<br /> $('#universalModal .modal-title').html('<b>Enter Student Info</b>');<br /> $('#universalModal .modal-body').html($('#searchResultForm').val());<br /> $('#universalModal .modal-footer button#submitBtn').html('Save and Exit');<br /> });<br />});</span><br />
Video:Bootstrap Modal Dialog Example in PHP<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/6xF-lUZ7jFU/0.jpg" frameborder="0" height="600" src="https://www.youtube.com/embed/6xF-lUZ7jFU?feature=player_embedded" width="800"></iframe></div>
<br />
<br />Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0tag:blogger.com,1999:blog-7135885500997611243.post-39314557286002092912015-04-06T11:55:00.003-07:002018-01-23T15:00:35.506-08:00Daily backup MySQL database to another computer
<br />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 728x90, created 10/14/10 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0626602611006770"
data-ad-slot="4962036764"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
Assume MySQL server is example.ca, I want to dump MySQL database test to dev2.ca daily.<br />
1) In PHPMyAdmin, click Users, add new user jiansenbk and host dev2.ca and database test<br />
grant all<br />
2) In dev2.ca<br />
create MySQLdump1.sh (no line break below)<br />
<span style="color: blue;">mysqldump -h example.ca -u jiansenbk -pPass2 test</span><br />
<span style="color: blue;">| gzip >/home/jiansen/mysqldump/MySQLDB_`date +"%Y%m%d"`.sql.gz</span><br />
<br />
3) chmod +x MySQLdump1.sh<br />
<br />
4) crontab -e<br />
and enter (no linebreak, chnage server and user name password and database to yours)<br />
<span style="color: blue;">45 23 * * * /home/jiansen/mysqldump/MySQLdump1.sh 2>&1>>/home/jiansen/mysqldump/mysqlbackup.log</span><br />
<br />
<br />
Every night 11:45. MySQL database test is dump to /home/jiansen/mysqldump with different timestamps<br />
Video: Daily backup MySQL database to another computer<br />
Jiansen Luhttp://www.blogger.com/profile/12040769857272325980noreply@blogger.com0