Replace/Generate HTML content in div dynamically | .NET + JQuery - javascript

I am trying to display/replace the HTML content inside a div according to a pressed pushpin in Bing Maps. I know I should be looking at JQuery .html() but I can't see how I can put a variable inside the HTML tags.
Example code:
function pushpinClickedCallback(e) {
if (e.target.metadata) {
var data = e.target.metadata.title; <-- how to make this include the JS variable and HTML tags
$('#infoPane').html(data);
}
// var e above is a pushpin in Bing Maps, infoPane is the div
Every time the callback is fired there is different data to be displayed. Should I even be looking at doing it this way? Or should I create a new div and destroy it each time (inefficient if pressing the same pushpin many times quickly)?

Your variable data will contain a string. Manipulate the string using JavaScript string functions to replace your title string and add whatever HTML tags you need. For example:
var data = e.target.metadata.title; // "Pushpin title"
var htmlString = "<div class=\"pin-text\">" + data + "</div>";
$("#infoPane").html(htmlString); // Replace infoPane element contents

Related

How to add new image element to html href link with javascript?

I have a problem creating a new image element to this code here:
Sound Packs
Unfortunately, I do not have access to the HTML code because it belongs to a locked template of "jimdo". I can only insert CSS codes and javascript in the "head area". Is there a way to add an image element to this HTML code with javascript?
Yes, there is a way to do this using just javascript. Firstly you need to set the window.onload callback to a function. Within this function, you can then get the element you want to add the image to. Here I added the image to the element with the attribute data-link-title which is equal to "Sound Packs".
Lastly, you can use .innerHTML on this element to add the HTML you want to add within this element. Here I added a <br /> followed by an <img> tag:
document.body.onload = function() {
let soundPacks = document.querySelector('[data-link-title="Sound Packs"]');
soundPacks.innerHTML += "<br /><img src='https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a' alt='StackOverflow Logo'/>";
}
Sound Packs

How do I render text on the page of other sites (once script planted)

I am learning javascript and trying to build a chat app like intercom.
How do i go about creating a popup on another page once my js script is planted??
I do it locally like so:
function Hide()
{
document.getElementById('div1').style.visibility="hidden";
}
There is many way to do it i'll explain the idea with some examples, let's go
Our code based on two functionalities:
1: innerHtml = "<YOUR CODE/>"; This property is for injecting the html in the element more info.
2: document.getElementById("IdName") This property is for selecting and element wich we will apply some functionalities, in our case is the property N°1 more info.
3: <div id="IdName"></div> Here where we will append our html or text more info.
Now we start with some examples:
1st example:
API File:
function function_name(argument) {
document.getElementById(argument).innerHTML = "<p>Paragraph example..</p>";
}
User File:
// first of all the user need to put a div with an attribute ID in his html where
//he want to append the html given by the API
<div id="IdName"></div>
//after that he must call the specified function wich is in our case function_name() and put the ID as argument
function_name("IdName"); // this will append the html in the div with the ID == IdName
Also you can use document.getElementsByClassName("className"); in place of ID
2nd example:
In this case the user don't need to put any additional html or any other things; in this example we will add our html into the body element wich is a necessary element in HTML page.
document.body.innerHTML += "<p>Paragraph example..</p>";

How to us $.data in a loop to display correctly for each div

When I click a marker on my map, I want to display data from the database associated with that marker. Currently I am doing this for the divs that I create. I am having a problem when I click on a div to open my form under it, I want to load the same data into the form, but currently the only data that will load into each for is the first one that ran through the loop.
Another words, my venue-list div might hold 3 venues for this one location, and I can click on each div and display a form under it, but if "Sally's Salon" is the first div in the list, every form will display "Sally's Salon" instead of their own name. Here is my code:
// initially detach form to be attached to each div on click
var editForm = $('.edit-container').detach();
function fillForm(title, priority) {
$('.venue-input').val(title);
$('.priority-input').val(priority);
}
for(var i = array.length -1; i>=0; i--) {
var prop = array[i].feature.prop
if(prop.title) {
// create variable to hold html
var html = $([
"<div class='venue-item'>",
" <span><strong>Venue Name</strong></span>",
" <span class='venue-name venue-title' data-title=" + prop.title + ">" + prop.title + "</span>",
"<span class='venue-priority' data-priority=" + prop.prioritylevel + "><strong>Priority</strong>" + ' ' + prop.prioritylevel + "</span></div>"].join("\n"));
// append venue item to venue list div with event handler to add form and prefill when clicked
$(html).appendTo('.venue-list').on('click', function() {
$(this).after(editForm);
fillForm($('.venue-title').data('title'), $('.venue-priority').data('priority'));
});
}
any input would be helpful, I've been battling this for a couple days now, not sure if I am even attaching the html elements correctly but I mainly just want to be able to click on one of the html elements I create and then the data gets loaded into the form so it can be manipulated.
You are appending multiple copies of your content, however there are 2 elements using the same id (venue-priority & venue-title) - which should be unique on a web page.
Thereafter, you use jQuery to get those elements, however as jQuery expects id's to be unique, it will just grab the first (or last, im not sure) element with that Id.
The solution is not to use duplicated id's in your markup.
You seem to have a syntax error on line 6. You can view errors in a browser using developer tools in case there are others.
$('#priority-input.val('priority);
should be
$('#priority-input').val('priority');
Actually, if you want to set the value to the value of the parameter, you should use
$('#priority-input').val(priority);
not
$('#priority-input').val('priority');

Add a link to a form with jQuery (userscript) in Firefox

I'm trying to add a search link to an online form with a userscript using jQuery. I don't work too much in firefox and I feel like things that would normally work in chrome don't in ff 9/10 times for me. But anyway... this needs to be with ff.
I'm taking the text from a <p> element and creating a search url out of it (or trying to). Right now this is the function I'm trying that should be doing it... but it's doing nothing, not even any errors in console
$(function() {
var companyName = $('p')[7]; // Element that contains the name text
var companyText = companyName.text(); // Retrieve the text from element
var mixRankUrl = $("<a></a>").innerHTML("Search Mixrank"); // Create an <a> element
mixRankUrl.href = 'https://mixrank.com/appstore/sdks?search=' + companyText; // Define the href of the a element
var sdkPara = $('label.control-label')[10]; // Where I want it to go
sdkPara.append(mixRankUrl); // Append the element
});
Also, whoever wrote the html uses hardly any ids, and most classes are assigned to 10 or more elements... so unless there's a better way, I'm sort of stuck using node selectors (which stay the same form to form).
The problem is that you try to use jQuery method on DOM element. Don't understand why you don't have any errors with your code.
For exemple : $('p')[7] return a DOM element while $('p').eq(7) return a JQuery object. So you can't use a jQuery method like text() on your DOM element. You need to deal with jQuery object.
For the same reason, you had a problem with the declaration of your label object and with the modification of the href attribute of your link.
Try like this :
$(function() {
var companyName = $('p').eq(7); // Element that contains the name text
var companyText = companyName.text(); // Retrieve the text from element
var sdkPara = $('label.control-label').eq(10); // Where I want it to go
var mixRankUrl = $('<a>',{
text: 'Search Mixrank',
href: 'https://mixrank.com/appstore/sdks?search=' + companyText
}).appendTo(sdkPara); // Append the element
});

Inserting custom html tag using javascript pasteHTML function

I am creating a custom WYSIWYG using editable iframe.I want to add a Custom html tag <ino> to a selected text like <info>some content here</info>.I have used this code
Editor = document.getElementById('iframe_id').contentWindow.document;
var tag='info'
var range = Editor.selection.createRange();
if (range.pasteHTML)
{
var content=Editor.selection.createRange().htmlText
content1="<"+tag+">"+content+"</"+tag+">"
range.pasteHTML(content1);
}
This code is for IE.In content1 am getting the correct text.But in output, the starting tag <info> is not getting .I have created the element using document.createElement('info');How i can solve this problem.Thanks in advance.
There is no HTML <info> element. This could well be the reason that your code is not working.
If you really need to do this (I can't see why you would), you could take advantage of the fact that IE allows you to create invalid DOM elements using document.createElement() and do something like the following, which pastes in a marker element, positions an <info> element containing the original TextRange content before the marker element and then removes the marker:
var range = Editor.selection.createRange();
var info = Editor.createElement("info");
info.innerHTML = range.htmlText;
var id = "some_random_id";
range.pasteHTML('<span id="' + id + '"></span>');
var span = Editor.getElementById(id);
span.parentNode.insertBefore(info, span);
span.parentNode.removeChild(span);
As it says in this link:http://msdn.microsoft.com/en-us/library/ms536656%28VS.85%29.aspx pasteHML only accepts HTML tags.
You can use innerHTML property instead:
range.innerHTML = content1;

Categories