프론트엔드 검색 결과

20 개의 검색 결과가 있습니다.

Tech/프론트엔드

Jquery - 동일한 ID 가 여러개 있는 경우 click 이벤트 다 받기

동일한 ID를 쓰고 있는 객체의 이벤트를 받아 처리할 때는 그냥 $(#사용중인ID).on('click', .... 이렇게 사용하면 맨 처음 객체만 반응하는 경우가 나타났다. 나만 그런가? ㅋㅋ 암튼 아이디를 동일하게 사용해도 사용된 모든 객체에 이벤트를 발생하려면 아래와 같이 복수개를 처리할 수 있는 selector 형태로 불러 써야 한다. $("[id='사용중인ID']").on('click', function () { return confirm("Are you sure you want to delete?"); }); 간단하지만 실수하기 쉽다. 참고 페이지는 아래 https://stackoverflow.com/questions/8498579/how-does-jquery-work-when-there-are..

@ 2022. 6. 24. 11:48

Tech/프론트엔드

JQuery - select 선택 값 가져오기

select 선택 값을 jquery로 가져오기, 너무 쉽지 그냥 select 선택해서 val() 하면 되는거 아냐~~~~~ 했다가 ㅋㅋㅋ 실패 NoneType 이 올라오는데 ㅋㅋㅋ 아래처럼 해야 한다. var selvalue = $('#selectbox_id').find(":selected").text(); https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown jQuery Get Selected Option From Dropdown Usually I use $("#id").val() to return the value of the selected option, but this time it doesn't ..

@ 2022. 5. 7. 16:05

Tech/프론트엔드

JQuery - 체크박스 선택시 input 활성화 및 포커스 주기

폼 객체를 한줄씩 쭉 나열되어 있고, 체크박스가 맨 앞에 있어서 체크를 하면 해당 줄이 활성화 되도록 하는 것 많이 정답들이 나와 있지만, 간단하게 구현한 결과를 저장 $("input:checkbox").on('click', function() { var target_input_name = "#" + $(this).val() + "_quantity" if ( $(this).prop('checked') ) { console.log($(this).val()) $(target_input_name).prop("disabled", false); $(target_input_name).focus(); } else { $(target_input_name).prop("disabled", true); $(target_in..

@ 2022. 5. 2. 09:10

Tech/프론트엔드

JQuery Ajax 로 form submit 하기 - form value 그대로 가져오기

요거 쉬운거 같은데, 예제들이 죄다 json으로 바꿔서 API 호출하는 형태로 되어 있는 것이 많네. 그냥 html 페이지에 있는 form submit을 jquery ajax 함수로 호출하는 방법을 정리해 두자. 이걸 한 이유는 submit 하고, 바로 그 정보를 이용해서 새창을 띄우도록 하려고 하니깐 ajax async false 로 동작 시켜야 했기 때문이다. 그냥 코드를 보자. $("#sel2").click(function(e){ e.preventDefault(); // avoid to execute the actual submit of the form. var button = $(this); var form = $("#mainform"); var actionUrl = form.attr('actio..

@ 2022. 4. 29. 19:04

Tech/프론트엔드

JQuery - select 박스 선택시 일부 disable 설정하기

그냥 노트 저장용, 선택된 값에 따라 특정 Input 을 비활성화 시킬 때 사용하는 코드 attr removeAttr prop 이런 것들을 잘써야 하네. $("[name$='-group0']").on("change", function(){ // //selected value // console.log($(this).val()); // console.log($("option:selected", this).attr("value")); // //selected option element // console.log($("option:selected", this)); // console.log($("option:selected", this).text()); // console.log($(this).find("op..

@ 2022. 4. 27. 17:42

Tech/프론트엔드

JQuery / JS에서 사용되는 코드 조각들

JQuery 혹은 자바스크립트 에서 사용되는 코드 조각들을 여기에 일단 유용한 것만 모아두자. 참고 - 셀렉트박스 유지를 위한 스크립트 페이지의 쿼리 파라메터를 읽어와서 기존 값을 유지하는 코드 함수, 그대로 가져왔는데 왠만하면 아래 글쓴이 링크로 가서 읽어보세요. (여긴 그냥 제 참고용으로 남겨둡니다. 설명은 원본글에서 읽으세요 ^^;;;) https://wayhome25.github.io/django/2017/03/01/django-99-my-first-project-5/ // get url query string var getUrlParameter = function getUrlParameter(sParam) { var sPageURL = decodeURIComponent(window.locatio..

@ 2021. 12. 10. 13:44

Tech/프론트엔드

Datatables JS 라이브러리로 데이터 다루기

데이터를 테이블로 표현하는 아주 좋은 라이브러리 Datatables 를 소개해 보려 한다. jquery 기반으로 시작된 듯 하나 요즘 트렌드에 맞게 서버사이드 스크립팅 머 이런것도 지원하는 것으로 보인다. 아주 많은 선구자들이 있으니 있다는 것을 아는 것이 중요하다. 아래 글을 꼭 참고하자. Grid 라이브러리-Datatables 사용법/예제 Grid 라이브러리-Datatables 사용법/예제 최근 사용하게 된 datatables 라이브러리에 대한 약간의 설명을 공유하고자 합니다. datatables는 데이터 그리드를 다루는 라이브러리로 '이 기능이 있었으면' 하는 부분은 거의 갖추고 있습니다. 한 kutar37.tistory.com 진짜 내용은 꼭 위 원본 글에 들어가서 보시기 바란다. 완전 만족할 듯..

@ 2021. 11. 22. 16:01

Tech/Django

Django ninja api 호출시 사전 Form 요소 검사 - Schema 활용

Django에서 ninja api를 정의하여 호출하는 경우, 데이터베이스의 중복이나 불일치 등등 DB와 연동하여 판단하는 것 말고 폼 객체에 필드 값이 일단 사전에 올바른지 간단하게 체크하는 것이 필요하다. 보통 이런경우 api에서 처리해도 되지만 Schma를 정의해서 처리하는 방법이 있다. 자체 공부용으로 정리하는 것이므로 두서 없어도 그냥 넘어가주세요. 여기서 정리한 모든 내용은 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) ninja api 구현 함수에 보면 아래와 같이 되어 있다. @api_router.post("register", response={201: None, 409: Mess..

@ 2021. 11. 16. 09:07

Tech/프론트엔드

DataTable - JS 데이터 테이블 표현

Data를 테이블 표현하는 것은 모든 데이터 서비스의 기본이다. 매번 이 부분을 구현하고 검색하고, 페이지네이션에 Export 기능까지 따로따로 하는데 이 모든것이 이미 구현이 되어 있다. Datatable.net 꼭 이 라이브러리를 활용하자. 여기서 정리한 모든 내용은 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) DataTable 일단은 한번 보면 안다. 아래 예제 사이트로 가서 봐라 데이터를 표현하는 테이블은 이걸 써야 한다. https://datatables.net/examples/ajax/objects.html 간단하게 Vue.js 를 이용하여 구현한 코드를 보자. Django 에서 ..

@ 2021. 11. 15. 16:53

Tech/프론트엔드

Vue.JS Delimiters 표기 바꾸기

Vue.JS Delimiters 를 기본적으로 {{ }} 이걸 많이 쓴다고 하는데, 이건 다른 곳에서도 쓰이는 표기라, 중복으로 사용되면 무엇인 적용될 지 잘 모르겠죠 그래서 일단 편한것으로 바꿔서 사용해 보자. 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) 아래 코드는 delimiters 를 [[ ]] 형태로 변경해서 사용하는 예제이다. 코드상에서 id="vue_div" 로 선언된 부분에서는 jinja2 같은 어떤 템플릿 베이스 엔진이 동작하더라도 여기에 정의한 대로 [[ ]] 로 쓰이는 변수, 문장들은 vue.js 껏으로 이해해서 동작이 된다. 간단하지만, 일단 나 같은 초보자들은 일단 알..

@ 2021. 11. 12. 17:46

Tech/프론트엔드

Vue.JS 클릭 이벤트 표기 - @click v-on:click

Vue.js 에서 DOM 에 클릭 이벤트 처리를 하고 싶다면 이벤트를 정의하면 된다. 그 정의 방법은 "v-on:eventname" 이런식으로 정의하면 된다. - 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) 공식 사이트에서 예제를 가져오면, https://vuejs.org/v2/guide/events.html We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. For example: Add 1 The button above has been clicked {{ co..

@ 2021. 11. 12. 15:38

Tech/Django

장고 개발 팁 - ORM 클래스 생성시 상속 전용으로 만들기

장고에서 ORM 을 사용하는 경우 Model 을 만들면 Class 객체 하나를 테이블로 만들어 버리게 된다. 그냥 추상 클래스로 상속해서 쓰게 하려는 경우 낭패가 된다 이때 사용하는 키워드가 Meta 라는 것이 있네. from Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) class 내에 "class Meta:" 라는 것을 하나 더 두고 abstract = True 로 속성을 설정하면, 이 class 는 DB 테이블로 변환되지 않고 상속에 쓸 수 있는 class 로 남겨둔다. 즉, TimeStampModel 에 보면 "updated_at" "created_at" 이라는 필드가 다른 테이블에 거의 공통으로 사용되고 있어 이 부분을 한 곳에 정리해 두고 상속해서 쓰도록..

@ 2021. 11. 10. 17:57