AMcoder - javascript, python, java, html, php, sql

փոխարինել ապագա վերնագիրը տեքստային մուտքագրմամբ

Ողջույն, ես փորձում եմ վերնագիրը փոխարինել, երբ կտտացնում եմ դրա վրա տեքստային մուտքագրմամբ, վերնագիրը փոփոխելու համար, ես օգտագործում եմ այս կոդը.

<div style="font-size: 70%;"><h2 class="outer"><?php echo $designation; ?> </h2></div>

այս div-ը բեռնված է մեկ այլ սկրիպտի միջոցով և, հետևաբար, սկզբնական էջում չէ, ուստի կարծում եմ, որ մենք պետք է օգտագործենք պատվիրակության մեթոդը:

Ահա jquery սկրիպտը, որը ես օգտագործում եմ դրա ֆոնի գույնը վարդագույն դարձնելու համար.

<script src="jquery-1.10.2.min.js">
  $(document).ready(function(){
     $("#right").delegate("h2","click",function(){
       $("h2").css("background-color","pink");
     });
  });
 </script>

Կա՞ պատկերացում, թե ինչպես փոխարինել վերնագիրը այս div-ում տեքստի մուտքագրման պիտակով: և կա՞ գաղափար, թե ինչպես մուտքագրման դաշտից դուրս սեղմելուց հետո փոփոխությունը ներկայացնել տվյալների բազա: շնորհակալություն

javascript php html jquery
09.10.2013

Պատասխանները:


1

Վերնագիրը «թարմացնելու» համար անհրաժեշտ է h2 տարրի html-ը փոխարինել input տարրով, որը սահմանված է ընթացիկ վերնագրի համար: Այնուհետև դուք պետք է ունկնդիր ավելացնեք, որպեսզի երբ օգտագործողը սեղմի այդ մուտքագրման տուփից, նա AJAX հարցում ուղարկի ձեր սերվերի որևէ այլ կայք, որը կարգավորվել է տվյալների բազան նոր վերնագրով թարմացնելու համար: Այս կոդը հաջողությամբ է զբաղվում

$(function(){
  $('#right').on('click', 'h2', function(){
    var $h2 = $(this);
    var old = $h2.html();

    if(/<input type="text"/.test(old))
      return;

    $h2.html('<input type="text" value="' + old + '"/>')
       .find('input')
       .focus()
       .on('blur', function(){
         var value = this.value;
         $.post('/new_title.php', {title: value})
          .done(function(){
            $h2.html(value);
          })
          .fail(function(){
            $h2.html(old);
            alert('Could not update title');
          });
       });
  });
});

Համոզվեք, որ փոխում եք url-ը $.post-ում այն ​​url-ով, որտեղ կարգավորել եք ձեր ունկնդիրը: Օրինակ ունկնդիրը նման կլինի.

new_title.php

<?php

require('DB.class.php'); //Require your DB Class

if($_POST && $_POST['title']){
  DB::updateTitle($_POST['title']);
}

