Navigating to specific URL only IF specified ID withing that URL exists - javascript

So I have this HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background</title>
</head>
<body>
<button id="btn" target="_blank" >CLICK ME</button>
</body>
<script src="js/script.js"></script>
</html>
and this JS code
document.getElementById("btn").onclick = function () {
var test=makeid();
window.open("http://www."+test,'_blank');
};
function makeid()
{
var url = "";
var possible = "abcdefghijklmnopqrstuvwxyz";
for( var i=0; i < 5; i++ )
url += possible.charAt(Math.floor(Math.random() * possible.length));
return url;
}
How to make client jump to this randomly generated URL only if a div(on the page with generated URL) with id="hehe" exists?If it doesn't exist generate URL again.Is it done using AJAX or something else?

Related

How can I access a variable in Jquery and use its value in another external .js file ? The variable is $generatedP

I need to access in a different .js file the value inside $generatedP and display it
$(document).ready(function() {
var $buttonValue = $(".value_generate");
var $divValue = $(".generated_value");
var $generatedP = $(".generated_p");
var $valueInput2 = $(".value_input_2");
var $submitPages2 = $(".submit_pages_2");
function valueGenerator(value) {
var valueString="";
var lettersNumbers = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for(var i = 0; i < value; i++)
valueString += lettersNumbers.charAt(Math.floor(Math.random()* lettersNumbers.length));
return valueString;
}//generate string
$buttonValue.click(function generate() {
var $key = valueGenerator(12);
$generatedP.html($key);//display generated string
});
$submitPages2.click(function() {
if($valueInput2.val() == $generatedP.text() ){
alert("you are logged in website");
} else {
alert("please check again the value");
return false;
}//check value if true/false
});
I am new to jquery
You have a few options.
Create a namespace inside the jQuery object:
$.myGlobalNamespace = {};
$.myGlobalNamespace.generatedPvalue = "something";
Define an object at the window level:
window.myGlobalNamespace = {};
window.myGlobalNamespace.generatedPvalue = "something";
Just be sure to use a sensible name for the namespace object.
You can improve the behavior doing client-side checking with localStorage, or you can simply use sessionStorage. Variable $generatedP will be available in page1 and page2. Hope it helps!
PAGE 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<script type = "text/javascript">
$(document).ready(function(){
var $generatedP = "27.23.10";
sessionStorage.setItem('myVar', $generatedP);
window.location.href = "page2.html";
});
</script>
</body>
</html>
PAGE 2: to access the variable just use the getItem method and that is all.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var data = sessionStorage.getItem('myVar');
alert(data);
</script>
</body>
</html>

Execute javascript on load

i just want to know how to execute this [JSCODE][1] on page load, I'm a newbie and I cant figure it out. I just want to disregard the form or submit button and execute the script on page load. Thank You in advance!
[1]: http://jsfiddle.net/Noumenon72/9X3yZ/8/
Write your code inside anonymous function given below..
$(function() {
//Write your code here
})
Use jquery $(document).ready like this.
$(document).ready(function(){
//task which you want to perform
});
See you code below. I have mentioned where to call these functions.
$(document).ready(function(){
$('#domain').val('http://yourblog.blogspot.com/');
$('#get_tags').click();
});
function getTagsFromFeed(domain){
var myscript = document.createElement("script");
myscript.src = domain + "feeds/posts/summary?alt=json&max-results=0&callback=cat";
document.getElementsByTagName('head')[0].appendChild(myscript);
}
function cat(json){ //get categories of blog & sort them
var label = json.feed.category;
var lst=[];
for (i=0; i<label.length; i++){
lst[i] = label[i].term;
}
displayList(lst.sort()); //use any sort if you need that
}
function displayList(list) {
var mylist = document.getElementById("mylist");
mylist.innerHTML = "";
for (i=0; i<list.length; i++) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(list[i]));
mylist.appendChild(li);
}
urlifyTagsInList(document.forms.myform.host.value);
}
function urlifyTagsInList(hostname){
var mylist = document.getElementById("mylist");
var newlist = document.createElement("ul");
var elements = mylist.getElementsByTagName("li");
for (j=0; j<elements.length; j++) {
var link = document.createElement("a");
var blah = document.createTextNode("blah");
link.href=hostname + "search/label/" + elements[j].innerHTML;
link.appendChild(elements[j].cloneNode(true));
newlist.appendChild(link);
}
mylist.parentNode.replaceChild(newlist, mylist);
newlist.id = "mylist";
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form id="myform" method="POST" onSubmit="getTagsFromFeed(document.forms.myform.host.value); return false;">
<p> Enter blogspot domain (http://yourblog.blogspot.com/):</p>
<input id="domain" type="text" name="host"></input>
<button id="get_tags" type="submit">Get tags</button>
</form>
<ul id="mylist">
</body>
</html>
If you want to use pure javascript, Document ready with pure JavaScript will help you.
A simple way to submit form onload is like this.
$(document).ready(function(){
$('#myForm').submit();
});

JSONP Internet Explorer no callback

All browsers except for Internet Explorer properly call the javascript and add them to the page.
I see a lot of posts on JSONP problems in IE, but I haven't come across one in this form. Why is the function issuesToList not called?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="RedmineJSONP.js"></script>
<title></title>
</head>
<body>
<header>
<h1>List of Issues</h1>
</header>
<div id="container"></div>
<script src="http://www.redmine.org/issues.json?callback=issuesToList"></script>
</body>
</html>
function issuesToList(data) {
var count = data.issues.length;
for (i = 0; i < count; i++) {
var issue = data.issues[i];
loadIssue(issue);
}
}
//Create an issue instance and append to Ui
function loadIssue(issue){
var button = document.createElement("button");
button.innerHTML = "+";
button.setAttribute("onClick", "toggleInfo(this)");
var p = document.createElement("p");
var item = document.createElement("div");
item.setAttribute("id", issue.id);
item.setAttribute("class", "issue");
item.appendChild(button);
item.innerHTML += " " + issue.subject;
item.appendChild(p);
var container = document.getElementById("container");
container.appendChild(item);
}
EDIT Removed the double http://

javascript code working in jsfiddle but not working in the browser [duplicate]

This question already has answers here:
JSFiddle code not working in my own page
(3 answers)
Closed 8 years ago.
my code is working in jsfiddle but not working in the browser i dont know what i missed here could you please check it and tell me the solution. i google it but i am not getting correct solution please help me
this is jsfiddle link http://jsfiddle.net/pLTrJ/9/
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
</head>
<script type="text/javascript">
var random = 0;
var theDiv = document.getElementById("showVal");
updateTheDiv(9,0);
function updateTheDiv(inRange, inMin) {
random = (Math.random()*inRange+inMin)|0;
theDiv.innerHTML = random;
var nextCall = (Math.random()*1000)|0;
setTimeout(function() {
updateTheDiv(inRange, inMin);
}, nextCall);
}
</script>
<body>
<div id="showVal"></div>
</body>
</html>
jsfiddle has wrapped it automatically in the onload event. You haven't done this in your HTML page, so when it runs in the browser you're trying to get hold of the div before it's been rendered, so theDiv is null.
The below should work:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
</head>
<script type="text/javascript">
window.onload = function () {
var random = 0;
var theDiv = document.getElementById("showVal");
updateTheDiv(9, 0);
function updateTheDiv(inRange, inMin) {
random = (Math.random() * inRange + inMin) | 0;
theDiv.innerHTML = random;
var nextCall = (Math.random() * 1000) | 0;
setTimeout(function () {
updateTheDiv(inRange, inMin);
}, nextCall);
}
}
</script>
<body>
<div id="showVal">
</div>
</body>
</html>
Try this in your Browser ;)
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
</head>
<body>
<div id="showVal"></div>
</body>
<script type="text/javascript">
var random = 0;
var theDiv = document.getElementById("showVal");
updateTheDiv(9,0);
function updateTheDiv(inRange, inMin) {
random = (Math.random()*inRange+inMin)|0;
theDiv.innerHTML = random;
var nextCall = (Math.random()*1000)|0;
setTimeout(function() {
updateTheDiv(inRange, inMin);
}, nextCall);
}
</script>
</html>
(I just put the script to the bottom. So the script loads after your element is set.)

Jquery .get not retrieving file

i have a code that is supposed to read from a html file, split it into an array and display parts of that array, but when going though with alert, i found that $.get is not actually getting the file
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<body>
<button onclick="myfunction()">update</button>
<div id="div1"></div>
<script>
function myfunction() {
var info = "";
$.get("../Read_Test/text.html", function(data) {
SomeFunction(data);
});
alert(info);
var array = info.split("§n");
var people = array[1].split(",");
for (var i = 0; i < people.length; i++) {
document.getElementById("div1").innerHTML = people[i] + "<br>";
}
}
function SomeFunction(data) {
var info = data;
}
</script>
</body>
</html>
the directories are on a server and go like so:
Sublinks->Read_Test->This_File.html,text.html
The objective of this is that a file would have something along the lines of "a§nb1,b2,b3,§n" and the script would split it via "§n" then get "array[1]" and split that via ",". lastly it displays each part of that newly created array on a new line, so a file with "a§nb1,b2,b3,§n" would result in:
b1
b2
b3
Please help
Ajax is asynchronous, it make request and immediately call the next instruction and not wait for the response from the ajax request. so you will need to process inside of $.get. success event.
I have changed delimiter character to ¥. change same in text.html. problem was you have not mentioned character set to utf8 and due to this it could not recognized the special character and subsequently not able to split the string. i have aldo document type to HTML5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button onclick="myfunction()">update</button>
<div id="div1"></div>
<script>
function myfunction() {
$.get("../Read_Test/text.html", function(data) {
var info = data;
var array = info.split("¥");
var people = array[1].split(",");
for (var i = 0; i < people.length; i++) {
document.getElementById("div1").innerHTML += people[i] + "<br>";
}
});
}
</script>
</body>
</html>

Categories

Resources