j క్వెరీలో మొత్తం పేజీని రీలోడ్ చేయకుండా divని రీలోడ్ చేయడం ఎలా

J Kverilo Mottam Pejini Rilod Ceyakunda Divni Rilod Ceyadam Ela



సైట్ కోసం బహుళ వెబ్ పేజీలను సృష్టిస్తున్నప్పుడు, డేటాను ప్రతిరూపం చేయాల్సిన అవసరం ఉంటుంది. ఉదాహరణకు, ట్రిగ్గర్ చేయబడిన ఈవెంట్‌పై వేరొక వెబ్ పేజీలో అదే డేటాను ఉపయోగించడం. అటువంటి పరిస్థితులలో, మొత్తం పేజీని రీలోడ్ చేయకుండా divని రీలోడ్ చేయడం వలన డేటాను సమర్థవంతంగా నిర్వహించడంలో సహాయపడుతుంది, తద్వారా సమయం ఆదా అవుతుంది.

ఈ బ్లాగ్ JavaScriptలో మొత్తం పేజీని రీలోడ్ చేయకుండా divని రీలోడ్ చేసే విధానాలను చర్చిస్తుంది.

j క్వెరీలో మొత్తం పేజీని రీలోడ్ చేయకుండా divని రీలోడ్ చేయడం ఎలా?

ది ' div ''తో కలిపి j క్వెరీ యొక్క 'ఆన్()' పద్ధతిని ఉపయోగించి మొత్తం పేజీని రీలోడ్ చేయకుండానే రీలోడ్ చేయవచ్చు లోడ్ () ” పద్ధతి.







ఆన్() పద్ధతి మూలకాల కోసం ఒకటి లేదా అంతకంటే ఎక్కువ ఈవెంట్ హ్యాండ్లర్‌లను అనుబంధిస్తుంది మరియు లోడ్() పద్ధతి కంటెంట్‌ను పొందిన మూలకంలోకి లోడ్ చేస్తుంది. డివిని యాక్సెస్ చేయడానికి మరియు ట్రిగ్గర్ చేయబడిన ఈవెంట్‌పై దాన్ని మళ్లీ లోడ్ చేయడానికి ఈ పద్ధతులను కలపవచ్చు.



ఉదాహరణ
కింది HTML కోడ్‌ని స్థూలంగా చూద్దాం:



< శరీరం >
< h2 > మొత్తం పేజీని రీలోడ్ చేయకుండా divని రీలోడ్ చేయడం ఇలా h2 >
< div id = 'myDiv' >
< p > జావాస్క్రిప్ట్ అనేది ఫంక్షన్లను కలిగి ఉన్న ప్రోగ్రామింగ్ భాష , వేరియబుల్స్ , సంఘటనలు మరియు వస్తువులు మొదలైనవి. p >
div >
< బటన్ > మళ్లీ లోడ్ చేయండి బటన్ >
శరీరం >

పై కోడ్ బ్లాక్‌లో:





  • పేర్కొన్న శీర్షికను చేర్చండి.
  • అలాగే, 'id' లక్షణాన్ని కలిగి ఉన్న '
    ' మూలకాన్ని పేర్కొనండి.
  • ఆ తర్వాత, '

    ' ట్యాగ్‌లో పేరాగ్రాఫ్ మరియు కావలసిన కార్యాచరణను ట్రిగ్గర్ చేయడానికి బటన్‌ను చేర్చండి.

ఇప్పుడు, జావాస్క్రిప్ట్ కోడ్‌కి వెళ్దాం:

< స్క్రిప్ట్ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' >
స్క్రిప్ట్ >
< స్క్రిప్ట్ >
$ ( 'బటన్' ) . పై ( 'క్లిక్' , ఫంక్షన్ ( ) {
$ ( '#myDiv' ) . లోడ్ ( '#myDiv' )
అప్రమత్తం ( 'రీలోడెడ్' )
} ) ;

ఈ కోడ్ స్నిప్పెట్‌లో



  • ' ద్వారా j క్వెరీ లైబ్రరీని చేర్చండి src ' గుణం.
  • సృష్టించిన బటన్‌ను యాక్సెస్ చేసి, 'ని అనుబంధించండి పై() ” పద్ధతి.
  • ఇది జోడించిన ఈవెంట్ నుండి స్పష్టంగా కనిపించే బటన్ క్లిక్‌పై పేర్కొన్న ఫంక్షన్‌ను అమలు చేస్తుంది ' క్లిక్ చేయండి ”.
  • ఫంక్షన్ నిర్వచనంలో, చేర్చబడిన “ని యాక్సెస్ చేయండి
    'మూలకం మరియు 'ని ఉపయోగించి దాన్ని మళ్లీ లోడ్ చేయండి లోడ్ () 'దానిని సూచించడం ద్వారా పద్ధతి' id ”.
  • ఫలితంగా, బటన్ క్లిక్‌పై చేర్చబడిన డివి మళ్లీ లోడ్ చేయబడుతుంది మరియు హెచ్చరిక డైలాగ్ బాక్స్ ద్వారా పేర్కొన్న సందేశం ప్రదర్శించబడుతుంది.

అవుట్‌పుట్

మొత్తం పేజీని రీలోడ్ చేయకుండా div విజయవంతంగా రీలోడ్ చేయబడిందని గమనించవచ్చు.

ముగింపు

మొత్తం పేజీని రీలోడ్ చేయకుండా divని మళ్లీ లోడ్ చేయడానికి, “ని ఉపయోగించండి పై() 'పద్ధతి'తో కలిపి లోడ్ () ” పద్ధతి. ట్రిగ్గర్ చేయబడిన ఈవెంట్‌పై div యొక్క కంటెంట్‌ను యాక్సెస్ చేయడం మరియు దాన్ని మళ్లీ సూచించడం ద్వారా దాన్ని మళ్లీ లోడ్ చేయడానికి ఈ పద్ధతులు ఉపయోగించబడతాయి. ఈ బ్లాగ్ మొత్తం పేజీని రీలోడ్ చేయకుండా divని రీలోడ్ చేసే పద్ధతిని వివరించింది.