How to get the objects of the selected ITem - JavaScript Discussion Boards

Hey guys.

I'm looking to do some Javascript validation for drop down lists. I have the idea, I think, I just can't get it to work.

Heres the javascript

JavaScript

function Test() {

            var ddlDevice = document.getElementById("<%=ddlDeviceType.ClientID%>");
            if (ddlDevice.value == "---Please Select---") {
                window.alert("Test");
                ddlDevice.focus();
                return false;
            }

Heres the code behind

C#

ddlDeviceType.Attributes.Add("onblur", "Test()");

I need it to be client side, and this kid of style, if that makes sense?

Thanks Guys

Add this to your dropdown control in aspx page .
onChange="javascript:ddlClick()"

C#

<asp:DropDownList ID="DropDownList2" runat="server" onChange="javascript:ddlClick()"></asp:DropDownList>

JavaScript

<script type="text/javascript">
function ddlClick()
{
//Write your code here.
}
</script>

The <%client.id %> is for when your object is on a webform.
in code behind, you have to use a static id value.

So make sure the object exist first, it not, then it's your id, and javascript could not find it.

function Test() {
 
    var ddlDevice = document.getElementById("_ddlDeviceType");
    alert(ddlDevice); // make sure it says [object]
    if (ddlDevice.value == "---Please Select---") {
        alert("Test");
        ddlDevice.focus();
    }
    return false;
}

ddlDeviceType.Attributes.Add("id", "_ddlDeviceType");
ddlDeviceType.Attributes.Add("onblur", "Test(); return false;");

I wrapped up this code, did a final test, and it doesn't work on IE8 in XP and Server 2003. I tested it on firefox, Windows Vista IE, with developer mode for IE7, 8 and 9, works fine.

I can't get it to render in the DOM, and I'm completly baffled by it.

This is the simple part of the code. There's a more complex half not posted, and I really like the way createElement works, like creating html in code behind, it's easy to follow.

I remember reading something about createElement not working very good in IE8, but I can't find the web site again.

I tried document.body.appendChild(table_Progress) just as a test, but it still didn't render.

C#

// Build or Construct a Progress Indicator
        var table_Progress = document.createElement("table");
        table_Progress.id = "_table_Progress";
        table_Progress.setAttribute("cellpadding", "0");
        table_Progress.setAttribute("cellspacing", "0");
        table_Progress.setAttribute("border", "0");
        table_Progress.style.width = "100%";

        // Progress Image
        var tr_Progress_Image = document.createElement("tr");
        table_Progress.appendChild(tr_Progress_Image);

        var td_Progress_Image = document.createElement("td");
        td_Progress_Image.style.width = "100%";
        td_Progress_Image.style.height = "240px";
        td_Progress_Image.style.verticalAlign = "bottom";
        td_Progress_Image.style.textAlign = "center";
        td_Progress_Image.style.margin = "0px auto";
        tr_Progress_Image.appendChild(td_Progress_Image);

        var image_Progress = document.createElement("img");
        var imgProgress = $('[id*="_txt_JQuery_ImageBrowser_LibraryProgress"]').val();
        image_Progress.src = imgProgress;
        td_Progress_Image.appendChild(image_Progress);

        // Progress Message
        var tr_Progress_Message = document.createElement("tr");
        table_Progress.appendChild(tr_Progress_Message);

        var td_Progress_Message = document.createElement("td");
        td_Progress_Message.style.width = "100%";
        td_Progress_Message.style.height = "240px";
        td_Progress_Message.style.verticalAlign = "top";
        td_Progress_Message.style.textAlign = "center";
        td_Progress_Message.style.margin = "0px auto";
        tr_Progress_Message.appendChild(td_Progress_Message);

        var span_Progress_Message = document.createElement("span");
        span_Progress_Message.style.color = "rgb(0,0,0)";
        span_Progress_Message.style.fontSize = "2.0em";
        span_Progress_Message.style.fontWeight = "bold";
        span_Progress_Message.innerHTML = "Generating Product Library Browser";
        td_Progress_Message.appendChild(span_Progress_Message);

        // Append the Progress Indicator to the Panel
        $('[id*="_panel_Preview_Object"]').empty();
        $('[id*="_panel_Preview_Object"]').append(table_Progress);

ie8 is really strict, so it was a matter of dotting the i's and crossing the t's.

If you make a small mistake, there is no warning, so like on the span tag, it's innerText and not innerHtml.

On tableRow's, it's insertRow(-1),

and on tablecell's it's insertCell(-1)

[EDIT]

Well after hours of reading last night, I found out that I'm running IE7, even though it's IE8 on XP and Server 2003. I also learned that IE7 and IE8 have there own version of creating html markup using createElement and appendChild.

So it's a matter of learning which properties work in both Gecko based browsers and IE, and which don't. It's sort of like VHS and Beta, they look the same, but are different.

I tried testing for createElement, to see if the DOM created it, by adding an ID to the element, and going back and checking the value, to maintain 1 version, but the element was created and an ID was assigned anyway on both.

So for now, I just did a browser check, and switch between the 2 versions.

I thought I was doing pretty good with Javascript and Jquery, but I have much more to learn about it, or I'm just using both more now and taking it to much higher levels now.

modified 16-Jul-12 12:44pm.

Hi,
i click button a web page in webbrowser on c# form application. there is a button named "ileri" and i click this button , javascript run, then page refresh and submit. Then a blank page, why blank page?

XML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=iso-8859-9" http-equiv=Content-Type></HEAD>
<BODY></BODY></HTML>

what is problem?

The page may be redirect to a blank page

Good day

i am new to knockout ,

I am bringing back the data from a control and i am doing the autocomplete and i show the results in a listbox as depicted below

JavaScript

$(function () {
    $("#txtSearchString").keyup(function () {
        $("#lstSearchOptions").hide('fast');

 
        if ($("#txtSearchString").val().length >= 3)
        {
            var data = {}
            data.searchString = $("#txtSearchString").val();
            $.getJSON("/SearchCars/SearchCars", data, function (result) {
                //Autocomplete binding
                var viewModel =
                 {

                     SearchOptions: ko.observableArray(result), // These are the initial options 
              
                } 
                //item.Model + ' ' + item.Type + ' ' + item.Year
                ko.applyBindings(viewModel,document.getElementById("stSearchOptions"));
                ko.applyBindings(viewModel, document.getElementById("selectedcarid"));
                if (result != null)
                {
                    $("#lstSearchOptions").show('fast');
                }
            });
        }
    });
});

now when the user select something i need to get the selected ID and i also want the Year and this is my HTML

HTML

<select id="lstSearchOptions" data-bind="options: SearchOptions, optionsText: function(item) {
                    return item.Model + ' ' + item.Type + ' ' + item.Year}, optionsValue: 'CarId'"
                 multiple="multiple" size="-1" class="searchOptions">
             </select>

