I get informations about the product name , image, price, category etc from server but i put the informations in a select menus and i want when i change the options of the select menu i display an alert success here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
</head>
<body onLoad="Extra(); " >
<div id="extra" >
</div>
<script type="text/javascript" >
function Extra()
{
var callData = JSON.stringify({"serviceName":"global_functions", "methodName":"getAcces","parameters":[]});
$.post("http://www.test.com/webservice/?contentType=application/json", callData, function(data)
{
$.each(data, function( index, value)
{
$("#extra").append('<div style="border:2px solid red" id="'+index+'"><h3>'+value["name"]+'</h3><img width="200px" src="http://www.test.com/'+value["image"]+'"><select class="comboextra" selected="selected" id="test'+index+'">');
$.each(value["items"],function(index1,value1)
{
$("#test"+index).append('<option prix="'+value1["prix"]+'"cat="'+value1["cat"]+'" value= "'+value1["id"]+'" >"'+value1["name"]+'"</option>');
});
$("#extra").append('</select><label>Quantity</label><input type="number" name="q_extra1" value="0" id="q_extra1" class="quantiteextra" style="width:80px"></div><div class="alert alert-success icon-money"> valeur <span class="totalprix">0</span> </div>')
//alert("test");
});
});
}
$(document).on("change", ".comboextra", function ()
{
alert($(this).find(".comboextra option:selected").attr("prix"));
id = $(this).val();
prix = $("option:selected", this).attr("prix")
qte = $(".quantiteextra").val();
acccat = $("option:selected", this).attr("cat");
total = prix * qte;
acccat = ($(this).find(".comboextra option:selected").attr("cat"));
if (id != 0){$('#finaldata').find("[acccat="+acccat+"]").remove(); $("#finaldata").append('<input type="tex00t" acccat="'+acccat+'" id="acc'+id+'" name="acc['+id+']" value="'+qte+'">');} else {$('#finaldata').find("[acccat="+acccat+"]").remove();}
$(this).find(".totalprix").html(total);
});
</script>
<body>
</html>
//////////////////////////////////////////////EDITED AGAIN//////////////////////////////////
I can now display the alert and i want to select the product from the select menu and add the quantity and calculate the price here is my code after modification it's displaying the alert and the value =0 , it's not calculating and not displaying any value even when i change the quantity and when i change the product:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
</head>
<body onLoad="Extra(); " >
<div id="extra" >
</div>
<div id="finaldata"></div>
<script type="text/javascript" >
function Extra()
{
var callData = JSON.stringify({"serviceName":"global_functions", "methodName":"getAcces","parameters":[]});
$.post("http://www.test.com/webservice/?contentType=application/json", callData, function(data)
{
$.each(data, function( index, value)
{
$("#extra").append('<div style="border:2px solid red" id="'+index+'"><h3>'+value["name"]+'</h3><img width="200px" src="http://www.test.com/'+value["image"]+'"><select class="comboextra" selected="selected" id="test'+index+'">');
$.each(value["items"],function(index1,value1)
{
$("#test"+index).append('<option prix="'+value1["prix"]+'"cat="'+value1["cat"]+'" value= "'+value1["id"]+'" >"'+value1["name"]+'"</option>');
});
$("#extra").append('</select><label>Quantity</label><input type="number" name="q_extra1" value="0" id="q_extra1" class="quantiteextra" style="width:80px"></div><div class="alert alert-success icon-money"> valeur <span class="totalprix">0</span> </div>')
//alert("test");
});
});
}
$(document).on("change", ".comboextra", function ()
{
alert($(this).find(".comboextra option:selected").attr("prix"));
id = $(this).val();
prix = $("option:selected", this).attr("prix")
qte = $(".quantiteextra").val();
acccat = $("option:selected", this).attr("cat");
total = prix * qte;
acccat = ($(this).find(".comboextra option:selected").attr("cat"));
if (id != 0){$('#finaldata').find("[acccat="+acccat+"]").remove(); $("#finaldata").append('<input type="tex00t" acccat="'+acccat+'" id="acc'+id+'" name="acc['+id+']" value="'+qte+'">');} else {$('#finaldata').find("[acccat="+acccat+"]").remove();}
$(this).find(".totalprix").html(total);
});
</script>
<body>
</html>
You should bind the change event when you have updated your document. Try adding the binding after you print the selects:
function Extra()
{
var callData = JSON.stringify({"serviceName":"global_functions", "methodName":"getAcces","parameters":[]});
$.post("http://www.test.com/webservice/?contentType=application/json", callData,
function(data)
{
$.each(data, function( index, value)
{
$("#extra").append('<div style="border:2px solid red" id="'+index+'"><h3>'+value["name"]+'</h3><img width="200px" src="http://www.test.com/'+value["image"]+'"><select class="comboextra" selected="selected" id="test'+index+'">');
$.each(value["items"],function(index1,value1)
{
$("#test"+index).append('<option prix="'+value1["prix"]+'"cat="'+value1["cat"]+'" value= "'+value1["id"]+'" >"'+value1["name"]+'"</option>');
});
$("#extra").append('</select><label>Quantity</label><input type="number" name="q_extra1" value="0" id="q_extra1" class="quantiteextra" style="width:80px"></div><div class="alert alert-success icon-money"> valeur <span class="totalprix">0</span> </div>')
});
$(".comboextra").change(function()
{
alert("success");
});
});
}
Related
I'm trying to get the ImageUrl attribute from Uppy but can't bind it to input asp-for="ImageUrl" type="file" name="file" class="form-control" id="ImageUrl".
When I click on create button,my ImageUrl shows up null in controller method even though I selected a file via Uppy. How can I bind ImageUrl to Uppy and add the file to the folder I created (/tree/test file) ?
<head>
<meta charset="utf-8">
<meta name="viewport">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<link href="https://releases.transloadit.com/uppy/v3.1.1/uppy.min.css" rel="stylesheet">
<script src="https://releases.transloadit.com/uppy/v2.12.3/uppy.min.js" type="module"></script>
<script src="https://releases.transloadit.com/uppy/v2.12.3/uppy.legacy.min.js" type="nomodule"></script>
<script src="https://releases.transloadit.com/uppy/locales/v2.1.1/ru_RU.min.js"></script>
</head>
<body>
<form method="post" asp-action="create" id="form2" enctype="multipart/form-data">
<div class="form-group">
<label asp-for="ImageUrl">#localizer.GetLocalizedHtmlString("ImageUrl")</label>
<div id="drag-drop-area">
<input asp-for="ImageUrl" type="file" name="file" class="form-control" id="ImageUrl"/>
</div>
</div>
</br>
<button class="btn btn-primary" type="submit" style="visibility:visible">#localizer.GetLocalizedHtmlString("create")</button>
<a asp-controller="Banner" asp-action="index" class="btn btn-danger">#localizer.GetLocalizedHtmlString("cancel")</a>
</form>
<script>
window.addEventListener('DOMContentLoaded', function () {
'use strict';
var uppy = new Uppy.Core({
debug: true,
autoProceed: false,
locale: Uppy.locales.ru_RU
});
uppy.use(Uppy.Dashboard, {
inline: true,
target: '#drag-drop-area',
showProgressDetails: true,
height: 470,
browserBackButtonClose: false,
hideUploadButton: false
}).use(Uppy.XHRUpload, {
endpoint: '/wwwroot/images/tree/test',
formData: true,
fieldName: 'files[]',
});
uppy.use(Uppy.Form, {
target: 'form',
resultName: 'ImageUrl',
getMetaFromForm: true,
addResultToForm: true,
submitOnSuccess: true,
triggerUploadOnSubmit: true,
});
window.uppy = uppy;
});
</script>
</body>
public async Task Create(Command command,IFormFile? file)
{
string wwwRootPath = _hostEnvironment.WebRootPath;
if (file != null)
{
if (IsImage(file) == true)
{
string fileName = Guid.NewGuid().ToString();
var uploads = Path.Combine(wwwRootPath, #"images\banner");
var extension = Path.GetExtension(file.FileName);
if (command.ImageUrl != null)
{
var oldImagePath = Path.Combine(wwwRootPath, command.ImageUrl.TrimStart('\\'));
if (System.IO.File.Exists(oldImagePath))
{
System.IO.File.Delete(oldImagePath);
}
}
using (var fileStreams = new FileStream(Path.Combine(uploads, fileName + extension), FileMode.Create))
{
file.CopyTo(fileStreams);
}
command.ImageUrl = #"\images\banner\" + fileName + extension;
}
return View();
}
var viewModel = await _mediator.Send(command);
}
return View();
}
I am using jquery mobile and html5.
when i redirect from one page to another page , getting a white screen (flickering).
So how to get out of this problem.
Here is my code..
--Page1--
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="x-blackberry-defaultHoverEffect" content="false" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<link href="css/Global.css" rel="stylesheet" />
<script>
/*********Page bind evnet --start--********/
$(document).bind("pageinit", function () {
$("#login").unbind("click").click(function () {
Login();
});
});
/*********Page bind evnet --Ends--********/
var Type;
var Data;
var Url;
var DataType;
var ContentType;
var ProcessData;
var Method;
jQuery.support.cors = true
function Login() {
Type = "POST";
Url = "/login";
Data = '{}';
DataType = "JSON";
ContentType = "application/json; charset=UTF-8";
ProcessData = true;
CallLoginService();
}
function CallLoginService() {
$.ajax({
type: Type,
data: Data,
dataType: DataType,
processData: ProcessData,
url: Url,
contentType: ContentType,
crossDomain: true,
success: function (jsonObj) {
if (jsonObj.GetLoginResult[0].Status == "true") {
$(location).attr('href', 'City.html');
}
else if (jsonObj.GetLoginResult[0].Status == "Invalid username") {
ShowErrorMsg(jsonObj.GetLoginResult[0].Message, '#alertcontainer1');
}
else {
ShowErrorMsg(jsonObj.GetLoginResult[0].Message, '#alertcontainer1');
}
},
error: function (response) {
CheckNetwork();
}
});
</script>
</head>
<body>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header">
<p style="color:#13a5db;"> Login</p>
</div>
<div data-role="content">
<div id="alertcontainer1" >
<div data-role="controlgroup" data-type="horizontal">
<a data-role="button" id="login" data-theme="b">Login</a>
<a data-role="button" href="Registration.html" data-transition="slide" data-theme="b">Register</a>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<p> CopyRight ® 2013</p>
</div>
</div>
</body>
</html>
page2--(city.html) second page
<html>
<head>
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*********Page bind evnet --start--********/
$(document).bind("pageinit", function () {
//code
});
/*********Page bind evnet --Ends--********/
</head>
<body>
//code
</body>
</html>
At first thanks to all that read my question.
I'm quite new to jquery JQM and knockoutJS and have some problems with a dynamic generated html code.
So I have the following example: I start my app with startPage.html where i load all the scripts(jquery, jqm, knockout) and with a link i go to secondPage.html where i want to load a dynamically generated array of checkboxes.
Now the problem is that i get the checkboxes but i don't have the jqm style for them.
My Code looks like this:
startPage.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" `"http://www.w3.org/TR/html4/loose.dtd">`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>start Page</title>
<link href="jquery.mobile-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile.structure-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile.theme-1.3.0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="app/VM/WelcomeVM.js"></script>
<script type="text/javascript" charset="utf-8" src="app/VM/CheckboxVM.js"></script>
<script type="text/javascript">
//javascript code
var master = null;
var masterVM = function(){
var startVM = new welcomeVM();
var checkBoxHandler = new checkBoxVM();
return{
startVM:startVM,
checkBoxHandler:checkBoxHandler
}
}
$(document).ready(function(){
master = new masterVM();
ko.applyBindings(master);
});
$(document).bind("pageload",function(event,data){
ko.applyBindings(master);
});
</script>
</head>
<body>
<div data-role="page" id="home" data-theme="c">
<div data-role="content" id="content">
<div>
<a href="secondPage.html" data-role="button" >
</div>
</div>
</div>
</body>
</html>
My View Model for Knockout looks like this, here i generate the HTML code and fill the array of checkboxes:
var checkBoxVM = function() {
var cbArray = [ "One", "Two", "Three", "Four", "Five"];
var htmlexampleCB = ko.observable();
init();
function init() {
$.each(cbArray, function(index, item) {
var htmlCB = "<input type=\"checkbox\" name=\"exampleCB\" id=\""
+ item + "\" value=\"" + item + "\"> ";
var htmlLabel = "<label for=\""+item+"\">"+item+"</label>";
var html = htmlCB + htmlLabel + "<br />";
var all = "";
if (htmlCompanyCB() != null) {
all = htmlCompanyCB();
}
all = all + html;
htmlCompanyCB(all);
});
alert(htmlexampleCB());
};
return {
htmlexampleCB:htmlexampleCB
};
};
secondPage.html looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div data-role="page" id="gasPage">
<div data-role="content">
<!-- <div data-bind="html:companiesHandler.htmlexampleCB"> </div> -->
<script type="text/javascript">
$(document).ready(function(){
var newSet = '<fieldset data-role="controlgroup" class="cbGroup"></fieldset>';
$('.cbDiv').append(newSet);
var newBox = '<div data-bind="html:checkBoxHandler.htmlexampleCB">';
$(".cbGroup").append(newBox);
});
</script>
<div data-role ="fieldcontain" class="cbDiv">
<fieldset data-role="controlgroup" class="cbGroup">
</fieldset>
</div>
</div>
</div>
</body>
</html>
I tried several other solutions that i saw here but unfortunately non of them worked for me.
Could someone please give me a hint or tell me what i should do, i don't have any other ideas.
Thanks in advance and i hope that someone can help me.
This code after creating the checkboxes dynamically should do it,
$("input[type='checkbox']").checkboxradio("refresh");
Please check the following link to a similar question.
Dynamic controlgroup and checkboxes unstyled
I am setting a click handler for an anchor tag in jQuery mobile with via reference to the handler function inside the anchor tag (I need to do it this way for reasons that are cumbersome to get into). This approach works fine if I use a string or an integer as the function parameter but if I try to input an instance of an object (as illustrated below) it doesn't work. Any advice on what I may be doing wrong would be greatly appreciated.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
function testObject() {
this.param1;
}
function maketestObject(param1) {
var result = new testObject();
result.param1 = param1;
return result;
}
var i = 0;
var html;
for (i = 0; i <= 5; i = i + 1) {
var testInstance = maketestObject("test param");
html += '<li>click test1</li>';
}
$("#testList").append(html);
$("#testList").listview("refresh");
});
function clickHandler(e) {
alert(e);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content">
<ul id="testList" data-role="listview"></ul>
</div>
</div>
</body>
did you tryied with the .live() function
when you add dynamically elements to the dom they dont have events so I suggest you to
for (i = 0; i <= 5; i = i + 1) {
var testInstance = maketestObject("test param");
var temp = "'" + testInstance + "'";
html += '<li>click test1</li>';
}
/*** jQuery code ****/
$(".new").live("click",function(){
// your code here
aler("it working");
});
I usually do this when a button dont work for me hope that works for you!
i think it works
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
$(document).ready(function() {
function testObject() {
this.param1;
}
function maketestObject(param1) {
var result = new testObject();
result.param1 = param1;
return result;
}
var i = 0;
var html;
for (i = 0; i <= 5; i = i + 1) {
var testInstance = maketestObject("test param");
//var temp = "'" + testInstance+ "'";
/// Chaged into
var temp = "'" + testInstance.param1 + "'";
html += '<li>click test1</li>';
}
$("#testList").append(html);
$("#testList").listview("refresh");
});
function clickHandler(e) {
alert(e);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content">
<ul id="testList" data-role="listview"></ul>
</div>
</div>
I think you can achive your oal using this ..
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<script>
// Create global object array ..
var testInstanc = [];
$(document).ready(function() {
function testObject() {
this.param1;
}
function maketestObject(param1) {
var result = new testObject();
result.param1 = param1;
return result;
}
var i = 0;
var html;
for (i = 0; i <= 5; i = i + 1) {
// var temp = "'" + testInstance + "'";
// set array to object
testInstanc[i] = maketestObject("test param" + i);
pass clickhandler function to your array index
html += '<li>click test1</li>';
}
$("#testList").append(html);
$("#testList").listview("refresh");
});
function clickHandler(i) {
// access object attribute using testInstance array
alert(testInstanc[i].param1);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content">
<ul id="testList" data-role="listview"></ul>
</div>
</div>
</body>
</html>
I am working on creating a html page with three tabs, each one of which pulls data from three different html pages through jquery ajax. I am passing 2 parameters , method and mode ( to set read only or edit for all the html elements in the page ) while calling the ajax function.
The problem I have is, when i set the parameters with method=somemethod&mode=ro, the first renders the proper method and in readonly mode, whereas the second tab's html is rendered in edit mode. I debugged the page using firebug but couldnot find the actual problem. All the three tab htmls are all the similar, so i have no idea why this is happening. I have attached the code. Kindly help.
Main html/php page.
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<html>
<head>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<link type="text/css" href="./methodeditor.css" rel="stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function loadtabs() {
$( ".tabs" ).tabs({cache:false});
//$( ".tabs" ).tabs();
method = "<? echo $method; ?>";
mode = "<? echo $mode; ?>";
$.ajax({
type: "GET",
url: "oven.php",
data: "method=" +method+"&mode="+mode,
cache: false,
async: true,
success: function(data){
htdata = data;
$("#oven").html(data);
},
});
$.ajax({
type: "GET",
url: "detectors.php",
data: "method=" +method+"&mode="+mode,
async: true,
cache: false,
success: function(data1){
htdata = data1;
$("#detectors").html(data1);
},
});
$.ajax({
type: "GET",
url: "inlets.php",
data: "method=" +method+"&mode="+mode,
async: true,
cache: false,
success: function(data){
$("#inlets").html(data);
},
});
}
</script>
</head>
<body>
<form id="editor" action="method.php" method="POST" >
<div class="editor">
<div class="tabs">
<ul>
<li>Oven</li>
<li>Detectors</li>
<li>Inlets</li>
</ul>
<div id="oven" ></div>
<div id="detectors" ></div>
<div id="inlets"> </div>
</div>
<script>
loadtabs();
</script>
</form>
</div>
</body>
</html>
tab1 php
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Oven</title>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function togglestatus(val) {
if ( val == "ro" )
{
$('#elements :input').attr('disabled', true );
}
if ( val == "edit")
{
$('#elements :input').removeAttr('disabled');
}
}
function getvalues() {
//file = window.method;
file = "<? echo $method; ?>";
file = "./method/"+file;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmldoc = xmlhttp.responseXML;
etimenode = xmldoc.getElementsByTagName("method")[0].childNodes[1].childNodes[1];
etime = etimenode.textContent;
document.getElementById("etime").value = etime;
maxovtp = xmldoc.getElementsByTagName("method")[0].childNodes[1].childNodes[5].childNodes[0].data;
document.getElementById("maxovtp").value = maxovtp;
}
</script>
</head>
<body>
<div id="elements">
<input type="checkbox" id="oventemp" value="ON" />Oven Temperature<br />
Equilibrium time <input type="text" id="etime" /><br />
Maximum Oven Temperature <input type="text" id="maxovtp" /><br />
<script>
getvalues();
x = "<? echo $mode; ?>";
togglestatus(x);
</script>
</div>
</body>
</html>
tab2 php/html page
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Detectors</title>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function togglestatus(val) {
if ( val == "ro" )
{
$('#elements :input').attr('disabled', true );
}
if ( val == "edit")
{
$('#elements :input').removeAttr('disabled');
}
}
function getvalues() {
file = "<? echo $method; ?>";
file = "./method/"+file;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmldoc = xmlhttp.responseXML;
heater = xmldoc.getElementsByTagName("method")[0].childNodes[3].childNodes[1].childNodes[1].childNodes[0].data;
document.getElementById("heater").value = heater;
h2flow = xmldoc.getElementsByTagName("method")[0].childNodes[3].childNodes[1].childNodes[3].childNodes[0].data;
document.getElementById("h2flow").value = h2flow;
}
</script>
</head>
<body>
<div id="elements">
Heater Status <input type="checkbox" id="heaterstat" value="ON" /><br />
Heater <input type="text" id="heater" /><br />
H2 Flow <input type="text" id="h2flow" /><br />
<script>
getvalues();
x = "<? echo $mode; ?>";
togglestatus(x);
</script>
</div>
</body>
</html>
I figured out the solution by chance.
Both the tabs had elements wrapped under the same div called . So when toggle status was called , only the first div with id "element" was getting changed. I gave different names to the divs and solved the problem.