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.
Related
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/
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>
Have an anchor tag, trying to click it from the javascript but not responding, while loading the page it should go to next.php without click anchor tag manually.how can I archive this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-2.0.3.js"></script>
<script type="text/javascript">
alert("hai");
$(document).ready(function() { $('#about').click(); });
</script>
</head>
<body>
<div>
click here
</div>
</body>
</html>
Use $('selector')[0], as $('selector') returns a jQuery object, so $('selector').click() will fire the click handler, while $('selector')[0].click() would fire the actual click.
$(document).ready(function () {
$('#about')[0].click(); //$('#about').get(0).click();
});
Demo
You can not use javascript to fire click event
It should use
<script type="text/javascript">
$(document).ready(function() {
document.location.href='/next.php'
});
</script>
Here is the code that can help you
$(document).ready(function() {
$(document).ready(function() {
$('a').trigger('click');
});
})
function abc() {
alert("");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me not
If you want the recommended way then use this inside $(document).ready
window.location="where ever you want to go";
If you want the page to go to next.php without clicking then place the window.location directly into $(document).ready(function() { });
Click() function is used when you want to trigger click event. ie. when you want to trigger some action when anchor tag is clicked.
<script>
alert("hai");
$(document).ready(function() {
window.location = 'next.php'; //If you wish the page to automatically go to next page on page load.
$('#about').click( // If you wish to do something clicking anchor
function(){
alert("Hello");
});
});
</script>
$(document).ready(function() { $('#about').trigger('click'); });
Updated:
$(document).ready(function() { $('#about')[0].click(); });
I'm trying to figure out why my jQuery isn't working. I've got jQuery linked to, and then after that, I try to bind to the textarea content. I've used name=content and name=#content both.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('input[name=content]').bind('keyup',function(){
$('#desctag').val($(this).length)
});
</script>
Why isn't it working?
Code is now:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name=#content]').bind('keyup',function(){
$('#desctag').val($(this).length)
})})
</script>
You need to put it in a document.ready function so it executes when the DOM is ready.
$(document).ready(function() {
$('input[name=content]').bind('keyup',function(){
$('#desctag').val($(this).length);
});
});
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.
});