and i have this to assign the value

JavaScript

$(function () {
    $("#lstSearchOptions").change(function () { 
        $("#selectedcarid").val($("#lstSearchOptions option:selected").val());

    });

    $("#lstSearchOptions").blur(function () { 
        $("#lstSearchOptions").hide("fast");
     
 
    });
});

so i can get the ID from here

JavaScript

$("#selectedcarid").val($("#lstSearchOptions option:selected").val());

but have a Problem to getting the year

Thanks

Vuyiswa Maseko,

Spoted in Daniweb-- Sorry to rant. I hate websites. They are just wierd. They don't behave like normal code.

C#/VB.NET/ASP.NET/SQL7/2000/2005/2008
http://www.vuyiswamaseko.com
vuyiswa[at]dotnetfunda.com
http://www.Dotnetfunda.com

Hi all,

This is hopefully a very simple question however I do not know the answer to it.
I am trying to link a cell from a table created in Javascript to another function.

JavaScript

var cell_1 = document.createElement("td");
cell_1.style.textAlign = "center";
cell_1.appendChild(document.createTextNode("Hi"));
onclick = myFunction();

This code ALL works apart from the onclick function, all I wanted to do is when the cell is clicked for example an alert message pops up.
Hopefully that makes sense and if anybody can help that would be helpful Smile | :)

Hi, you're basically there. Just 2 points:

the onclick function belongs to cell_1
You want to set the address of the function, not the result

JavaScript

cell_1.onclick = myFunction;

It might be better to create an a tag with a javascript: url:

var cell_1 = document.createElement("td");
cell_1.style.textAlign = "center";
var link = document.createElement("a");
link.appendChild(document.createTextNode("Hi"));
link.href = 'javascript:myFunction()';

That way, you get the usual link semantics (underlining, colour cues, cursor, tab order entry).

alternet way
cell_1.onclick = new Function ('myFunction()');

to attach events see this

// +++++ attach even
function AtEv(X00,X01,X02,X03)
// X00 pointer of object with event
// X01 kind of event, string e.g. 'mouseover'
// X02 pointer of event handler
// e.g. keyDownTextField (e)
// {
// var keyCode = e.keyCode;
// //...
// }
// X03 false bubbling event allowed
// true bubbling event not allowed: Capturing of event thru handler
// must be identical with avent deatch
// returns true if event attched
{
var X04=false;

// insert here checking of pointer and string ...

if(X00.attachEvent)
{
X04=X00.attachEvent('on'+X01,X02);
}
else
{
if(X00.addEventListener)
{
X00.addEventListener(X01,X02,X03);
X04=true;
}
}

return X04;
}

