Skip to content

NimTechnology

Trình bày các công nghệ CLOUD một cách dễ hiểu.

  • Kubernetes & Container
    • Docker
    • Kubernetes
      • Ingress
      • Pod
    • Helm Chart
    • Isito-EnvoyFilter
    • Apache Kafka
      • Kafka
      • Kafka Connect
      • Lenses
    • Vault
    • Longhorn – Storage
    • VictoriaMetrics
    • MetalLB
    • Kong Gateway
  • CI/CD
    • ArgoCD
    • ArgoWorkflows
    • Spinnaker
    • Jenkins
    • Harbor
    • TeamCity
    • Git
      • Bitbucket
  • Coding
    • DevSecOps
    • Terraform
      • GCP – Google Cloud
      • AWS – Amazon Web Service
    • Golang
    • Laravel
    • Python
    • Jquery & JavaScript
    • Selenium
  • Log, Monitor & Tracing
    • DataDog
    • Prometheus
    • Grafana
    • ELK
      • Kibana
      • Logstash
  • BareMetal
    • NextCloud
  • Toggle search form

[Java-script] adding HTML by Javascript based on a specified template.

Posted on April 10, 2022April 13, 2022 By nim No Comments on [Java-script] adding HTML by Javascript based on a specified template.

Chúng ta có file main.js

function addNewWorkloadEnvironmentElement(env, name) {
    /*check whether workload exists or not*/
    if ($('#env-' + name + '-' + env).length) {
        return;
    }

    var domain = '.nimtechnology.services';
    if (env !== 'prod') {
        domain = '.dev.nimtechnology.services';
    }

    /*create nav tab element*/
    a = $("<a>" + name + "</a>");
    a.attr("href", "#env-" + name + "-" + env);
    a.attr("data-toggle", "tab");
    a.attr("class", "nav-item nav-link");
    $(".env-" + env + "-wrapper .nav-deployment").append(a);

    /*create tab body element*/
    var b = $('#env-workload-body-template').html();
    var cluster = $('#' + env + '_cluster').val();
    var namespace = $('#' + env + '_namespace').val();
    b = replaceAll(b, '%env%', env);
    b = replaceAll(b, '%name%', name);
    b = replaceAll(b, '%cluster%', cluster);
    b = replaceAll(b, '%namespace%', namespace);
    b = replaceAll(b, '%domain%', domain);

    $(".env-" + env + "-wrapper .tab-content-deployment").append(b);
}
Đây là chỗ append(b)

trong 1 file php mình tìm ra được 1 dòng code liên quan đến phần append(a)

	  </div>
	  @empty
	  @endforelse
	</div>
  </div>
  <br/>

  <script id="env-workload-body-template" type="text/x-custom-template">
	<div class="tab-pane fade show %env%-%name% tab-pane-deployment" id="env-%name%-%env%" role="tabpanel" env="%env%" workload="%name%">
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="repository">Branch filters</label>
                <div class="input-group input-stack mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i data-feather="git-branch"></i></span>
                    </div>
                    <input type="text" class="form-control" name="%env%_%name%_branch_filters[]" value="">
                    <div class="input-group-append">
                        <span class="input-group-text add-more"><i data-feather="plus"></i></span>
                    </div>
                </div>
                <small class="form-text text-muted">Push commits to the matching branch will trigger the pipeline.</small>
            </div>
		    <div class="form-group col-md-6">
		    	<label for="repository">Spinnaker Pipeline Template</label>
			    <div class="input-group input-stack mb-3">
                    <select class="custom-select" name="%env%_%name%_spinnaker_pipeline">
                        <option value="generic-v2" selected>generic</option>
                        <option value="automation-test-v1">automation-test</option>
                        <option value="contract-test-v1">contract-test</option>
                        <option value="restricted-time-v1">restricted-time</option>
                        <option value="restricted-time-with-assets-v1">restricted-time-with-assets</option>
                        <option value="auto-analysis-v1">auto-analysis</option>
                    </select>
			    </div>
		        <small class="form-text text-muted">Specify the Spinnaker pipeline used for deployment process</small>
            </div>
	    	<div class="form-group col-md-6 toggle-wrapper">
	    		<div class="input-group">
	    			<input class="toggle-button" type="checkbox" data-toggle="toggle" data-onstyle="dark" data-width="250" data-height="25" data-on="Custom K8S namespace" data-off="Default K8S namespace">
    			</div>
                <div class="input-group toggle-body" style="display:none">
                    <div class="col-8">
                        <label for="repository">Cluster</label>
                        <input type="text" class="form-control" name="%env%_%name%_cluster" value="%cluster%">
                    </div>
                    <div class="col-4">
                        <label for="repository">Namespace</label>
                        <input type="text" class="form-control" placeholder="Namespace" name="%env%_%name%_namespace" value="%namespace%">
                    </div>
	    		</div>
            </div>
    		<div class="form-group col-md-6">
                <label for="trigger-test">Trigger test</label>
                <input type="input" class="form-control" name="%env%_%name%_trigger_test" value="" placeholder="Upstream name">
                <small class="form-text text-muted">Name of the upstream to trigger automation test. <a href="https://docs.tiki.com.vn/pages/viewpage.action?pageId=89476190" target="_blank">(read more)</a></small>
            </div>
    		<div class="form-group col-md-6">
            </div>
    		<div class="form-group col-md-6">
                <label for="trigger-test">Custom Slack notification</label>
                <div class="input-group">
                    <input type="input" class="form-control" name="%env%_%name%_custom_slack_channel" value="" placeholder="Channel">
                    <input type="input" class="form-control" name="%env%_%name%_custom_slack_message" value="" placeholder="Message">
                </div>
                <small class="form-text text-muted">Send out an additional custom Slack message after workload deployed </small>
            </div>

        </div>
        <div class="form-group col-lg-12">
            <br>
        </div>

	    @include('tikici.builder_custom_deployment_config_script')
    </div>
