We Keep Coding

How to replace content with change addEventListener instead of adding

Hi I have some code where i'm inserting a span on a page each time a change is made to a dropdown item. What i want to achieve is the content inside the span to be changed/replaced each time a change in the dropdown is made. But what I'm currently getting is a new span being created each time instead. An example of how my code looks is below, any help on this would be appreciated.
doSomething.addEventListener('change', function() {
document.querySelector('.className').insertAdjacentHTML("afterend", "<span>" + somethingDynamic + "</span>");
});

I needed the span content to be inserted into a certain place on the page so I created a new Div to be inserted onto the page where i needed it and then to replace the content inside it using innerHTML as suggested to get what I needed.
doSomething.addEventListener('change', function() {
document.querySelector('.className').insertAdjacentHTML("afterend", "<div class='new'></div>");
document.querySelector('.new').innerHTML = "<span>"+ dynamicContent + "</span>";
});

What's the best way to append html tags to existing text?

I want to use the currently selected text in the office document to be replaced by the same selected text but surrounded with html. Effectively adding a hyperlink to the current selection.
I first read the text property of the selection
var objRange = objContext.document.getSelection();
objRange.load('text');
followed by
return objContext.sync().then(function(){
var strSelection = objRange.text;
objRange.insertHtml(
"<a href='" + decodeURIComponent(strHyperlink) + "'>" + strSelection + "</a>",
Word.InsertLocation.replace
);
return objContext.sync().then(function(){
objDialog.close();
});
});
I need a sync to read the text and then another one to write the updated text back into the document after that I close a dialog. But this sometimes causes the html to get written into the document twice. Is there a better way of doing this instead of with double context syncs?

To answer your question, if you need to read the text and then write into a different context, you'll need two syncs.
But you might take a look at the Range.hyperlink property, which is writeable. I don't know if it'll give you a way to avoid two syncs, but is intended for what you seem to be using insertHtml to do.

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');

How to remove multiple divs from a webview by class and id?

I am trying to remove multiple divs by class and by ID from a webview.
How can I do this?
This is what I have tried:
webView.loadUrl("javascript:(function() { " +
"document.getElementsByClassName('header-top')[0].style.display='none'; " +
"document.getElementsByClassName('inchoo-socialconnect-login')[0].style.display='none';" +
"document.getElementById('before-footer')[0].style.display='none';" + "document.getElementById('footer')[0].style.display='none';" + "})()");

In the code above you only remove the first element that is found. The method getElementsByTagName returns a array, loop through all the elements rather than the [0] element only to get things done.
Also i would recommend you call a javascript function in the webpage rather than printing entire function in webView.loadUrl

How to bind events to dynamically created JQuery DOM elements

I'm having trouble referencing an object from within the plugin I'm attempting to make.
The plugin is assosciated with a div container.
When the dom is ready it loads in startup defaults - creates its own div with id's it knows and an un ordered list. I can add list items and they work correctly using $this.append(..). However I want to add a feature where a click on an individual list item does something.. for now alert will suffice.
Normally I would be able to do:
$("#myId").click(function(){...
How would i add such functionality to a plugin?
I want that action set by the plugin itself, so clicking on list items created by the plugin are already attached to some functionality which I have written into the jquery plugin.

Based on your comment, you could store the new tab in a variable:
var newTab = $("<li id='tab#" + o.tabCount + "' myTabPane='" +
o.tabId + o.tabCount + "' class='tab'><h3>Tab " + o.tabCount
+ "</h3></li>");
$('#' + o.tabListId).append(newTab);
newTab.click(function() {
var paneId = '#' + $(this).attr('myTabPane');
$(paneId).siblings().hide();
$(paneId).show();
});
Link to working example at jsfiddle.
By the way, your original script had the second ' in the wrong place:
$("<li id='tab#'" + o.tabCount + " class='tab'><h3>Tab "
^^^

You would want to reference them after doing the append by tag name not by ID.
$(this).find("li").click(function(){ /* do work */});
If you absolutely have to reference it by ID you can do:
$(this).find("li").each(function(){
var id = $(this).attr("id");
/* do work */
});