Sorry for being such a beginner but I spent days try to find an answer and now I think your expertise is needed.
I try to do something like "If I click on li, then the text written in li is displayed in a search box (ID '#input#) and automatically the request is launched."
My script works fine but the request/search IS NOT launched.I blocked at the last step of the process.
Thank you very much for your help.
HTML
<ul id="test">
<li>Hello world</li>
<li>Hello world 2</li>
</ul>
Javascript, JQuery
<script type="text/javascript">
$(document).ready(function(){
$("#test li").click(function (){
varindex = $(this).text();
$('#input').val("Text is in the search box!"+" "+varindex);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#test li").click(function (){
$('#input').focus();
$('#input').trigger(jQuery.Event('key', {which: 13}));
});
});
</script>
This works:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script>
$(document).ready( function () {
$('#test li').click ( function () {
$('#input').attr("value", $(this).text ());
$('#myform').submit ();
});
});
</script>
</head>
<body>
<ul id="test">
<li> Hello world </li>
<li> Hello world 2 </li>
</ul>
<form id="myform" action="xxx.yyy.zz" method="get">
<input id="input" name="myinput" type="text" />
</form>
</body>
Related
I want to use this script on angular project but is not working how it should, it ignores every $ line and I got just the window alert.
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
$(function () {
window.alert('test') ;
$('.genealogy-tree ul').hide();
$('.genealogy-tree>ul').show();
$('.genealogy-tree ul.active').show();
$('.genealogy-tree li').on('click', function (e) {
var children = $(this).find('> ul');
if (children.is(":visible")) children.hide('fast').removeClass('active');
else children.show('fast').addClass('active');
e.stopPropagation();
});
});
</script>
and the html code
<div class="genealogy-body genealogy-scroll">
<div class="genealogy-tree">
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="" alt="Member">
<div class="member-details">
John
</div>
</div>
</div>
</a>
.....
This my jQuery code for displaying a dropdown menu on hovering over an image. Imgbtn_Dsp is the id of the image and nav_menu is the id of the list, but it's not working.
<html>
<head>
<title>Dropdownlist Hover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script>
$('#Imgbtn_Dsp').mouseover(function() {
$('#nav_menu').slideDown();
});
</script>
</head>
<body>
<form id="form1">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
<div>
</form>
</body>
</html>
Get rid of div and modify ul like this if you want to work it properly ;)
<ul id="nav_menu" style="display: none">
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
Modify your script like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function (){
$('#nav_menu').hide();
$('#Imgbtn_Dsp').mouseover(function () {
$('#nav_menu').slideDown();
});
$('#Imgbtn_Dsp').mouseleave(function () {
$('#nav_menu').slideUp();
});
});
</script>
You can see the cod in action in this jsfiddle.
it could be done without jquery. all you have to do is define parent container of image and list set some css.
<div class="parentDIV">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
</div>
now define some css:-
.parentDIV{position:relative}
#nav_menu{position:absolute;
left:0;top:99%;display:none;}
.parentDIV:hover #nav_menu{display:block}
hopefully you will find it useful
I'm doing some exercises to practice my JQuery but i can't manage to find the solution with this. I just want to hide the first element of the list when it's clicked.
I've tried this:
JS
$(document).ready(function(){
$("li.oculta").click(function(){
$(this).hide();
});
});
<html>
<head>
<style>
p{
background-color: #AA55AA;
}
</style>
<script src="/jquery-2.1.1.js"></script>
</head>
<body>
<ul class='list1'>
<li class="oculta">Taco</li>
<li>Jamón</li>
<li>Queso</li>
</ul>
<ul class='list2'>
<li class="oculta">Coke</li>
<li>Leche</li>
<li>Té</li>
</ul>
</body>
</html>
But i can't figure out why isn't working. Any ideas?
Use on('click',function(){... instead of .click(function(){...
$(document).ready(function(){
$("li.oculta").on('click',function(){
$(this).hide();
});
});
jsfiddle
Very simple error, the code is all right, but you forgot to import jQuery.
$(document).ready(function(){
$("li.oculta:first-of-type").click(function(){
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style>
p{
background-color: #AA55AA;
}
</style>
<script src="/jquery-2.1.1.js"></script>
</head>
<body>
<ul class='list1'>
<li class="oculta">Taco</li>
<li>Jamón</li>
<li>Queso</li>
</ul>
<ul class='list2'>
<li class="oculta">Coke</li>
<li>Leche</li>
<li>Té</li>
</ul>
</body>
</html>
Once an li is clicked I want to load a separate html page with content on the main index page.
HTML
<nav>
<ul>
<li>Planet 1</li>
<li>Planet 2</li>
<li>Planet 3</li>
<li>Planet 4</li>
</ul>
</nav>
So once one of the links is clicked I want the jquery to load the content on the same page.
$(document).ready(function(){
// load("location-to-your-file", function(){})
//var indexCatch = $('ul li').click(function(){ alert($(this).index()); });
$("li").click(function(){
$("main").load("tab-1.html", function(){
// Instead of creating another selector combining it from $(this).hide()
// $($(this).hide()).fadeIn(1000);
// you can chain the methods:
$(this).hide().fadeIn(1000);
});
});
Its working for me,
save this file example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Include</title>
</head>
<body>
<input type="text" id="txt_name">
<a id="link" href="#">Click Test Link</a>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$("#link").on('click',function(){
value=$("#txt_name").val();
window.location = "tab-1.php?txt_value="+value;
});
</script>
</body>
</html>
save this file tab-1.php
<b><i>Hello : <?php echo $_GET['txt_value']; ?></i></b>
You're problem is probably the fact that you are using <a> tags
you don't need them
<nav>
<ul>
<li data-href="tab-1.html">Planet 1</li>
<li data-href="tab-2.html">Planet 2</li>
<li data-href="tab-3.html">Planet 3</li>
<li data-href="tab-4.html">Planet 4</li>
</ul>
</nav>
$(document).ready(function(){
$("li").click(function () {
$("main").load(this.dataset.href, function(){
$(this).hide().fadeIn(1000);
});
});
});
Here we get the value of that specific link href attribute, and inject it into the load function
NOTE: As I can't show a demo of it using fiddle or S.O code panel, here is a DEMO showing how this code works
$(document).ready(function () {
$("nav a").each(function () {
$(this).click(function (e) {
e.preventDefault();
var href = $(this).attr("href");
$("main").load(href).hide().fadeIn(1000);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav>
<ul>
<li>Planet 1
</li>
<li>Planet 2
</li>
<li>Planet 3
</li>
<li>Planet 4
</li>
</ul>
</nav>
<main></main>
Can someone help me figure out why the ajax content is not loaded in the following
http://jsfiddle.net/nmsZX/
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div id="casetabs">
<ul>
<li>
Tab A
</li>
<li>
Tab B
</li>
</ul>
</div>
Adding below piece of code in you code works
<script type="text/javascript">
$(function() {
$('#casetabs').tabs({remote: true});
});
</script>