Hello everyone I'm trying to run multiple javascripts. My first javascript is which has change function working fine but second one does not work. So how can i run multiple javascript code? Here is my code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#main').on('change', '.select-box', function () {
if ($(".select-box option[value='3']").attr('selected')) {
$('#demo').html("<select class='select-box'><option value='4'>a</option><option value='5'>b</option></select>");
}
if ($(this).val() == 5) {
document.getElementById("demo").innerHTML = "Woo";
}
});
});
</script>
<script>
var x = "", i;
for (i = 0;i < 3;i++) {
x = x + "<option value='" + i + "'> " + i + "</option>";
}
document.getElementById("demo2").innerHTML = "<select>" + x + "</select>";
</script>
</head>
<body>
<div id="main">
<select class="select-box">
<option>Select an option</option>
<option value="1">no alert</option>
<option value="2">no alert too</option>
<option value="3">alert</option>
</select>
<p>
<br/>
</p>
<div id="demo"></div>
</div>
<p id="demo2"></p>
</body>
</html>
You can try something like this if you want to use jQuery and some other javascript libs
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
In your code there is additional the type="text/javascript" missing in the script tag. So it schould look like this:
<script type="text/javascript">
var x="",i;
for(i=0;i<3;i++)
{
x=x + "<option value='"+i+"'> " + i + "</option>";
}
document.getElementById("demo2").innerHTML="<select>"+x+"</select>";
</script>
This script:
<script>
var x="",i;
for(i=0;i<3;i++)
{
x=x + "<option value='"+i+"'> " + i + "</option>";
}
document.getElementById("demo2").innerHTML="<select>"+x+"</select>";
</script>
Tries to get the element demo2 before it exists. Move the script to somewhere after demo2, maybe right before </body>.
Or, alternatively, put that last part in a ready handler like your first script:
<script>
var x="",i;
for(i=0;i<3;i++)
{
x=x + "<option value='"+i+"'> " + i + "</option>";
}
$(document).ready(function() {
document.getElementById("demo2").innerHTML="<select>"+x+"</select>";
});
</script>
And here's how I'd do it, by the way:
var demo2 = document.getElementById('demo2');
for(var i = 0; i < 3; i++) {
var item = document.createElement('option');
item.value = i;
item.appendChild(document.createTextNode(i.toString()));
demo.appendChild(item);
}
Related
I have created a javascript function in my aspx page..
below are the sample code,
<script type="text/javascript">
$(document).ready(function () {
console.log("ready!");
var output = [];
var yr = 1950;
for (var i = 0; i <= 70; i++) {
if (i == 0) {
output[i] = '<option value="0" selected="selected"> Choose Year</option>';
}
else {
output[i] = '<option value="' + (parseInt(1950) + parseInt(i - 1)) + '">' + (parseInt(1950) + parseInt(i - 1)) + '</option>';
}
}
$('#yearid').get(0).innerHTML = output.join('');
});
$("#yearid").change(function () {
var select = $("#yearid option:selected").val();
$("#yearval").val(select);
});
</script>
I would like this function execute in the property such as
<div class="col-md-4 form-group">
<span>Year : </span>
<select id="yearid" class="form-control" runat="server">
</select>
<input id="yearval" type="hidden" runat="server"/>
</div>
As the code running, the javascript function above should be executed and display the " Choose Year" propery inside as shown above.
I try to run this code but nothing happens to the property. Any help would be appreciated. Thank u.
Your code seems to be working as below. However you may be missing the jQuery script so you can check if that exists.
$(document).ready(function () {
console.log("ready!");
var output = [];
var yr = 1950;
for (var i = 0; i <= 70; i++) {
if (i == 0) {
output[i] = '<option value="0" selected="selected"> Choose Year</option>';
}
else {
output[i] = '<option value="' + (parseInt(1950) + parseInt(i - 1)) + '">' + (parseInt(1950) + parseInt(i - 1)) + '</option>';
}
}
$('#yearid').get(0).innerHTML = output.join('');
});
$("#yearid").change(function () {
var select = $("#yearid option:selected").val();
$("#yearval").val(select);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 form-group">
<span>Year : </span>
<select id="yearid" class="form-control" runat="server">
</select>
<input id="yearval" type="hidden" runat="server"/>
</div>
i am using AJAX to bring some data from my DB , after the AJAX success i am trying to create <option> tag via JavaScript but it seems it doesnt work and nothing happen at the DOM and i cant figure why ?
$("#clientCombo").on("change", function () {
$.ajax({
url: "/Account/GetBrands",
data: { clientID: $("#clientCombo").val() },
dataType: 'json',
success: function (result) {
if (result.error == undefined) {
var brandList = result;
var brandCombo = $('#brandCombo');
var brandOption = $("<option value=\"none\">"+"someString+"+"</option>");
brandCombo.html(brandOption);
for (var i = 0; i < brandList.length; i++) {
brandCombo+=("<option value=\"" + brandList[i].brandID + ">" + brandList[i].brandName + "</option>");
}
}
else {
$("#brandCombo").html("<option value=\"none\">" + "choose+" + "</option>");
}
}
});
});
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="input-group">
<label class="inputLabel">name</label>
<select id="clientCombo" class="selectpicker">
<option value="none">choose</option>
#foreach (var clientItem in Model.clientList)
{
<option value="#clientItem.ID">#clientItem.ClientName</option>
}
</select>
</div>
<div class="input-group">
<label class="inputLabel">brand</label>
<select id="brandCombo" name="MotagNumber" class="selectpicker">
</select>
</div>
i am using this scripts :
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
You are not using correct variable brandOption while creating options string and use .html() after the loop.
var brandOption = $("<option value=\"none\">"+"someString+"+"</option>");
for (var i = 0; i < brandList.length; i++) {
brandOption+=("<option value=\"" + brandList[i].brandID + ">" + brandList[i].brandName + "</option>");
}
brandCombo.html(brandOption); //Once options string is completely created
instead of
var brandOption = $("<option value=\"none\">"+"someString+"+"</option>");
brandCombo.html(brandOption);
for (var i = 0; i < brandList.length; i++) {
brandCombo+=("<option value=\"" + brandList[i].brandID + ">" + brandList[i].brandName + "</option>");
}
check your for loop
brandOption+="<option value=\"" + brandList[i].brandID + "\">" + brandList[i].brandName + "</option>";
use this problem will be solved
Instead of string concatenation, you should use Jquery built-in function .append() - Insert content, specified by the parameter, to the end of each element in the set of matched elements.
$('#brandCombo').append('<option value='+brandList[i].brandID+'>'+brandList[i].brandName+'</option>')
And you can also use .empty() to clear all <option> tags from the dropdown. like below
$('#brandCombo').empty()
try below code
$(document).on("change","#clientCombo", function () {
$.ajax({
url: "/Account/GetBrands",
data: { clientID: $("#clientCombo").val() },
dataType: 'json',
success: function (result) {
if (result.error == undefined) {
var brandList = result;
var brandCombo= $('<select>');
for (var i=0; i<brandList.length ;i++)
{
brandCombo.append( $('<option><option>').val(brandList[i].brandID).html(brandList[i].brandName) );
}
$('#brandCombo').append(brandCombo.html());
}
else {
$("#brandCombo").html("<option value=\"none\">choose</option>");
}
});
});
Why should I link an external script write after an internal script as following example
Can anyone tell me why I should use it like this and why it doesn't display anything before the call to the external script ?
<!DOCTYPE html>
<html>
<body>
<div id="id01"></div>
<script>
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i<arr.length; i++) {
out += '<a href="' + arr[i].url + '">' +
arr[i].display + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
</script>
<script src="myTutorials.js"></script>
</body>
</html>
Following to this post, I recreated the code with jQuery. jsFiddle says, that everything should be find and I can't find any mistakes either. Here's the Code:
function generatePost(title, time, text) {
var postCount = 0;
$('#postcontainer').append('<div></div>').attr('post_' + postCount).attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
$('#post_h3_' + postCount).append('<span>' + time + '</span>');
var paragraphs = text.split("||");
for (var i = 0; i < paragraphs.length; i++) {
var paragraphCount = 0;
$('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
paragraphCount++;
}
postCount++;
}
Now the problem might be that the JavaScript is not even executed, my HTML looks like this:
<head>
<?php include 'components/_head.php';?>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/postGen.js"></script>
<script type="application/javascript" src="postGen.js">
document.addEventListener('DOMContentLoaded', function() {
generatePost("Testing Title", "I don't know", "This is || a paragraph");
}
</script>
</head>
<body>
<header>
<?php include 'components/header.php';?>
</header>
<main>
<?php include 'components/main.php';?>
<div class="fullscreencontainer">
<img class="background" src="img/background.jpg">
<div class="title">
<h2>Der Bürger als Edelmann</h2>
<h4>von Moliére</h4>
</div>
</div>
<div class="container">
<div id="postcontainer">
/* ? */
</div>
<div class="sidebar">
</div>
</div>
</main>
<footer>
<?php include 'components/footer.php';?>
</footer>
</body>
The structure of the files:
index.php
js/jquery-1.11.3.min.js
js/jquery-migrate-1.2.1.min.js
js/postGen.js This file contains the code written in the first code-box
Inspector shows nothing new.
Console shows:
Syntax Error: Missing ) after argument list
EDIT:
The final Code:
<script type="application/javascript">
$(document).ready(function() {
function generatePost(title, time, text) {
var postCount = 0;
$('#postcontainer').append('<div id=' + "post_" + postCount + '></div>')
$('#post_' + postCount).attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '<span>' + time + '</span></h3>');
var paragraphs = text.split("||");
for (var i = 0; i < paragraphs.length; i++) {
$('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>');
}
postCount++;
}
generatePost("Testing Title", "I don't know", "This is || a paragraph");
generatePost("Testing Title", "I don't know", "This is || a paragraph");
generatePost("Testing Title", "I don't know", "This is || a paragraph");
generatePost("Testing Title", "I don't know", "This is || a paragraph");
});
</script>
Seems you were calling the generatePost() function too early (when document loads, but at the same time, thats also when you load your jQuery... why you were getting the ")" Missing error..).
So I changed the HTML to:
<head>
</head>
<body>
<main>
<div class="container">
<div id="postcontainer">
</div>
</div>
</main>
</body>
And the jQuery to:
$(document).ready(function() {
function generatePost(title, time, text) {
var postCount = 0;
$('#postcontainer').append('<div id=' + "post_" + postCount + '></div>').attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
$('#post_h3_' + postCount).append('<span>' + time + '</span>');
var paragraphs = text.split("||");
for (var i = 0; i < paragraphs.length; i++) {
var paragraphCount = 0;
$('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
paragraphCount++;
}
postCount++;
}
generatePost("Testing Title", "I don't know", "This is || a paragraph");
});
Just calling the function at the end of the document.ready. Also, as you can see, I also ran into some issues about how the post's id was being assigned, so ended up switching that up as well, assigning it with some simple string interpolation.
Cheers,
PG
I am trying to get tweets from different zip codes.For doing this, I am using latitude and longitude values for each zip code. So far I want to get 3 tweets for each zip code(I have 2 zip codes), but it is working only for one zip code.
Any suggestion will be appreciated. Thank you in advance!
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var lat=[41.9716,42.0411];
var lng=[-87.7026,-87.6900];
$(document).ready(function() {
for(var i=1; i<2; i++)
{
$.getJSON('http://search.twitter.com/search.json?q=business&geocode='+lat[i]+','+lng[i]+',5mi&lang=en&callback=?', function(data) {
var data = data.results;
var html = "";
for(var j=0; j<3;j++){
html += "<div style='width:600px;border:solid thin blue'><img src='"+data[j].profile_image_url+"'/><a href='http://twitter.com/" + data[j].from_user + "'>#"+ data[j].from_user + "</a>: " + data[j].text + "</div>";
}
$('.content'+i).html(html);
}); }
});
</script>
</head>
<body>
<div class="content1"></div>
<div class="content2"></div>
</body>
I found 2 problems with your code:
1) If you want to iterate 2 times, your for function should be like this: for (var i = 0; i < 2; i++)
2) You must have in consideration that the function that gets called in $.getJSON runs asynchronously, so when that function gets called the for will have already finished, therefore you can't use the i value with that purpose inside that function.
So, after correcting those 2 things in your code you should be able to get what you want. Try with something like this:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var lat = [41.9716, 42.0411];
var lng = [-87.7026, -87.6900];
var count = 1;
$(document).ready(function () {
for (var i = 0; i < 2; i++) {
$.getJSON('http://search.twitter.com/search.json?q=business&geocode=' + lat[i] + ',' + lng[i] + ',5mi&lang=en&callback=?', function (data) {
var data = data.results;
var html = "";
for (var j = 0; j < 3; j++) {
html += "<div style='width:600px;border:solid thin blue'><img src='" + data[j].profile_image_url + "'/><a href='http://twitter.com/" + data[j].from_user + "'>#" + data[j].from_user + "</a>: " + data[j].text + "</div>";
}
$('.content' + count++).html(html);
});
}
});
</script>
</head>
<body>
<div class="content1"></div>
<div class="content2"></div>
</body>
</html>