Stuck to display profile(data from server using $.getJSON) in the same page using jQuery append(), as I'm new to this platform. Commented out the area where I stuck,
<body>
<div id="homepage">
<button id="home">Home</button>
</div>
<div data-role="content" id="old_content" style="text-align: center">
<button data-icon="arrow-d">Select Below Options</button>
<div data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-1">
<!-- <option>--Course--</option> -->
<option value="mba">MBA</option>
<option value="msc">MSc</option>
</select>
</div>
<div data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-2">
<!-- <option>--Country--</option> -->
<option value="India">India</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="China">China</option>
</select>
</div>
<div data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-3">
<!-- <option>--Year--</option> -->
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
</div>
<button id="go" data-theme="b">Go</button>
</div>
<div id="new_content">
</div>
<div id="profile">
</div>
<div data-position="fixed" data-theme="b" data-role="footer"
data-transition="pop">
<h4>© 2013 example.</h4>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
var numRecords = 5 ;
var maxPage = 0 ;
var pro = 0 ;
$course = $('#select-choice-1').val();
$country = $('#select-choice-2').val();
$year = $('#select-choice-3').val();
$(document).ready(function(){
$("#go").click(function(){
$("#old_content").hide();
listStudents(0) ;
});
});
function listStudents(start) {
$.getJSON( "http://example.com/api.php?course="+$course+"&year="+$year+"&country="+encodeURIComponent($country), function( data ) {
$("#new_content").show();
$("#new_content").html('');
maxPage = start + numRecords ;
for(i=start;i<=maxPage;i++)
{
$("#new_content").append("<ul id='new_output_content' onclick='profile("+i+")'><li><img height='50px' width='50px' src="+data[i].profile_image+'/>'+" "+data[i].name+"</li></ul><br/>");
}
$("#new_content").prepend('<button data-theme="b" style="margin-left: 100px;margin-top: 40px;text-align: center;height: 40px;width: 153px;" data-role="button" onclick="listStudents(maxPage)">Next</button>');
});
}
function profile(pro) {
//This is where I stuck.
var profile = "<div id='new_profile' data-role='content' align='center'><img src='"+data[pro].profile_image+"' /><br /><strong>"+data[pro].name+"</strong><br/><br/>Mail ID:<br/><strong>"+data[pro].email+"</strong><br/>Position:<br/><strong>"+data[pro].position+"</strong><br/>Course:<br/><strong>"+data[pro].course+"</strong><br/>Year of Passed Out:<br/><strong>"+data[pro].course_year+"</strong><br/>Country:<br/><strong>"+data[pro].country+"</strong><br/></div>";
$('#profile').append(profile);
}
$(document).ready(function(){
$("#home").click(function(){
$("#new_content").hide();
$("#old_content").show();
});
});
</script>
</body>
</html>
I want to display the profile alone by hiding other 'id' when click particular student. Please someone help.
can you print the data you recive ? first of all i wold recomand another way to loop thrue json objects ... line 79 or so of your script ...
for(i=0;i<=data.length;i++)
data[pro].profile_image/name/etc // you have no data stored as data in the function profile ...
function profile(pro) {
the (pro) variable is actualy a number 0 => maxPage so any data[pro] is undefined ...
Related
When the users choose a selection from the quiz. I want an image of a beanie to generate on the main. Code Below of my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>BEANIE GENIE</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="grid-container">
<header class="headerimg">
<img src="Images/bigger thing.png" align="left">
</header>
<header class="headertxt">
<h1>BEANIE GENIE</h1>
</header>
<nav class="nav">
<div class="topnav">
HOME
WISH
BEANIE BUDDY
CONTACT US
</div>
</nav>
<aside class="aside" id=BeanieQuiz>
<h2>WELCOME TO THE BEANIE QUIZ</h2>
<label for="beanie">Select a color:</label>
<select id="Question1">
<option value="Blank"></option>
<option value="color1">Blue</option>
<option value="color2">Purple</option>
<option value="color3">Red</option>
<option value="color4">White</option>
<option value="color5">Black</option>
<br>
</select><br>
<label for="beanie">Select a style:</label>
<select id="Question2">
<option value="Blank"></option>
<option value="style1">Design</option>
<option value="style2">Solid Color</option><br>
</select><br>
<label for="beanie">Select a material:</label>
<select id="Question3">
<option value="Blank"></option>
<option value="material1">Wool</option>
<option value="material2">Cotton</option>
<option value="material3">Polyster</option><br>
</select><br>
<button type="button" onclick="quizResults()">Submit</button></aside>
<main class="main" id="quizBeanie">
<!-- this is where the images show based off what the user selects-->
</main>
<footer class="footer">
Here is the javascript I tried to create for if the user only selects the first option on each question and I tried to have the image paste in the main just to test it out to see how it works, but it doesn't work.
Code below of javascript:
//Hidden page for the beanie quiz. When the user takes the quiz it will generate an image of a beanie based off the user selection
function quizResults{
let name = document.querySelectorAll("#Question1, #Question2, #Question3").value;
if (name == "color1, style1, material1")
"Images/Beanie11_ccexpress.png"
//supposed to post the image inside the main
document.getElementById("quizBeanie").innerHTML
}
querySelectorAll returns a NodeList not a string, so the following line is incorrect:
if (name == "color1, style1, material1")
Check out this documentation https://www.w3schools.com/js/js_htmldom_nodelist.asp
Your code is not entirely understandable. But your problem probably lies in checking whether the selected one is one of the following haystacks. I have tapped it once.
let vals = []
const haystack = "color1, style1, material1";
selects.forEach(s => {
if (haystack.includes(s.value)) {
vals.push(s.value);
}
})
if (vals.length > 0) {
// do something
}
//Hidden page for the beanie quiz. When the user takes the quiz it will generate an image of a beanie based off the user selection
function quizResults() {
let selects = document.querySelectorAll("[id^=Question]");
let vals = []
const haystack = "color1, style1, material1";
selects.forEach(s => {
if (haystack.includes(s.value)) {
vals.push(s.value);
}
})
if (vals.length > 0) {
// do something
}
/* code which i dont undertood ;-) */
"Images/Beanie11_ccexpress.png"
//supposed to post the image inside the main
document.getElementById("quizBeanie").innerHTML
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
<div class="grid-container">
<header class="headerimg">
<img src="Images/bigger thing.png" align="left">
</header>
<header class="headertxt">
<h1>BEANIE GENIE</h1>
</header>
<nav class="nav">
<div class="topnav">
HOME
WISH
BEANIE BUDDY
CONTACT US
</div>
</nav>
<aside class="aside" id=BeanieQuiz>
<h2>WELCOME TO THE BEANIE QUIZ</h2>
<label for="beanie">Select a color:</label>
<select id="Question1">
<option value="Blank"></option>
<option value="color1">Blue</option>
<option value="color2">Purple</option>
<option value="color3">Red</option>
<option value="color4">White</option>
<option value="color5">Black</option>
<br>
</select><br>
<label for="beanie">Select a style:</label>
<select id="Question2">
<option value="Blank"></option>
<option value="style1">Design</option>
<option value="style2">Solid Color</option><br>
</select><br>
<label for="beanie">Select a material:</label>
<select id="Question3">
<option value="Blank"></option>
<option value="material1">Wool</option>
<option value="material2">Cotton</option>
<option value="material3">Polyster</option><br>
</select><br>
<button type="button" onclick="quizResults()">Submit</button></aside>
<main class="main" id="quizBeanie">
<!-- this is where the images show based off what the user selects-->
</main>
I've the below code that is having multiselect dropdown:
<html>
<head><title>Hello</title>
<link rel="stylesheet" type="text/css" href="/static/Semantic-UI-CSS-master/semantic.min.css">
<script src="/static/jquery-3.5.1.min.js"></script>
<script src="/static/Semantic-UI-CSS-master/semantic.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<select name="skills" id="skills-select" multiple="" class="ui fluid dropdown">
<option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
</select>
<script>
$('#skills-select').dropdown();
</script>
<button class="ui button" id="go">
<i class="play icon"></i>
</button>
<script>
$("#go" ).click(function() {
var x = $('#skills-select :selected').text();
console.log(x)
});
</script>
</body>
</html>
How I read the values of selected options in the drop down list as array.
Example, if I selected both css and angular from the list above, I want to have the output at:
x = ["css", "angular"]
So simple in pure JS:
const getVals = document.getElementById('get-values')
, skillsSelect = document.getElementById('skills-select')
;
getVals.onclick =_=>
{
let choosed = [...skillsSelect.selectedOptions].map(e=>e.value)
console.clear()
console.log( choosed )
}
<select id="skills-select" multiple >
<option value="one" >Skills </option>
<option value="angular" >Angular </option>
<option value="css" >CSS </option>
<option value="design" >Graphic Design</option>
</select>
<button id="get-values">getVals </button>
Use the val() method of jQuery instead of getting the text() and use $('#skills-select') instead of $('#skills-select :selected').
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head><title>Hello</title>
<link rel="stylesheet" type="text/css" href="/static/Semantic-UI-CSS-master/semantic.min.css">
<script src="/static/jquery-3.5.1.min.js"></script>
<script src="/static/Semantic-UI-CSS-master/semantic.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<select name="skills" id="skills-select" multiple="" class="ui fluid dropdown">
<option value="">Skills</option>
<option value="angular">Angular</option>
<option value="css">CSS</option>
<option value="design">Graphic Design</option>
</select>
<button class="ui button" id="go">
<i class="play icon"></i>
</button>
<script>
$("#go" ).click(function() {
var x = $('#skills-select').val();
console.log(x)
});
</script>
</body>
</html>
How Can I Make an Ajax Combo box, Forexamle Female and Male, and i want To show a Button for Female and a Button for Male,
This is My Code
<!DOCTYPE html>
<html>
<head>
<style>
#for-male, #for-female{
display:none;
}
</style>
</head>
<body>
<form>
<select name="users" id="users">
<option value="">Select a person:</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit" id="for-male" styl>Male</button>
<button type="submit" id="for-female">Female</button>
</form> <br>
<div id="txtHint"><b>Person info will be listed here.</b>
</div>
</body>
</html>
You don't need an ajax call. If all you want to do is determine the button that will show based on the option selected.
<body>
<form>
<select name="users" id="users">
<option value="">Select a person:</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit" id="for-male" styl>Male</button>
<button type="submit" id="for-female">Female</button>
</form> <br>
<div id="txtHint"><b>Person info will be listed here.</b>
</div>
</body>
The javascript will look like this
$(document).ready(function() {
$('#users').on('change', function() {
$('#for-male, #for-female').hide()
var value = $(this).val()
if(value == "1") {
$('#for-male').show();
} else {
$('#for-female').show();
}
});
});
and the css will be
#for-male, #for-female{
display:none;
}
Essentially what this does is to show a button whenever an option is selected
You can check https://jsfiddle.net/tmwjge9s/1/
How do I use a jQuery code for two or more options?
My code :
jQuery(document).ready(function($) {
jQuery('#select123' || '#select12').change(function() {
jQuery('.content123' || '.content13').hide();
jQuery('#' + jQuery(this).val()).show();
}).trigger("change");
});
div.content123,div.content13 {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select123">
<option value="content1" selected="selected">content1</option>
<option value="content2">content2</option>
</select>
<div id="content1" class="content123">
text defult show
</div>
<div id="content2" class="content123">
contentttttttt
</div>
<select id="select12">
<option value="content01" selected="selected">content1</option>
<option value="content02">content2</option>
</select>
<div id="content01" class="content13">
text defult show
</div>
<div id="content02" class="content13">
contentttttttt
</div>
jQuery('#select123, #select12') will select both elements.
Multiple-Selector API
https://api.jquery.com/multiple-selector/
I'm new to jQuery and javascript. I've been trying to make a simple application and having a lot of trouble getting the data that the user inputs. I have two drop down lists, and I just want to get the input from each one. It seems that I can only get one or the other. I'm obviously missing something.
<code>
<!DOCTYPE html>
<html>
<head>
<title>Headers and Footers</title>
<!-- the three things that jQuery Mobile needs to work -->
<link rel="stylesheet" href="../jquery.mobile-1.4.2/jquery.mobile-1.4.2.css" />
<script src="../jquery-1.11.0.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.4.2/jquery.mobile-1.4.2.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<!-- This is the first page -->
<section id="firstpage" data-role="page" data-position="fixed">
<div data-role="header" data-theme="b">
<h1 style="text-align:left; margin-left:20px;">Converter</h1>
Options
</div>
<div class="ui-content">
<label for="dose-input" id="dose-input2">Enter Dose of starting Drug</label>
<input type="number" step="0.01" min="0" placeholder="Enter Starting Drug">
<form>
<div class="ui-field-contain">
<label for="select-native-1">Choose starting Drug:</label>
<select name="select-native-1" id="select-native-1" data-native-menu="false">
<option>Choose Starting...</option>
<option value="1">Drug 1</option>
<option value="2">Drug 2</option>
<option value="3">Drug 3</option>
<option value="4">Drug 4</option>
<option value="5">Drug 5</option>
<option value="6">Drug 6</option>
</select>
</div>
</form>
<div class="ui-field-contain">
<label for="select-end">Choose ending Drug:</label>
<select name="select-end" id="select-end" data-native-menu="false">
<option>Choose ending...</option>
<option value="1">Drug 1 </option>
<option value="2">Drug 2</option>
<option value="3">Drug 3</option>
<option value="4">Drug 4</option>
<option value="5">Drug 5</option>
<option value="6">Drug 6</option>
</select>
</div>
<fieldset class="ui-grid-a">
<div class="Clear"><button type="button" id="clear" data-theme="c">Clear</button></div>
<div class="Submit"><button type="button" id="submit" data-theme="b">Submit</button></div>
</fieldset>
<script>
$('#submit').click(function() {
$( "input" )
.keyup(function() {
var value = $( this ).val();
$( "p" ).text( value );
alert(value);
})
.keyup();
var selected_end = $('#select-end').val();
alert(selected_end);
var starting_drug = $('#select-native-1"').val();
alert(starting_drug);
});
</script>
</div>
</section>
</body>
</html> </code>
If I have it set this way, I will only get the value of the entered dosage and the option of the end of the drug. I won't be able to get the option for the beginning of the drug. Any ideas what I am doing wrong?
Your script is pretty confusing... To get values from select menus on submit just do:
$(document).on("click", "#submit", function(event)
{
var dose = $("#dose-input").val();
var drug_start = $("#select-start").val();
var drug_end = $("#select-end").val();
alert(dose + "\n" + drug_start + "\n" + drug_end);
});
Be sure to check for default values on submit.
Check out complete JSFiddle