I want to create column cards (like buttons).
in that cards, description should appear in its top and when it is clicked, separate link should be opened in new page.
every cards has its own description and link.it should not be hard coded by directly assigning the desc and link to it.and every function and elements should be assigned in javascript file not html.
the desc and link should given in an array like
Table={{"desc":"apple","link":"www.google.com"},{"desc":"banana","link":"www.youtube.com"}}
I tried this code and I'm getting only one card with last description and link
for(i=0;i<10;i++)
{
var temp=my.Table[i].link;
$('.demo').html('<div class="column"><p id="i"></p></div>');
document.getElementById(i).innerHTML ='' + my.Table[i].desc + '';
}
You can iterate the table object, after append what you should use.
HTML code:
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="script.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
<div class="demo">
</div>
</body>
</html>
And the jquery code looks like the following:
$(document).ready(function(){
const table=[{"desc":"apple","link":"www.google.com"},{"desc":"banana","link":"www.youtube.com"}];
table.forEach((v, i)=>{
$('.demo').append('<div class="column"><p id="temp_'+i+'">' + v.desc + '</p></div>');
});
});
Related
I have some confusion. I need to sure that is jQuery's append method` create the DOM-based XSS attack. I am providing my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<select class="form-control" id="cmbEnrollProcess" name="cmbEnrollProcess"></select>
<button type="button" id="btn" onclick="xssecho();">Add</button>
<script type="text/javascript">
function xssecho(){
var options = "<option value=''>Select Enrollment Process</option>";
console.log('option',options);
$('#cmbEnrollProcess').html("");
$('#cmbEnrollProcess').append(options);
}
</script>
</body>
</html>
Here I am adding the option value dynamically using jQuery's append method. I need to find out whether this method create the DOM based XSS attack or not ?
Not sure what you are asking... but adding element with strings can open up for attacks... Example:
var value = "'><script>console.log(`dang`)</sc"+"ript><option>"
var options = "<option value='"+value+"'>Select Enrollment Process</option>";
$('select').append(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>
one way to be safe is creating the value like this with jQuery:
var options = $('<option>', {
text: 'Select Enrollment Process',
value: 'few'
})
$('select').append(options)
When I try to add a data-role div-element dynamically in jquery it fails - it shows up but its not formatted any longer. In the html-file you can see where I put the created div-element.
What is wrong and how could I make it work?
htlm-file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5 /jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script>
<script src="my_js.js"></script>
</head>
<body>
<!-- jquery mobile-pages does not work here-->
<div id="mydiv">
</div>
<!-- this works just fine -->
<div data-role="collapsible">
<h4>B</h4>
<ul data-role="listview">
<li>Billy</li>
<li>Bob</li>
</ul>
</div>
</body>
</html>
jquery
var string = "" +
"<div data-role='collapsible'>" +
"<h4>B</h4>" +
"<ul data-role='listview'>" +
"<li><a href='#'>Billy</a></li>" +
"<li><a href='#'>Bob</a></li>" +
"</ul>" +
"</div>";
console.log(string);
$(string).appendTo("#mydiv");
the upper part of the image is when it's created dynamically, the lower part is what it looks like if I just put the code in the html-file. To the right you can see the string which i append to the div
You have to bind collapsible element when you add it dynamically.
Like :
$(string).appendTo("#mydiv");
/** Add this line and try **/
$("data-role='collapsible'").collapsible();
Ref Link : https://api.jquerymobile.com/collapsible/
I'm messing around with Handlebars.js and I'm doing a very simple example consisting of a tutorial from a website(the shoes section) and my own simple little template(the heading, where the problem is)
handlebardemo.html
<head>
<meta charset="ISO-8859-1" name="viewport" content="width=device-width, initial-scale=1">
<title>Handlebar demo</title>
<script src="lib/jquery-2.1.4.js" type="text/javascript"></script>
<script src="lib/jquery-ui.js" type="text/javascript"></script>
<script src="lib/handlebars-v4.0.4.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/w3.css">
<link rel="stylesheet" href="css/jquery-ui.css">
</head>
<body>
<div class="username-container">
<script id="heading-template" type="x-handlebars-template">
<h1 class="h1">Hello {{username}}</h1>
</script>
<input type="text" id="username">
<button type="submit" id="username-submit">Enter</button>
</div>
<h4 class="w3-row-padding">Shoe List:</h4>
<ul class="shoesNav w3-ul w3-text-indigo"></ul>
<script id="shoe-template" type="x-handlebars-template">
{{#each this}}
<li class="shoes">{{name}}--Price:{{price}} </li>
{{/each}}
</script>
</body>
main.js
$("#username-submit").click(function(){
var uNameVal = $("#username").val();
var uName = {"username":uNameVal};
var theTemplateScript = $("#heading-template").html();
var theTemplate = Handlebars.compile(theTemplateScript);
$(".username-container").append(theTemplate(uName));
});
$(function (){
var shoesData=[{name:"Nike", price:199.00}, {name:"Loafers", price:59.00}, {name:"Wing Tip", price:259.00}];
//Get html from tempalte in script tag
var theTemplateScript = $("#shoe-template").html();
//Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
$(".shoesNav").append(theTemplate(shoesData));
//shoesData is passed to compiled handlebars function
//function inserts values from the objects in their respective places in the HTML
//and returned HTML: as a string. Then jQuery is used to append the resulting HTML string to the page
})
Im not sure if I'm using the handlbars syntax etc. correctly, but i based it mostly off of the second function in main.js, which came from a brief handlebars tutorial
When I click the Enter button, nothing happens. There are no console errors, it just does nothing. Am I going about this the wrong way, at least compared to the unordered list example?
EDIT: As per Elli Parks answer, I added an id to the submit button and changed the click handler assignment to the submit button rather than the textbox(a silly mistake on my part). The element still won't appear when the submit button is clicked
In main.js, you're attaching the click handler to #username, which is an input field. You need to give the Enter button an id (ex: #username-submit) and attach the click handler to the button.
So something like this:
handlebardemo.html
<button type="submit" value="Enter" id="username-submit" >Enter</button>
main.js
$("#username-submit").click(function(){
var uNameVal = $("#username").val();
var uName = {"username":uNameVal};
var theTemplateScript = $("#heading-template").html();
var theTemplate = Handlebars.compile(theTemplateScript);
$(".username-container").append(theTemplate(uName));
});
You need to change two things:
fix the selector to target the button, like #ElliPark has already said
put the whole thing into the document-ready handler (ie, into the $(function () {...} ); construct. You are trying to attach the event listener before the DOM is ready.
See the demo on JSBin.
I have this index.html :
<html>
<head>
<title>Sample App</title>
<link href="./src/css/bootstrap.min.css" rel="stylesheet" />
<link href="./src/css/bootstrap.dashboard.css" rel="stylesheet">
</head>
<body>
<div id='root'>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./src/js/jquery.signalR-2.2.0.min.js"></script>
<script src="http://localhost:26665/signalr/hubs"></script>
<script type="text/javascript" src="/static/bundle.js"></script>
<script type="text/javascript">
$(function() {
var myHub = $.connection.signalRTwitchBotParserHub;
myHub.client.OnNewMessage = function (data) {
// Call AppActions.dispatchMessage(message);
};
$.connection.hub.url = "http://localhost:26665/signalr";
$.connection.hub.start()
});
</script>
</body>
How can I call a React-created class from there? I would like to replace the // Call AppActions.dispatchMessage(message);
You could do something like the following. What that does is create an instance of YourReactClass that renders itself as a child of your div with the id of root. It also passes the message as a property into the react instance so that it can make use of that data. Note that I added key="rootclass" to ensure that every time this code is called, React continues to reuse the DOM nodes created by the react class instead of removing the old nodes and adding new ones.
React.render((<YourReactClass key="rootclass" message={message} />), document.getElementById('root'));
You can include React onto the page by adding
<script src="https://fb.me/react-0.13.3.min.js"></script>
See the full list of downloads for other includable options (such as the JSX Transformer).
I have a Tinybox 2 popup opening when clicking 'register'. The user has then to choose if he/she wants to register as a user or a performer. I'd like to show a different registration page for each, but first asking it, so handling with ajax would be the best. It can be done, as shown here, in the 5th example. Here is my current code:
<!doctype html>
<html>
<head>
<title>Regisztrációs típus kiválasztása</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="../css/soon.css"/>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="teljes">
<h1>Miként szeretnél regisztrálni?</h1>
<div id="felhasznalo">
Felhasználóként
</div>
<div id="eloado">
Előadóként
</div>
</div>
<script type="text/javascript">
$('#felireg').click(function() {
$.get("../php/register.php");
});
</script>
</body>
</html>
Thanks!
If i understand correctly, you want to make an ajax call to your registration file named "register.php" and show this in a Tinybox
$('#felireg').click(function() {
TINY.box.show({
url:'../php/register.php',width:300,height:150
})
});
This should work.
//EDIT :
Assuming your file returns only html:
$('#felireg').click(function() {
$.get("../php/register.php", function(data)
{
TINY.box.fill(data);
});
});
This should update the current Tinybox