?>
09.10.2013
  • երբ ես սեղմում եմ տեքստի դաշտը, այն տպում է սա՝ ‹input type= և տեքստի մուտքագրումից դուրս՝ '/›' 10.10.2013
  • @TarikMokafih - Ներողություն եմ խնդրում: Այն նորից գործարկում էր գործառույթը, երբ դուք սեղմեցիք մուտքագրման վրա: Դա կանխելու համար ես չեկ եմ ավելացրել։ 10.10.2013

    • 2

    Ձեր HTML:

    <h2 style="cursor:pointer;">Click Me</h2>

    Ձեր JS:

    $( "body" ).delegate( "h2", "click", function() {
   $( this ).html( '<input type="text" value="yourValue">' ).find('input').focus();

    $("input").focusout(function(){
            $("h2").html( this.value  );
    }).click(function(e){
        e.stopPropagation();
        return true;
    });
});

    Ձեր մուտքագրումը ներկայացնելու համար դուք կարող եք օգտագործել պարզ $.ajax POST հարցումը «.focusout» ֆունկցիայի մեջ ԿԱՄ Aust $.փոստ կոդի նման մի բան: Սա ձեր տարբերակներն են: պարզապես ուղարկեք ձեր տվյալները:

    Մանրամասների համար տես Դեմո:

    09.10.2013

    3

    Վստահ չեմ, թե ճիշտ եմ հասկանում, թե ինչի էիք փորձում հասնել: Բայց որտեղի՞ց է ծագում id «right» ունեցող տարրը: Արդյո՞ք սա այն մեկն է, որը բեռնված է մեկ այլ սցենարից: Այդ դեպքում փորձիր

    $(document).ready(function(){
    $(document).on('click', '#right', function(){
        $("h2").css("background-color","pink");
    })
});
    09.10.2013
  • id իրավունքով տարրը մեծ div-ն է, որտեղ ես կբեռնեմ այս նոր div-ը 10.10.2013

    • 4

    Div բովանդակությունը փոխարինելու համար օգտագործեք կոդը.

    $('div').html('<input type="text" name="abc" />');
    09.10.2013
  • Շնորհակալություն, այն աշխատեց, բայց դուք պատկերացնու՞մ եք, թե ինչպես կարելի է վերնագրի տեքստը տեղադրել այս նոր տեքստային մուտքագրման մեջ և այնուհետև փոփոխել այն: 10.10.2013
  • Դուք պետք է հստակեցնեք ձեր հարցը՝ հղում կատարելով կոդի բլոկներին (վերնագիր, տեքստի մուտքագրում) և կոնկրետ ինչի եք ուզում հասնել: Ներկայումս ես չեմ կարող պատասխանել, քանի որ ես լիովին վստահ չեմ, թե ինչ եք ուզում ստանալ պատասխան: 10.10.2013
  • Ահա թե ինչ եմ ուզում անել. jsfiddle.net/3FKzH բացառությամբ, որ իմ դեպքում h2 թեգը չէ սկզբնական էջում, բայց հետո կբեռնվի սցենարով: Շնորհակալություն 10.10.2013
    • Նոր նյութեր
    Օգտագործելով Fetch Vs Axios.Js-ը՝ HTTP հարցումներ կատարելու համար
    JavaScript-ը կարող է ցանցային հարցումներ ուղարկել սերվեր և բեռնել նոր տեղեկատվություն, երբ դա անհրաժեշտ լինի: Օրինակ, մենք կարող ենք օգտագործել ցանցային հարցումը պատվեր ներկայացնելու,..
    Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար
    Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար Ինչպե՞ս հանգստացնել ձեր միտքը և աշխատեցնել ձեր պրոցեսորը: Ինչպես մնալ հանգիստ և զարգանալ ճնշման տակ...
    Մեքենայի ուսուցում բանկային և ֆինանսների ոլորտում
    Բարդ, խելացի անվտանգության համակարգերը և հաճախորդների սպասարկման պարզեցված ծառայությունները բիզնեսի հաջողության բանալին են: Ֆինանսական հաստատությունները, մասնավորապես, պետք է առաջ մնան կորի..
    Ես AI-ին հարցրի կյանքի իմաստը, այն ինչ ասում էր, ցնցող էր:
    Այն պահից ի վեր, երբ ես իմացա Արհեստական ​​ինտելեկտի մասին, ես հիացած էի այն բանով, թե ինչպես է այն կարողանում հասկանալ մարդկային նորմալ տեքստը, և այն կարող է առաջացնել իր սեփական արձագանքը դրա..
    Ինչպես սովորել կոդավորումը Python-ում վագրի պես:
    Սովորելու համար ծրագրավորման նոր լեզու ընտրելը բարդ է: Անկախ նրանից, թե դուք սկսնակ եք, թե առաջադեմ, դա օգնում է իմանալ, թե ինչ թեմաներ պետք է սովորել: Ծրագրավորման լեզվի հիմունքները, դրա..
    C++-ի օրական բիթ(ե) | Ամենաերկար պալինդրոմային ենթաշարը
    C++ #198-ի ամենօրյա բիթ(ե), Ընդհանուր հարցազրույցի խնդիր. Ամենաերկար պալինդրոմային ենթատող: Այսօր մենք կանդրադառնանք հարցազրույցի ընդհանուր խնդրին. Ամենաերկար palindromic substring...
    Kydavra ICAReducer՝ ձեր տվյալների ծավալայինությունը նվազեցնելու համար
    Ի՞նչ է ICAReducer-ը: ICAReducer-ն աշխատում է հետևյալ կերպ. այն նվազեցնում է նրանց միջև բարձր փոխկապակցված հատկանիշները մինչև մեկ սյունակ: Բավականին նման է PCAreducer-ին, չնայած այն..