|
Hi Devs,
<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
$("#ex11")
.iButton({
change: function ($input){
$("#status").html($input.is(":checked") ? "Switched ON" : "Switched OFF");
}
})
.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
|
|
|
|
|
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.
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! 
|
|
|
|
|
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.
<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
|
|
|
|
|
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
|
|
|
|
|
Hi,
I need lines of code to generate and update an xml file via javascript.
|
|
|
|
|
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.
|
|
|
|
|
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.
|
|
|
|
|
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?
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.iphone-switch.js" type="text/javascript"></script>
<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?
|
|
|
|
|
|
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:
function MyClass() {
this.OnTimerStart = function() {
};
MyClass.prototype.StartTimer = function() {
if (this.OnTimerStart != null) {
this.OnTimerStart();
}
}
}
Now when I use it, I create an object like so:
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
|
|
|
|
|
Try replacing
MyClass.prototype.StartTimer() {
with
MyClass.prototype.StartTimer = function() {
|
|
|
|
|
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:
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.
|
|
|
|
|
Try this:
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.
|
|
|
|
|
jQuery still chokes on it. Is there a difference between instance and this?
|
|
|
|
|
"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.
|
|
|
|
|
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.
|
|
|
|
|
In addition to what Graham said, you don't need to put prototype functions in the constructor. You can do this instead:
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.
|
|
|
|
|
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.
|
|
|
|
|
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.
|
|
|
|
|
|
Hi,
I have a jquery dialog which loads another aspx page inside iframe.
I want dialog to resize as per the contents inside Iframe.
Tried setting
width:'auto' and autoResize: true
in the dialog constructor but no luck.
modified on Wednesday, August 24, 2011 9:25 AM
|
|
|
|
|
You will have to create some javascript yourself to build this. First you will have to attach an event to the onload of the iframe. In that onload function you will have to try to calculate the height of the contents and resize the jQuery dialog window. I built something similar a couple of months back, but it didn't work equally well in all scenario's.
var popup_div = document.createElement('div');
var popup_content = document.createElement('iframe');
var dialog = null;
jQuery(popup_content).css({ 'width': '100%', 'height': '100%', 'border': 'none', 'visibility': 'hidden' });
popup_content.src = url;
popup_content.name = name;
popup_div.id = 'bb-dialog';
popup_div.appendChild(popup_content);
document.body.appendChild(popup_div);
jQuery(popup_content).bind('load', function () {
height = height == 'auto' ? jQuery(top.window.frames[name]).height() : height,
width = width == 'auto' ? jQuery(top.window.frames[name]).width() : width;
jQuery(popup_div).dialog({
show: 'fade',
hide: 'fade',
title: title,
modal: true,
position: 'center',
width: width,
height: height,
closeOnEscape: false,
close: function () { this.parentNode.parentNode.removeChild(this.parentNode); },
open: function () { jQuery(popup_content).css('visibility', 'visible'); },
buttons: button_set
});
jQuery(this).unbind('load');
});
Try it out and see if it works for you. Though you might have to tweak it a little bit.
|
|
|
|
|
I found and adapted an HTML script as shown below. It fits my needs perfectly. However, I don't know how to store the field-values of repeated lines in a javascript array that subsequently passes its contents on to a PHP-array that enables me to store the date in a MYSQL-database. I tried to fix something myself in de 3rd codeblock of de AddRow()function.
A second problem is: when de line is repeated I need to reset de field values to default. Does anybody have the knowledge that I so obviously do not have?
======================================================================
<title>
function AddRow ()
{
var o_id = document.getElementById ("id").cloneNode(true);
var label_id = document.getElementById ("label_id").cloneNode(true);
var o_item = document.getElementById ("item").cloneNode(true);
var o_subitem = document.getElementById ("subitem").cloneNode(true);
var label_opm = document.getElementById ("label_opm").cloneNode(true);
var o_opm = document.getElementById ('opm').cloneNode(true);
// reset field opm
document.getElementById("opm").innerHTML="";
o_id.name='id[]';
o_item.name = 'item[]';
o_subitem.name = 'subitem[]';
o_opm.name = 'opm[]';
var o_button = document.createElement ("input");
o_button.type = "button";
o_button.value = "Remove";
o_button.onclick = RemoveRow;
var o_td_id = document.createElement ("td");
var o_td_item = document.createElement ("td");
var o_td_subitem = document.createElement ("td");
var o_td_opm = document.createElement ("td");
var o_td_button = document.createElement ("td");
var o_tr = document.createElement ("tr");
var o_body = document.getElementById ("dynamic_table_body");
o_td_id.appendChild (label_id);
o_td_id.appendChild (o_id);
o_td_item.appendChild (o_item);
o_td_subitem.appendChild (o_subitem);
o_td_opm.appendChild (label_opm);
o_td_opm.appendChild (o_opm);
o_td_button.appendChild (o_button);
o_tr.appendChild (o_td_id);
o_tr.appendChild (o_td_item);
o_tr.appendChild (o_td_subitem);
o_tr.appendChild (o_td_opm);
o_tr.appendChild (o_td_button);
//document.ovd.id.value++;
alert(o_item.value);
o_body.appendChild (o_tr);
}
function RemoveRow ()
{
var dinosaur = this.parentNode.parentNode;
dinosaur.parentNode.removeChild (dinosaur); // 
}
OvD-Id
|
-- Choose Category --
Cat 1
Cat 2
Cat 3
|
-- Choose Sub Category --
Sub Cat 1
Sub Cat 2
Sub Cat 3
| Remarks
| Add OvD Item
|
|
|
|
|
|
I'd love to help, but I'm really not clear as to what you're asking here. Can you explain further?
Also, just a tip, put any code you must share inside of these tags: <pre></pre>
Do so by clicking the 'code' button above the message box. It makes your code a lot easier to read.
|
|
|
|
|
<title>
function AddRow ()
{
var o_id = document.getElementById ("id").cloneNode(true);
var label_id = document.getElementById ("label_id").cloneNode(true);
var o_item = document.getElementById ("item").cloneNode(true);
var o_subitem = document.getElementById ("subitem").cloneNode(true);
var label_opm = document.getElementById ("label_opm").cloneNode(true);
var o_opm = document.getElementById ('opm').cloneNode(true);
// reset field opm
document.getElementById("opm").innerHTML="";
o_id.name='id[]';
o_item.name = 'item[]';
o_subitem.name = 'subitem[]';
o_opm.name = 'opm[]';
var o_button = document.createElement ("input");
o_button.type = "button";
o_button.value = "Remove";
o_button.onclick = RemoveRow;
var o_td_id = document.createElement ("td");
var o_td_item = document.createElement ("td");
var o_td_subitem = document.createElement ("td");
var o_td_opm = document.createElement ("td");
var o_td_button = document.createElement ("td");
var o_tr = document.createElement ("tr");
var o_body = document.getElementById ("dynamic_table_body");
o_td_id.appendChild (label_id);
o_td_id.appendChild (o_id);
o_td_item.appendChild (o_item);
o_td_subitem.appendChild (o_subitem);
o_td_opm.appendChild (label_opm);
o_td_opm.appendChild (o_opm);
o_td_button.appendChild (o_button);
o_tr.appendChild (o_td_id);
o_tr.appendChild (o_td_item);
o_tr.appendChild (o_td_subitem);
o_tr.appendChild (o_td_opm);
o_tr.appendChild (o_td_button);
//document.ovd.id.value++;
alert(o_item.value);
o_body.appendChild (o_tr);
}
function RemoveRow ()
{
var dinosaur = this.parentNode.parentNode;
dinosaur.parentNode.removeChild (dinosaur); //
}
OvD-Id
|
-- Choose Category --
Cat 1
Cat 2
Cat 3
|
-- Choose Sub Category --
Sub Cat 1
Sub Cat 2
Sub Cat 3
| Remarks
| Add OvD Item
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
