Develop Reference

Changing DOM but not appearing in browser

Using jQuery I am making an ajax call to append data to some input fields, jquery is changing the DOM but the changes are not appearing in the inputs until I click on them.
Here is my jquery code:
var data_track = '';
var data_image = '';
var data_artist = '';
var data_album = '';
var data_duration = '';
var data_mbid = '';
if(data.track.name) {data_track = data.track.name;}else{ data_track = '';}
if(data.track.album) {data_image = data.track.album.image[3]['#text'];}else{ data_image = 'http://placehold.it/250x250';}
if(data.track.artist.name) {data_artist = data.track.artist.name;}else{ data_artist = '';}
if(data.track.album) {data_album = data.track.album.title;}else{ data_album = '';}
if(data.track.duration) {data_duration = data.track.duration;}else{ data_duration = '';}
if(data.track.mbid) {data_mbid = data.track.mbid;}else{ data_mbid = '';}
$('#track-name').val(data_track);
$('#image').val(data_image);
$('#image_preview').attr('src', data_image);
$('#artist').val(data_artist);
$('#album').val(data_album);
$('#duration').val(data_duration);
$('#mbid').val(data_mbid);
$('#results').html('');

It works for me: http://jsfiddle.net/b4revvz6/2/
Check your data object;

There was another problem this code was inside ajax call and when i scored it $('#results').html('');
out of ajax, code working perfectly

Change existing javascript Ticker to work from RSS feed

I am not good at code so am a bit in the hands of anyone who might be able to help.
I have a functioning Ticker Tape working in my wordpress site here www.solosails.com
currently, it works from data manually entered, I would like to modify it so that it takes the title and link from my RSS feed myurl/feed hopefully by using something like this ...
$.get(FEED_URL, function (data) {
$(data).find("entry").each(function () { // or "item" or whatever suits your feed
var el = $(this);
console.log("------------------------");
console.log("title : " + el.find("title").text());
console.log("author : " + el.find("author").text());
console.log("description: " + el.find("description").text());
});
});
The Java Script code is...
function startTicker(){theCurrentStory=-1;theCurrentLength=0;if(document.getElementById){theAnchorObject=document.getElementById("tickerAnchor");runTheTicker()}else{document.write("Error");return true}}function runTheTicker(){var e;if(theCurrentLength==0){theCurrentStory++;theCurrentStory=theCurrentStory%theItemCount;theStorySummary=theSummaries[theCurrentStory];theTargetLink=theSiteLinks[theCurrentStory];theAnchorObject.href=theTargetLink}theAnchorObject.innerHTML=theStorySummary.substring(0,theCurrentLength)+whatWidget();if(theCurrentLength!=theStorySummary.length){theCurrentLength++;e=theCharacterTimeout}else{theCurrentLength=0;e=theStoryTimeout}setTimeout("runTheTicker()",e)}function whatWidget(){if(theCurrentLength%2==1){return theWidgetOne}else{return theWidgetNone}}
This is the part of the code that potentially needs altering so that the hardcoded links and titles become the new code pulling from the rss feed...
var theCharacterTimeout = 50;
var theStoryTimeout = 4000;
var theWidgetOne = "_";
var theWidgetNone = "";
var theSummaries = new Array();
var theSiteLinks = new Array();
var theItemCount = 2;
theSummaries[0] = "Solo Sails proudly sponsor Lizzy Foremans Mini Transat Campaign... Read more here ...";
theSiteLinks[0] = "http://www.solosails.com/solo-sails-sponsor-lizzie-foremans-mini-transat-campaign/"
theSummaries[1] = "10% discounts on ALL multiple sail orders !! Try us for price with your new sails, complete our simple quote form here.";
theSiteLinks[1] = "http://www.solosails.com/quotes"
startTicker();
Many thanks in advance if you can help!
Andrew

Still hoping somebody can help here.
I basically want to either get theSummaries and theSiteLinks to be pulled from the rss or change the arrays so that they use the XML parser in Javascript.
Would really appreciate some help here and happy to donate something via paypal for the working result.
Regards, Andrew

Thanks to #David Hammond for finding the answer ...
var theCharacterTimeout = 75;
var theStoryTimeout = 4000;
var theWidgetOne = "_";
var theWidgetNone = "";
var theSummaries = new Array();
var theSiteLinks = new Array();
jQuery.get('http://www.solosails.com/feed/', function(data) {
var $xml = jQuery(data);
$xml.find("item").each(function() {
var $this = jQuery(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text()
}
//Do something with item here...
theSummaries.push(item.title);
theSiteLinks.push(item.link);
});
theItemCount = theSummaries.length;
startTicker();
});

use javascript to insert google ads within a page of text

