Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
please help me how to convert the JQuery script into pure Javascript? I'm beginner in this PL.
Thank you
Here's the JQuery script:
$(document).ready(function () {
$('address').each(function () {
var link = "<a href='http://maps.google.com/maps?q=" + encodeURIComponent( $(this).text() ) + "' target='_blank'>" + $(this).text() + "</a>";
$(this).html(link);
});
});
Here's the link for output of JQuery script
document.addEventListener("DOMContentLoaded", function(){
var ele = document.querySelectorAll("address");
for(var i = 0; i < ele.length; i++){
var link = "<a href='http://maps.google.com/maps?q=" + encodeURIComponent( ele[i].innerText ) + "' target='_blank'>" + ele[i].innerText + "</a>";
ele[i].innerHTML = link;
}
});
Related
This question already has answers here:
mailto link with HTML body
(10 answers)
Closed 1 year ago.
I would like to create an HTML email using JavaScript so that the draft is ready, and the user can send the email.
Here is what I have tried so far:
location.href = "mailto:"+"isflibrary.net.com.de.xxx"+'?cc='+"emailCC"+'&subject='+("Stuff bought by: ", email)+'&body='+"Visit mywebsite.com!";
Wrong output:
Output that I want:
Is this what you were trying to do?
$(document).ready(function() {
$('#btn').click(function() {
mailto = 'isflibrary.net.com.de.xxx';
emailCC = 'test#emailCC.com';
subject = 'Stuff bought by: ' + mailto;
htmlBody = 'Visit mywebsite.com!';
location.href = "mailto:" + mailto + "?cc=" + emailCC + "&subject=" + subject + "&body=" + htmlBody;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id=btn>e-mail</button>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to retrieve some data from my XML file and I want to insert it inside an unordered list. This is how my Ajax code looks like:
var request;
//For backward compatibility
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET','data.xml');
request.onreadystatechange = function(){
// if((request.readyState === 4) && (request.Status===200)){
console.log(request.responseXML);
var items = request.responseXML.getElementByTagName('name');
alert('hello');
var ouptput = '<ul>';
for (var i = 0; i >= items.length; i++) {
output += '<li>' + items[i].firstChild.nodeValue + '</li>';
}
output += '</ul>';
document.getElementById('update').innerHTML = output;
//}
}
request.send();
This code doesn't read my XML file, it gives me an error saying 'Response XML is null(Type error)' I tried to use this in a server(localhost) but it didn't work either.
Can someone please give me an idea how to solve this? Thank you.
i used jQuery to solve this... this is how i did this.....
<script>
$(document).ready(function(){
$(".update").append("<ul></ul>");
$.ajax({
type: "GET",
url: "data.xml",
dataType: "xml",
success: function(xml){
$(xml).find('book').each(function(){
var sTitle = $(this).find('title').text();
var sprice = $(this).find('price').text();
$("<li></li>").html(sTitle + ", " + sprice).appendTo(".update ul");
});
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
});
</script>
This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 8 years ago.
i found some Answers on this question like in this link but it not working for me i don't know if i do some thing else wrong i'm trying to create some html when the page load then click on html element that has been create dynamically but the click event on the specific element don't work here is my code :
$(function () {
console.log("Category Page Script loaded");
$.post('/Category/GetCategories', {}).success(function (data) {
console.log(data);
$Category = $('ul#Category-filter');
$Category.empty();
console.log("coustom empty");
var html = '';
for (sub in data) {
console.log(data[sub].CategoryID, data[sub].CategoryName);
var html = '<li class="dropdown-tree CategorySelected">'
+ '<a class="dropdown-tree-a" data-id="' + data[sub].CategoryID + '">' + data[sub].CategoryName + ' COLLECTION </a>'
+ '<ul class="category-level-2 dropdown-menu-tree" id="' + data[sub].CategoryID + '">'
+ '</ul>'
+ '</li>'
console.log(html);
$Category.append(html);
}
}).error(function () {
console.log('error');
});
//___________________________________________________________________________
$('li.CategorySelected').on('click', function () {
console.log("clickd");
// Get the id from the link
var SelectedCategoryID = $(this).attr("data-id");
$CategorySelected = $('ul#' + SelectedCategoryID);
$CategorySelected.empty();
console.log("CategorySelected empty");
var html = '';
if (SelectedCategoryID != '') {
$.post("/SubCategory/GetSubCategories", { SelectedCategoryID: SelectedCategoryID },
function (data) {
console.log(data);
for (sub in data) {
console.log(data[sub].SubCategoryID, data[sub].SubCategoryName);
var html = '<li>' + data[sub].SubCategoryName + ' </li>'
console.log(html);
$CategorySelected.append(html);
}
});
}
});
//_________________________________________________________
});
$('ul#Category-filter').on('click', 'li.CategorySelected', function(){
//your scripts here
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
So to understand what I'm asking go to http://quicknews.99k.org/java_chat.html
It's a chatbox that I've made with JavaScript.
When you click "send" it would keep sending... is there an if/else statement for JS?
my code:
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var message = $('textarea').val();
var old = $('#content').html();
$('#content').html(old + '<p>' + message);
});
});
</script>
Yes, it has if/else statement, you may try this
$('button').click(function(){
var message = $('textarea').val();
var old = $('#content').html();
if(message.length==0) return false;
$('#content').html(old + '<p>' + message);
});
I would do this
$('button').click(function(){
var message = $('textarea').val();
if (!message) return false;
var old = $('#content').html();
$('#content').html(old + '<p>' + message);
});
If you want to bar any submit request when textarea is empty, try this:-
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(e){
var message = $('textarea').val();
var old = $('#content').html();
//We are checking if the length of the message is zero
if(message.length==0)
//Cancel form submission
e.preventDefault();
else {
$('#content').html(old + '<p>' + message);
//Empty the textbox when you are done
$('textarea').val('');
}
});
});
</script>
This question already has answers here:
How to show Page Loading div until the page has finished loading?
(13 answers)
Closed 8 years ago.
I use AJAX requests to retrieve data from mySQL (link), after that I build a sequence of post. Every post has a feature image. So while in process of outputting the posts, the visitor sees 'no image' sign:
.
This lasts for a bit of second, but looks bad.
How can I prevent this sign from showing, or subtitute with a loading spin?
jQuery part for outputting the results
function postsBuilder(posts){
var contents ='';
$.each(posts, function(k, field){
if(field.link[field.link.length-1] == '/') {field.link = field.link.slice(0, field.link.length-1)};
contents += '<div class="post-container">';
//here I output the feature image
contents += "<div class='col_1'><div class='post_image'><img src='/images/icons/id_" + field.id + ".png'></div></div>";
contents += "<div class='col_2'><div class='post_name'><a class='post_name_link' target='blank' href=http://" + field.link + ">" + field.name + "</a></div>";
contents += "<div class='post_link'>" + field.link + "</div>";
contents += "<div class='post_content'>Content: " + field.content + "</div>";
if ( field.video.indexOf('you') >-1 ) {contents += "<div class='post_video'><a data-toggle='lightbox' href=" + field.video + ">Video</a></div>";}
contents += "</div></div><br />";
});
return contents;
}
One of examples when the function is called
$.ajax({cache:false,
url:str,
beforeSend: function() { $('#loadingDiv').show(); },
complete: function() { $('#loadingDiv').hide(); },
dataType :'json'})
.done(function(result){
var i, j, m=0;
var div_content="";
div_content += "<div><b>Category: ".concat(result[0].category).concat("</b></div>");
posts_array = [];
for (i=0,j=result.length; i<j; i+=size) { // slice whole JSON result into portions of at maximum 'size' posts in each
posts_array.push(result.slice(i, i+size));
m++;
}
div_content += postsBuilder(posts_array[0]);
...
$("#content").html(div_content);
});
Use the error event for images:
$(document).on('error', 'img', function () {
$(this).hide();
// or $(this).css({visibility:"hidden"});
});
Check out How to silently hide "Image not found" icon when src source image is not found