</script>

Ngoài ra còn 1 thứ nữa là khi mà anh append thêm HTML lên UI
Nếu anh em có nhu câu bắt action (change, click. ….) trên html mới được append thì anh em thêm luôn event lúc anh em append cái ui nhé

    b = replaceAll(b, '%cluster%', cluster);
    b = replaceAll(b, '%namespace%', namespace);
    b = replaceAll(b, '%domain%', domain);    
    $(".env-" + env + "-wrapper .tab-content-deployment").append(b);

    // đây là đoàn JS mà mình thêm
    //event change deploy pipeline
    $(".deploy_pipeline").change(function() {
        var val = $(this).val();
        if (val.includes("spin")) {
                $( "#"+val ).removeClass( "d-none" );
            }else if (val.includes("argocd")) {
                $( "#"+val ).addClass( "d-none" );
            }
    });
}
Jquery & JavaScript

Post navigation

Previous Post: [WordPress] Tăng dung lượng upload file lên wordpress.
Next Post: [Terraform] Lesson 4: Google Compute Engine (VM – Virtual Machine) with Terraform

More Related Articles

[Javascipt] Get class or id of select – option with JQuery Jquery & JavaScript
[Popup/Ajax] Tạo popup(modal/bootstrap) insert data bằng ajax và php Coding
[Javascript] Changing the js version after you change their content. Jquery & JavaScript
Vẽ chart cực đẹp bằng Morris JS và hướng dẫn fix lỗi morris không làm việc trên tab của bootstap Jquery & JavaScript
[Jquery] Disable ajaxStart per page or the particular action Ajax. Jquery & JavaScript
[Ajax/PHP] Cách để PHP trả Json Data về cho Ajax Coding

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Tham Gia Group DevOps nhé!
Để Nim có nhiều động lực ra nhiều bài viết.
Để nhận được những thông báo mới nhất.

Recent Posts

  • [Terraform / EKS] Build EKS and Karpenter by Terraform. September 22, 2023
  • [EKS] Adjusting things to migrate EKS legacy to new versions. September 19, 2023
  • [Tetragon] Security Observability and Runtime Enforcement September 17, 2023
  • [Docker] Setup Docker for Windows Containers (NO Docker Desktop Needed!) September 15, 2023
  • [Python] Python connects MongoDB September 15, 2023

Archives

  • September 2023
  • August 2023
  • July 2023
  • June 2023
  • May 2023
  • April 2023
  • March 2023
  • February 2023
  • January 2023
  • December 2022
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Categories

  • BareMetal
    • NextCloud
  • CI/CD
    • ArgoCD
    • ArgoWorkflows
    • Git
      • Bitbucket
    • Harbor
    • Jenkins
    • Spinnaker
    • TeamCity
  • Coding
    • DevSecOps
    • Golang
    • Jquery & JavaScript
    • Laravel
    • Python
    • Selenium
    • Terraform
      • AWS – Amazon Web Service
      • GCP – Google Cloud
  • Kubernetes & Container
    • Apache Kafka
      • Kafka
      • Kafka Connect
      • Lenses
    • Docker
    • Helm Chart
    • Isito-EnvoyFilter
    • Kong Gateway
    • Kubernetes
      • Ingress
      • Pod
    • Longhorn – Storage
    • MetalLB
    • Vault
    • VictoriaMetrics
  • Log, Monitor & Tracing
    • DataDog
    • ELK
      • Kibana
      • Logstash
    • Fluent
    • Grafana
    • Prometheus
  • Uncategorized
  • Admin

Copyright © 2023 NimTechnology.