Changing DOM but not appearing in browser - javascript

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

Related

Sahi unable to run the for loop

I have been using a test tool call Sahi.
So basically I transferred one of my file, Example.sah , from one computer to another computer. When I run it on my another computer, it can't read the for loop for the code below. I have changed it to while loop and it doesn't work either. However, the codes below worked on my previous computer.
-----------------------------------CODES----------------------------------------
var $userinfo = _readExcelFile("C:/Work/Example.xls");
var $userinfo1 = _readExcelFile("C:/Work/CheckExample.xls");
var $i=0
for ($i++; $i<$userinfo;){
var $Id = $userinfo[$i][0];
var $Int = $userinfo[$i][1];
var $Int2 = $userinfo[$i][2];
var $BigInt1 = $userinfo[$i][3];
var $BigInt2 = $userinfo[$i][4];
var $Double1 = $userinfo[$i][5];
var $Double2 = $userinfo[$i][6];
_click(_link("Edit"));
_click(_link("New"));
_setValue(_textbox("Title"), $Id);
_setValue(_numberbox("TestInt001"), $Int);
_setValue(_numberbox("TestInt002"), $Int2);
_setValue(_numberbox("TestBigint001"), $BigInt1);
_setValue(_numberbox("TestBigint002"), $BigInt2);
_setValue(_numberbox("TestDouble001"), $Double1);
_setValue(_numberbox("TestDouble002"), $Double2);
_click(_cell(0));
_doubleClick(_cell(0));
_click(_submit("Ok"));
var $Idx = $userinfo1[$i][0];
var $Intx = $userinfo1[$i][1];
var $Int2x = $userinfo1[$i][2];
var $BigInt1x = $userinfo1[$i][3];
var $BigInt2x = $userinfo1[$i][4];
var $Double1x = $userinfo1[$i][5];
var $Double2x = $userinfo1[$i][6];
_assertContainsText($Idx, _link($Id));
_assertContainsText($Intx, _cell($Int));
_assertContainsText($Int2x, _cell($Int2));
_assertContainsText($BigInt1x, _cell($BigInt1));
_assertContainsText($BigInt2x, _cell($BigInt2));
_assertEqual($Double1x, _getText(_cell($Double1)));
_assertEqual($Double2x, _getText(_cell($Double2)));
}
--------------------------OUTPUT----------------------------------------------
------------------- Stopped Playback: SUCCESS-------------------
I feel your error is in the below section :
var $i=0
for ($i++; $i<$userinfo;){
You can try replacing it with this
for ($var $i=0;$i<$userinfo;$i++){

Using javascript Not able to disable textbox.It Immediatly enable after disabled. Can anyone give me solution?

I have One simple registration Form which is developed in C#.Net. This form also contain one Grid view which display data from database.In this,I want to disable Insert button when i select particular raw data. and i had develop this code in jquery. I used below code.
function DoStuff(lnk) {
debugger;
var grid = document.getElementById('GridView1');
var cell, row, rowIndex, cellIndex;
cell = lnk.parentNode;
row = cell.parentNode;
rowIndex = row.rowIndex;
cellIndex = cell.cellIndex;
var rowId = grid.rows[rowIndex].cells[0].textContent;
var rowname = grid.rows[rowIndex].cells[1].textContent;
var rowcontact = grid.rows[rowIndex].cells[2].innerHTML;
var rowaddress = grid.rows[rowIndex].cells[3].innerHTML;
var rowemail = grid.rows[rowIndex].cells[4].innerHTML;
var Id = document.getElementById('txt_Id');
var name = document.getElementById('txt_Name');
var contact = document.getElementById('txt_PhoneNumber');
var address = document.getElementById('txt_Address');
var email = document.getElementById('txt_EmailId');
Id.value = rowId;
name.value = rowname;
contact.value = rowcontact;
address.value = rowaddress;
email.value = rowemail;
document.getElementById('Button1').disabled = true;
};
But when i run that page it becomes disable and immediately enable automatically.....:(
Can anyone give me solution ???
You have to call this function after form is completely loaded.
Use below code to make it that happen if you are using jQuery.
$( document ).ready(function() {
DoStuff(lnk);
});

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 event handler fires "error: CS1026: ) expected" exception

I've created a table of dynamic controls which each row is a couple of (DropDownList and TextBox) then I've associated an event handler on each DropDownList selected change event so I can change on its TextBox as the code below shows :
DropDownList TypeDDL = new DropDownList();
TypeDDL.ID = "TypeDDL_" + rowN.ToString();
TypeDDL.Width = 120;
TypeDDL.Height = 20;
InitializeTypeDDL(TypeDDL);
TypeDDL.AutoPostBack = true;
TypeDDL.Attributes.Add("onchange", "javascript:handleFieldsDDLEvent(this);");
TextBox FieldsDDL = new TextBox();
FieldsDDL.ID = "FieldsDDL_" + rowN.ToString();
FieldsDDL.Width = 120;
FieldsDDL.Height = 20;
FieldsDDL.Attributes.Add("style", "float:right");
but the Javascript code of the event handler fires an exceptions telling:
function handleFieldsDDLEvent(e) {
var elementId = (e.target || e.srcElement).id;
var IdArray = elementId.Split('_');
var ControlId = "Control_"+IdArray[1].toString();
if (IdArray[1] != "") {
var FieldsDDL = document.getElementById("<%="+ControlId +".ClientID%>");
// error CS1026: ) expected
ValueTxtBx.style.display = "none";
}
}
In your javascript you have
var FieldsDDL = document.getElementById("<%="+ControlId +".ClientID%>");
The <%= ... %> parts are rendered on the server so it cannot be done this way in javascript.

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>

Categories

Resources