Currently I use
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#output").load("https://somesite.com/Search.html");
});
});
</script>
<body>
<div class="formClass">
<div id="output">
</div>
<button type="button">Search</button>
</div>
to implement an offsite html into my current page.
Howevee this way, the visitor is required to press the "Search" button to reveal the content.
Is there a way to 'automatically' load this, without user interaction ?
(I know a way to trigger the button at siteload, but I'd rather have the button not be there in the first place)
Move the load call out of the click event listener:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#output").load("https://somesite.com/Search.html");
});
</script>
<body>
<div class="formClass">
<div id="output">
</div>
<button type="button">Search</button>
</div>
Related
I have this code, and I want to hide a div clicking on a tag
I was using some jQuery scripts to do that, but I don't know why, the scripts aren't loading.
Code:
<body>
<div class="myprojects">
my projects
</div>
<br>
<div class="links">
domain.gq
<br>
domain.art
</div>
<div class="contactme">
contact me
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$('#links').hide();
</script>
<script>
$(document).ready(function(){
$("#myprojects").click(function(){
$("#links").fadeToggle();
});
});
</script>
</body>
I want people to click on "my projects" and then, the links div to show up, but scripts aren't loading.
You have selector issues in several places. e.g:
You used the id selector
$('#links').hide();
You should use the class selector:
$('.links').hide();
Same issue with #myprojects, it should be .myprojects the class selector.
BTW, why not put the hide logic inside the $(document).ready method?
<div class="links">
domain.gq
<br>
domain.art
</div>
<div class="contactme">
contact me
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
</script>
<script>
$(function() {
$('.links').hide();
$(".myprojects").click(function() {
$(".links").fadeToggle();
});
});
</script>
Want to create a DIV which toggle when I click on youtube subscription button. Also, I want to hide the Youtube button.
This seems easy, but Jquery toggle method is not working on youtube sub button.
CODE ↓
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
//Your code here
$('#xx2').click(){
$('#cc').toggle();
}
});
</script>
<div id="cc" style="display:none;" >
<h1>this is a hidden item</h1>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default" ></div>
</div>
See this photograph :
Please close the script tag and provide some text inside the xx2 div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$('#xx2').click(function(e){
$('#cc').toggle();
});
});
</script>
<div id="cc" style="display:none;">
<h1>this is a hidden item</h1>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default" >text</div>
</div>
Syntax error
Change $(document) instead of $("document")
And click function declaration was wrong. initiate the click function of xx2 and the toggle inside the click function
$(document).ready(function(e) {
$('#xx2').click(function() {
$('#cc').toggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="cc" style="display:none;">
<h1>this is a hidden item</h1>
</div>
<div id="btn">
<div id="xx2" class="g-ytsubscribe" data-channelid="UCwevqbHI8ppBSvVKESoLpPQ" data-layout="full" data-count="default">xx</div>
</div>
there is error in the syntax of jquery, use following cod:
<script type="text/javascript">
$(document).ready(function(e){
$('#xx2').click(function(){
$('#cc').toggle();
});
});
</script>
Maybe the classic way will work:
HTML:
<div id="cc">
<h1>this is a hidden item</h1>
</div>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default">
xxx <!-- The xxx is used for better hitting -->
</div>
</div>
I removed the style attribute from #cc.
Added following CSS:
div.cc {display:none;}
Javascript:
$(document).ready(function(){
$('#xx2').click(function() {
$('#cc').toggleClass("cc");
});
});
So far I understand your problem right, this did work according Jsfiddle.net .
I am new to javascript and I was following a tutorial where based on the code below, the button content was supposed to change to adding before displaying the alert but my code is not working
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<input type="submit" value="Add to Cart" />
</div>
</form>
<script>
$(document).ready(function(){
$("button").click(function(){
button_content.html('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
</script>
How can I solve this problem ?
$("button") is not the right selector. That will look for <button> elements, and you don't have one.
You'll want $("input[type=submit]"), or better yet, give it an ID and use the selector on that: $("#mybutton").
Keep in mind that this will still submit the form back to the server - it'll just wait until the alert to do so.
Give this code a try for a few reasons.
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<!--<input type="submit" value="Add to Cart" />-->
<!-- First use a button not an input and give it an ID -->
<button id="btn_add" type="submit">Add to Cart</button>
</div>
</form>
<script>
// You can shorten up the ready statement
//$(document).ready(function(){
$(function(){
// Now bind a click handler with button's ID
// This is an older way of binding in jQuery
// $("#btn_add").click(function(){
// Use jQuery's on() instead.
$("#btn_add").on("click", function(){
// Change the HTML of the button by getting it by it's new ID
// button_content.html('Adding...'); //Loading button text
$("#btn_add").html('Adding...');
alert("Item added to Cart!"); //alert user
});
});
</script>
Use an ID anywhere that you can. Feel free to shorten up your ready statement. Use jQuery's on handler instead of click.
You don't have a tag to select it with jquery. Your html has to look like this for it to work:
<form class="form-item">
<button class="cart">Add to Cart</button>
</form>
Your problem is in the jquery selector and in the function reference
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<input type="submit" value="Add to Cart" />
</div>
</form>
<script>
$(document).ready(function(){
$("input[type=submit]).click(function(){
$(this).html('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
</script>
<button name="submit" value="Add to Cart" id="sendFeed">Add to card</button>
<script>
$(document).ready(function(){
$("button").click(function(){
button_content.html('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
return false;
});
});
You do not have a button element in your code. If you are targeting the input element, then you need to use the selector tag for input and then use .val() option to display the text.
$(document).ready(function(){
$("input").click(function(){
$(this).val('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
Example : https://jsfiddle.net/fz66qdv4/
Try it :
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form class="form-item">
<div class="cart">
<input type="submit" value="Add to Cart" />
</div>
</form>
<script>
$(document).ready(function(){
$("input[type=submit]").click(function(){
$(this).val('Adding...'); //Loading button text
alert("Item added to Cart!"); //alert user
});
});
</script>
</body>
</html>
I have multiple divs inside a form tag.
<form id="RegdForm">
#Html.Partial("../Partials/_PatientEdit")
The partial view,
<div id="zafar"> <h3>Zafar</h3> </div>
When I try to hide all the divs its working like below
<script type="text/javascript">
$('Div').hide();
</script>
But when I try to hide specific Div it's not hiding at all.
<script type="text/javascript">
$('#zafar').hide();
</script>
I am using ASP.Net MVC 5 with Razor.
Any help appreciated.
Try this
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="zafar">
<h3>Zafar</h3>
</div>
<div class="well well-sm">
<button class="btn btn-success" type="submit">Save</button>
<button class="btn btn-primary" type="button" data-bind="click: printPatient">Print</button>
<button class="btn btn-danger" type="button" data-bind="click: resetForm">Reset</button>
</div>
<button id="hide">Hide</button>
<button id="hideAll">Hide All</button>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$('#zafar').hide();
});
$("#hideAll").click(function(){
$('Div').hide();
});
});
</script>
</body>
</html>
Here is your answer:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#zafar").hide();
});
</script>
Add your respective function inside this.
$(function() {
$('#zafar').hide();
})
After a long googling I found out one solution to this.
As the div was inside the form tag, the way accesing the div can be done as,
<script type="text/javascript">
$('#RegdForm #zafar').hide();
It helped me to achieve the task.
I have a problem adding bootstrap class to button with a function. I want to add the disable class to #eng.
My code:
<li>
<div class="btnLang">
<form id="formLang1">
<button id="slo" class="btn btn-mini disabled">slo</button>
</form>
<form id="formLang2" onsubmit='return eng_clicked()'>
<button id="eng" class="btn btn-mini">eng</button>
</form>
</div>
</li>
<script type="text/javascript">
function eng_clicked(){
$('#eng').addClass("disabled");
}
</script>
you forgot the script tag
<script type="Text/javascript">
//scripts
</script>
Anyway I have better solution for you using jQuery, just remove "onsubmit='return eng_clicked()'" and and replace the codes below instead of your codes:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$("#formLang2").click(function() {
$('#eng').addClass("disabled");
});
</script>
have you add the script tag?
<script type="text/javascript">
function eng_clicked(){
$('#eng').addClass("disabled");
}
</script>