JavaScript

Re: simple javascrpt: checkbox

2-Sep-11 7:13

Hi Devs,

HTML

<div id="event">
  <div class="row">
    <label class="label" for="ex11">Label:</label> <br />
    <input type="checkbox" id="ex11" />
    <span id="status"></span> <br /> <br />

  </div>
 </div>

and javascript

JavaScript

         $("#ex11")
        // attach the iButton behavior
        .iButton({
         /*  labelOn: "Yes"
         , labelOff: "No"
         ,*/ change: function ($input){
                // update the text based on the status of the checkbox
                $("#status").html($input.is(":checked") ? "Switched ON" : "Switched OFF");

            }
        })
        // trigger the change event (to update the text)
        .trigger("change");
});

Now the problem is - When check box is checked - i want to pass a variable with 1 value that will be stored in the database. How can i do that in current situation??
Do i have to pass the variable from javascript to php and then sore it in database ? If yes then what's the best way to pass variable with 1 value to php ??

Thanks

Evan Gallup3-Sep-11 19:08

Evan Gallup

3-Sep-11 19:08

The way I would do so (if you want to do it on the fly, without the user changing pages) is to use AJAX. It's really quite simple actually, don't let AJAX scare you off if you haven't ventured into it yet.

JavaScript

function saveCheckBoxValue(value)
{
  var xmlhttp;
  if (window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
  }
  else{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function(){
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
          [DO SOMETHING HERE SUCH AS THE EXAMPLE BELOW THIS]
          document.getElementById('#ex11').innerHTML += "Value saved!";
      }
  }

  xmlhttp.open("GET","[LOCATION TO PHP SCRIPT HERE]?value=" + value,true);
  xmlhttp.send();
}

Then, in the HTML code for your checkbox, all you must do is this:

<input type="checkbox" id="ex11" value="" onchange="saveCheckBoxValue(this.value)" />

Not sure if this is what you were looking for, but I figured I'd give my two cents. The best part about this is that you can create multiple checkboxes, but still only use that one js function to save the values. You will most likely need to tweak this to your needs, such as the value that the checkbox must have, but it's a start at least.

Happy coding! Big Grin | :-D

Re: simple javascrpt: checkbox

AndyInUK5-Sep-11 5:43

Re: simple javascrpt: checkbox

5-Sep-11 5:43

Hi Evan,

Thanks for your reply. This make sense and works but it doesn't seem to work when i check/uncheck more than once. I would like the checkbox with two values. When checked -> 1 should be stored in the database and when unchecked -> 0 should be stored in db.

I can do something like this but then it will display two checkbox and that doesn't really help.

HTML

<input name="users" type="checkbox" value="1" onchange="saveCheckBoxValue(this.value)" />
<input name="users" type="checkbox" value="0" onchange="saveCheckBoxValue(this.value)" />

I guess am missing something very basic??

Thanks
Andyyy

Evan Gallup5-Sep-11 6:53

Evan Gallup

5-Sep-11 6:53

Yes, something very very very basic. You need to look at the AJAX script.

function saveCheckBoxValue(value)
{
  var xmlhttp;
  if (window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
  }
  else{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 
  xmlhttp.onreadystatechange=function(){
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
          if(document.getElementById('users').checked) document.getElementById('users').value = '1';
          else document.getElementById('users').value = '0';
          document.getElementById('#ex11').innerHTML += "Value saved!";
      }
  }
 
  xmlhttp.open("GET","[LOCATION TO PHP SCRIPT HERE]?value=" + value,true);
  xmlhttp.send();
}

Then just make sure you set the 'id' attribute on your checkbox.

<input name="users" id="users" type="checkbox" value="0" onchange="saveCheckBoxValue(this.value)" />

Keep in mind what the value should start as based on the value from the database if needed. That's opening a whole new can of worms. You're going to need to get the current value from the database with PHP, and then use and if-else like the one in the javascript above to set the initial value.

There are a lot of things going on in your script, you really have to keep your mind open and figure out the logic behind everything that's happening to be a successful programmer.

Good luck!

-Evan

XML and Javascript

Member 820418431-Aug-11 19:26

Member 8204184

31-Aug-11 19:26

Hi,
I need lines of code to generate and update an xml file via javascript.

Re: XML and Javascript

DaveAuld31-Aug-11 22:43

DaveAuld

31-Aug-11 22:43

Nobody can answer that question without more information;

a) where is the javascript being executed

b) what exactly are you trying to achieve, define the problem statement in a bit more detail. There may be better approaches.

Dave
Find Me On: Web|Facebook|Twitter|LinkedIn

Folding Stats: Team CodeProject

Re: XML and Javascript

Evan Gallup3-Sep-11 19:39

Evan Gallup

3-Sep-11 19:39

It is possible to do this, although depending upon your Javascript abilities, could be very frustrating. Check out this link: http://www.w3schools.com/dom/default.asp[^]

A server-side language is far easier to use for this sort of thing IMHO. PHP may be your best free option, just look for an XML class. Coldfusion has excellent XML support if you've got money to spend or already have a license for it.

iphone style switch

AndyInUK30-Aug-11 23:07

30-Aug-11 23:07

Hi,

After going through this example tutorial - http://papermashup.com/jquery-iphone-style-ajax-switch/[^], I am trying to create iphone style on/off switch and it seems to be working when i place it in content area of the individual page and load it but when i place it one of the master templates to load it whenever appropriate on the left side bar of the page - it doesn't display the switch button.

I think it's not calling a jquery/javascript that creates button?

HTML

<script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.iphone-switch.js" type="text/javascript"></script>

