Working with elements inside a dynamically loaded <div> - javascript

ON the display page, I'm loading contents into a container div using ("#mydiv").load("myphpfile.php"); This works fine. My question is, how do I work with elements inside that loaded div?
Here is the code sample:
<div id="contents"></div>
<script type="text/javascript">
$("#contents").load("___server_side.php");
$("#message").click(function(){
console.log('clicked');
});
</script>
"#message" is an element in the loaded div. How do I access it and assign functions to it from the display page?

You can use your code as is, yet I would add a .ready().
<div id="contents"></div>
<script type="text/javascript">
$("#contents").load("___server_side.php");
$("#message").ready(function(){
$(this).click(function(){
console.log('clicked');
});
});
</script>
Another option is to add the event callback once loading is finished.
<div id="contents"></div>
<script type="text/javascript">
$("#contents").load("___server_side.php", function(){
$("#message", this).click(function(){
console.log('clicked');
});
});
</script>
Otherwise I would use the .on() option.
<script type="text/javascript">
$("#contents").on("click", "#message", function(){
console.log('clicked');
});
$("#contents").load("___server_side.php");
</script>
<div id="contents"></div>
See More:
https://api.jquery.com/load/
https://api.jquery.com/on/

Related

jQuery click action before other component load

Optimized my website with WP Rocket and delayed javascript execution with some exclusions. Excluded: /jquery-?0-9.(.min|.slim|.slim.min)?.js and js-(before|after) and my script which has code:
jQuery(document).ready(function() {
console.log('F Loaded');
jQuery('#div_id').bind('click', function() {
jQuery('#desired_element').css('display','block');
console.log('Clicked')
});
});
When I'm loading a website - getting first message in console "F loaded", but after click - action happens only after all rest scripts are loaded. Is there any way to avoid waiting for all other scripts and make that action (style add after click) immediately ? Tried with plain javascript but got same result.
You can use modern way to write click event outside the document ready you will be able to perform click outside document ready.
$(document).ready(function() {
console.log('F Loaded');
});
$(document).on('click', '#div_id', function(event){
jQuery('#desired_element').css('display','block');
console.log('Clicked')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_id">Click me</div>
<div id="desired_element" style="display:none">TEST CONTENT</div>
<html>
<head><title>test</title></head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Clickme">Click me</div>
<div id="Contentsection" style="display:none">Test Content content....</div>
<script>
$('#Clickme').on('click', function(event){
$('#Contentsection').show();
console.log('Clicked')
});
</script>
</body>
</html>

Keep hide javascript after refresh page

how to keep hide onclick
this my javascript
<script type="text/javascript">
function gethide(a){
$("#brow"+a).hide();
$("#del"+a).hide();
}
</script>
With JQuery you need to do it after the DOM is ready.
This code will hide all elements with the id attribute that starts with brow or del after the page is loaded:
<script type="text/javascript">
function gethide(a){
$("#brow"+a).hide();
$("#del"+a).hide();
}
$( document ).ready(function() {
$("[id^=brow]").hide();
$("[id^=del]").hide();
});
</script>
See more in the official documentation.

Textarea keypress not working

My code won't work. It's supposed to alert whenever a user presses a key while focused inside of a textbox element!
$("#yourcode").keyup(function() {
alert("I found Hogwarts.");
});
You need to wait until the DOM is ready before adding the keyup handler. This can be achieved by calling .ready() after using $() to get a DOM reference to the document (i.e. $(document)). Also make sure you load jQuery before you load the script:
JS:
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#yourcode").keyup(function() {
alert("I found Hogwarts.");
});
});
</script>
HTML:
<textarea id="yourcode"></textarea>
Here is a working example (also available in this jsFiddle):
$(document).ready(function(){
$("#yourcode").keyup(function() {
alert("I found Hogwarts.");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="yourcode"></textarea>

jQuery stops working after loading content into a div

For example I have the following HTML named index.html:
<html>
<head>
<style>
#content { float:left; }
#sub { float:right; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">
Sub content
</div>
</body>
</html>
And a simple JS file named action.js:
$(document).ready(function(){
$('button.loadSub').click(function(){
$('#sub').load('test.html');
});
$('button.hide').click(function(){
$('#sub').fadeOut('slow');
});
});
As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html:
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
I got two problems here:
Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.
Secondly, after I had tried inserting
script type="text/javascript" src="action.js"
inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn't load the subcontent again.
Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.
You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.
You might want to try doing a delegate attachment instead.
$('#sub').on('click', 'button.hide', function () {
$('#sub').fadeOut('slow');
});
On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.
On First page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#content{float:left;}
#sub{float:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">Sub content</div>
</body>
</html>
On the second page (the page that's loaded into the div, add this:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
The hide button isn't on the page when you try to bind the event so it is never registered.
Change it to use on like this (assuming version 1.7+)
$(document).on('click', 'button.hide', function(){
$('#sub').fadeOut('slow');
});
or delegate if an older version:
$(document).delegate('button.hide', 'click', function(){
$('#sub').fadeOut('slow');
});
This attaches the event handler at the document level so will work for any new content added to the page.

hide div when page load

I have jquery issue, Kindly see my jquery code:
$(document).ready(function(){
$(".toggle_container").show();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
My .toggle_container is shown always its good, But I want to close it first time, when page load. Can you please provide me any solution?
I dont want to use $(".toggle_container").hide(); function for this problem because when i click on href then .toggle_container should not hide, It should open.
Regards.
You can just add attribute
style="display:none"
to your element .toggle_container.
Then on first call of $(document).ready it will be shown.
The full test example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
</script>
</head>
<body>
<h2 class="trigger">Toggle</h2>
<div class="toggle_container" style="display:none">Container</div>
</body>
</html>
Note: there`s no $(".toggle_container").show(); on $(document).ready
remove the
$(".toggle_container").show();
from your $(document).ready function.
in html part add style="display:none" for the toggle_container div.
check the #HCK s reply. he is clearly mentioned it..
Once the document gets loaded, a alert box will be prompted "page loaded".
$(document).ready(function(){
alert('page loaded'); // alert to confirm the page is loaded
$('.divClassName').hide(); //enter the class or id of the particular html element which you wish to hide.
});

Categories