I am trying to insert google ads after the first paragraph of the text box on my mediawiki site. My code is based on https://www.mediawiki.org/wiki/Extension:AdsWherever.
I have a function that returns a tag which will render the google ads code.
I am using javascript to check if the tag is there, if it isn't I'm inserting it after the first paragraph.
The issue is none of the rest of the text in the text box is showing after the google ads. I think this may because the function is returning a value and breaking out of the code and so not allowing the rest of the javascript code to run. (I may be wrong but this is what I think the issue is).
How do I insert the google ads in the correct place and still show the text after the ads?
I don't mind skipping the function altogether and just using javascript to insert the code but I don't know how to write the javascript so var b contains the javascript for the google ads.
This is my code:
$wgHooks['ParserFirstCallInit'][] = 'AdsSetup';
$wgHooks['EditPage::showEditForm:initial'][] = 'CheckHasTag';
function AdsSetup( &$parser ) {$parser->setHook( 'ads', 'AdsRender' ); return true;}
function AdsRender($input, $args ) {
$input =""; $url = array(); global $wgOut;
$ad['goo1'] = '<html><br><script type="text/javascript">
google_ad_client = "xxx";
google_ad_width = 728;
google_ad_height = 90;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><br></html>';
$media = $args['media'];
return $ad[$media];
}
// check if content has <goo1> tag
function CheckHasTag($editPage){
global $wgOut;
$wgOut->addScript('<script type="text/javascript">
var editTextboxText = document.getElementById("wpTextbox1").value;
var searchFor = "goo1";
var searchResult = editTextboxText.search(searchFor);
if(searchResult == -1){
var a = editTextboxText;
var b = "\n<ads media=goo1>\n";
var findP = "\n";
var p = editTextboxText.search(findP);
var position = p;
document.getElementById("wpTextbox1").value = a.substr(0, position) + b + a.substr(position);
}
</script>');
return true;
}

var editTextboxText = document.getElementById("mw-content-text").innerHTML;
var searchFor = new RegExp("goo1");
if (searchFor.test(editTextboxText) === false) {
var ad = document.createElement('ads');
ad.setAttribute('media', 'goo1');
var parent = document.getElementById("mw-content-text").getElementsByTagName('p')[0].parentNode;
var secondParagraph = document.getElementById("mw-content-text").getElementsByTagName('p')[0].nextSibling;
parent.insertBefore(ad, secondParagraph);
}
JSfiddle

Jquery doesnt update in forms

I made the following code to replace form fields in a page that I can't edit but only manipulate. However, the code does nothing. In chrome console when I print a variable it works fine. The code is below:
//GET val from drop DROP DOWN
var office_id = FieldIDs["OfficeName"];//Gets the input id
var offices;//gets the value from the drop down
$("#FIELD_"+office_id).change(function(){
offices = $(this).val();
}).change();
//The below gets the id's of all the input fields
var address_id = FieldIDs["Address"];
var address2_id = FieldIDs["Address2"];
var city_id = FieldIDs["City"];
var state_id = FieldIDs["State"];
var zip_id = FieldIDs["Zip"];
var phone_4id = FieldIDs["Number4"];//phone
var phone_id = FieldIDs["Number1"];//fax
var pdfm4 = FieldIDs["pdfm4"];
var pdfm = FieldIDs["pdfm"];
if(offices == "SoCal Accounting"){
$('#FIELD_'+address_id).val("7421 Orangewood Avenue");
$('#FIELD_'+address2_id).val("");
$('#FIELD_'+city_id).val("Garden Grove");
$('#FIELD_'+state_id).val("CA");
$('#FIELD_'+zip_id).val("92841");
$('#FIELD_'+phone_4id).val("+1 714.901.5800");//phone
$('#FIELD_'+phone_id).val("+1 714.901.5811");//fax
}

Javascript: Problem regarding creating a dropdown list using javascript?

I'm trying to create a dropdown list from an array on my overlay (div element) using javascript.
In this example,
spcodelist = [u'CA125', u'HCM112', u'HCM147', u'HCM97', u'HKI128', u'HKI158', u'HKS161', u'HKS231', u'TKA230']
Here are related lines of code:
var pcode_form = document.createElement('form');
div.appendChild(pcode_form);
var pcode_select = document.createElement('select');
pcode_form.appendChild(pcode_select);
var i = 0;
var spcodelist = document.getElementById('spcodelist').value;
spcodelist = spcodelist.replace("[","");
spcodelist = spcodelist.replace("]","");
var spcodearr = new Array();
spcodearr = spcodelist.split(', ');
for (i=0;i<=spcodearr.length;i++){
spcodearr[i] = spcodearr[i].replace(/u'/g,"");
spcodearr[i] = spcodearr[i].replace(/'/g,"");
var pcode_option = document.createElement('option');
pcode_option.text = spcodearr[i];
pcode_option.value = spcodearr[i];
pcode_select.appendChild(pcode_option);
}
With this code, the dropdown list works fine but code after it will not work any more. I don't know what's the problem? How can I solve it? Or is there any better solution? Thank you very much.

I don't know what you are doing wrong, but the following works fine and should work in any browser. I've added a remove button so you can add and remove the select as often as you like.
<script type="text/javascript">
function addSelect(id) {
var div = document.getElementById(id);
var pcode_form = document.createElement('form');
pcode_form.id = 'f0';
div.appendChild(pcode_form);
var pcode_select = document.createElement('select');
pcode_form.appendChild(pcode_select);
var spcodelist = document.getElementById('spcodelist').value;
// Do replaces in one go
spcodelist = spcodelist.replace(/[\[\]\'u ]/g,'');
var spcodearr = spcodelist.split(',');
for (var i=0, iLen=spcodearr.length; i<iLen; i++) {
pcode_select.options[i] = new Option(spcodearr[i],spcodearr[i]);
}
}
</script>
<button onclick="addSelect('d0');">Add select</button>
<button onclick="
var el = document.getElementById('f0');
el.parentNode.removeChild(el);
">Remove form</button>
<div id="d0"></div>
<textarea id="spcodelist" style="display:none">[u'CA125', u'HCM112', u'HCM147', u'HCM97', u'HKI128', u'HKI158', u'HKS161', u'HKS231', u'TKA230']</textarea>