JavaScript

<div id="container">

 <div class="left" id="1"></div>
 <div id="ajax"></div>
  <div class="clear"></div>

  <script type="text/javascript">
     
    $('#1').iphoneSwitch("on", 
     function() {
		 alert("sometext");
       $('#ajax').load('on.php');
      },
      function() {
       $('#ajax').load('off.php');
      },
      {
        switch_on_container_path: 'iphone_switch_container_off.png'
      });
  </script>

</div>

Any suggestions?

Re: iphone style switch

AndyInUK2-Sep-11 1:06

JavaScript class problem [modified]

2-Sep-11 1:06

Solved!

Wjousts25-Aug-11 6:09

25-Aug-11 6:09

I'm not a habitual user of JavaScript, but I have a particular need for it right now, so maybe my problem is due to some fundamental misunderstanding of how JavaScript is supposed to work and my expectation that it'll work somewhat like the C# I'm familiar with. Anyway, I have a class (or object prototype or whatever the correct term in JavaScript is supposed to be) that looks something like this:

JavaScript

function MyClass() {

    //....

    this.OnTimerStart = function() {
        // Do some stuff
    };

    MyClass.prototype.StartTimer = function() {
        if (this.OnTimerStart != null) {
            this.OnTimerStart();
        }
    }
}

Now when I use it, I create an object like so:

JavaScript

var myObj = new MyClass();

Now here's my problem, in the StartTimer function this.OnTimerStart returns undefined (so the != null comparison is always false and the function doesn't get called), but myObj.OnTimerStart is defined and can be executed (directly running myObj.OnTimerStart() works). So why doesn't the prototype method StartTimer seem to know what "this" is? At least in the case when a variable is a function (it doesn't seem to have a problem when a variable is just a string or an int for example). What am I not understanding here?
(Note: tested in IE8, I have other problems with Firefox at the moment which may or may not be related)

Edit: fixed typo in StartTimer

modified on Thursday, August 25, 2011 1:40 PM

Graham Breach25-Aug-11 6:34

Graham Breach

25-Aug-11 6:34

Try replacing

MyClass.prototype.StartTimer() {

with

MyClass.prototype.StartTimer = function() {

Wjousts25-Aug-11 7:40

25-Aug-11 7:40

Actually, that was a typo on my part when posting. I think the actual problem I'm having is more complicated that my simple example showed. The way StartTimer get called is from the callback to a jQuery getJSON:

JavaScript

MyClass.prototype.MyFunction = function () {
    $.getJSON(this.url + "/MyFunction?callback=?", function (data) {
        MyClass.prototype.ErrorChecker(data, function (data) {
            MyClass.prototype.StartTimer();
        });
    });
}

ErrorChecker is a function I use to check for a particular returned value that indicates an error occurred with my web service which then calls the passed in function (i.e. StartTimer) if there is no error. I thought the problem might be because I did MyClass.prototype, but changing it for this.StartTimer() (and/or this.ErrorChecker) doesn't work either and causes an error within jQuery. I guess somewhere within the callback infrastructure you lose the identity of "this". I guess I could change so that both methods (ErrorChecker and StartTimer) accept an extra argument which I can pass "this" in to. I'll give it a try.

AspDotNetDev25-Aug-11 7:45

25-Aug-11 7:45

Try this:

JavaScript

MyClass.prototype.MyFunction = function () {
    var instance = this;
    $.getJSON(instance.url + "/MyFunction?callback=?", function (data) {
        instance.ErrorChecker(data, function (data) {
           instance.StartTimer();
        });
    });
}

Martin Fowler wrote:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Wjousts25-Aug-11 8:06

25-Aug-11 8:06

jQuery still chokes on it. Is there a difference between instance and this?

AspDotNetDev25-Aug-11 8:11

25-Aug-11 8:11

"this" is a keyword. "instance" is just what I named that variable. You could rename "instance" to "donkey" and it would act the same. What my changes are supposed to do are capture the value returned from "this" and store it in the "instance" variable so you can use it in nested functions where "this" changes. I'm not sure why it still chokes. Try replacing the line that chokes with alert("test").

Martin Fowler wrote:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Wjousts25-Aug-11 8:18

25-Aug-11 8:18

Whoops!

I completely missed that part. I thought instance was some JavaScript keyword I didn't know about (it's been a long time since I last did any significant JavaScript). Just tried it and it seems to work now. Copying this to a local variable solves the problem.

Thank you very much. I've been banging my head on my desk all morning.

AspDotNetDev25-Aug-11 7:19

25-Aug-11 7:19

In addition to what Graham said, you don't need to put prototype functions in the constructor. You can do this instead:

JavaScript

function MyClass() {
  this.OnTimerStart = function() {
    alert("started");
  };
}
MyClass.prototype.StartTimer = function() {
  if (this.OnTimerStart) {
    this.OnTimerStart();
  }
}
var instance = new MyClass();
instance.StartTimer();

Martin Fowler wrote:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Wjousts25-Aug-11 7:43

25-Aug-11 7:43

Is there a reason for doing it that way versus what I was doing? I can't help my strong desire to wrap a "class" in curly brackets (i.e. the C# way) which I think was why I naturally did it that way.

AspDotNetDev25-Aug-11 7:47

25-Aug-11 7:47

Your way, the function would be created each time the class constructor is called. My way, it is created once. Doing it your way would be in C# like creating a delegate rather than a function and reassigning the delegate each time the constructor is called. Basically, it's an unnecessary performance hit.

Martin Fowler wrote:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Wjousts25-Aug-11 7:58