// +++++ detach event
function DatEv(X00,X01,X02,X03)
// params see AtEv
{
var X04=false;

// insert here checking of pointer and string ...

if(X00.detachEvent)
{
X04=X00.detachEvent('on'+X01,X02);
}
else
{
if(X00.removeEventListener)
{
X00.removeEventListener(X01,X02,X03);

X04=true;
}
}

return X04;
}

example

function EventHandler(e,X00)
// e.g. X00 param
// e placeholder for event
{
// do something with X00 and or e
}

// ----- create dynamic event handler
var pointerOfDynamicEventHandler=new Function('e','EventHandler(e,' + here the value of X00 + ')');

// check pointer ...

// ----- attach dynamic event handler
var booleanFlag=AtEv(pointerofObjectWithEvent,'click',pointerOfDynamicEventHandler,false);

// ------ don't forget to deatch event if you this not need

Good morning guys

I'm a little problem with my javacsript ...
I have an input to the value date of the calendar, and have a + button that the function of this value and add more inputs to add more dates, so that when I insert more dates so these dates are entered in the first label and not in others that I called with the button + ...
Can someone help me solve this problem?

I have my code so, someone can help me!

<pre lang="Javascript">var id = 1;
function novoCampo()
{
var inp = document.createElement("input");
inp.setAttribute("id", +id );
var lab = document.createElement("label");
lab.setAttribute("id", "l", +id);
var cal = document.createElement(popdate('document.form_funcionario.data_cadastro','pop3','150',document.form_funcionario.data_cadastro.value));
lab.setAttribute("id", +id);
var lab_content = document.createTextNode("");
var quebra = document.createElement("br");lab.appendChild(lab_content);
var inpP = document.getElementById(id-1);
var parentInp = inpP.parentNode;
parentInp.insertBefore(lab, inpP.nextSibling);
parentInp.insertBefore(inp, lab.nextSibling);
parentInp.insertBefore(quebra, lab);
++id;
}</pre>

the problem is already solved Big Grin | :-D

var id = 1;
function novoCampo()
{
var inp = document.createElement("input");
inp.setAttribute("id", +id );
inp.setAttribute("name", "data_cadastro_"+id+"");
var lab = document.createElement("label");
lab.setAttribute("id", "l", +id);
lab.setAttribute("lab", +id);
var lab_content = document.createTextNode("");
var quebra = document.createElement("br");
var inpP = document.getElementById(id-1);
var parentInp = inpP.parentNode;
parentInp.insertBefore(lab, inpP.nextSibling);
parentInp.insertBefore(inp, lab.nextSibling);
parentInp.insertBefore(quebra, lab);

document.getElementById(+id).setAttribute('onclick',"javascript:popdate('document.form_funcionario.data_cadastro_"+id+"','pop3','150',document.form_funcionario.data_cadastro_"+id+".value)"); // for FF
//document.getElementById(+id).onclick = function() {javascript:popdate('document.form_funcionario.data_cadastro_'+id+'','pop3','150',document.form_funcionario.data_cadastro_+id+.value)}; // for IE

++id;
}

for those who are experiencing the same problem, this solution there... Big Grin | :-D

when printing the one long web page . i want to insert a header on each page so how can i break html page automatically and insert header on it rather than manual page break.

hai
please help me..

Hi,
i have the below code

var copy = "CATCOMETACISTCASEATCORACT";
var reg = /(CAT)+/;
var sd = copy.match(reg);

sd returns me only array with values [CAT,CAT] but i need diff combinations like
"CAT","CTA","TAC","ACT","ATC","TCA"
wat should the exact regular expression for the above result...

Just added modifiers - 'i' for ignore case and 'g' for global search

JavaScript

var copy = "CATCOMETACISTCASEATCORACT";
var reg = /([CAT]){3}/ig;
var sd = copy.match(reg);

Hope this may help you.

Regards,
Niral Soni

Thanks & Regards,
Niral Soni

Doesn't work. Your regex will accept "CCC" "CCA" "TTT" "ATT" etc, which is not what OP wants.

Peter

Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012

will be understood that some javascript can help me?

I'm creating a website but do not know much about javascript, this site need to create a dynamic calendar that clicking on any date that the User choose the date changes color.
I have done some research on the net but not getting success, picked up some calendars to make changes but also without much success. Frown | :(

someone help me please!!! Sigh | :sigh:

What do you mean with

Erika Silva wrote:
this site need to create a dynamic calendar that clicking on any date that the
User choose the date changes color

?

V.

I'm tryna create a dynamic calendar, which the User may select any one day and that day is selected with a different color and it can include notes. I managed to make one, but it was static and this schedule must have type arrows to see other months, you know?

You mean something like this[^] ?

The colors in the calendar are dynamically assigned and you can click on it to get some information. This is a very rudimentary version, but you could refine it.

If this is what you want I'll set you up with the basic ideas.

V.