Response title
This is preview!
Move this topic
Select box in jquery mobile not showing proper selected value but giving proper value.
in jQuery Mobile
•
3 months ago
Hi all,
In my webpage I am creating select box dynamically by providing functionality of add button which will add row. The data binding to select box from web service is proper. But when I select particular value from select box then it is not showing the selected value in select box and surprisingly I can get actual selected value when I call $("selectid").val() function.
Please help me to solve this issue.
1
Replies(20)
please try to make a simple sample.... in jsfiddle.
Leave a comment on John Chacko's reply
I have seen that demo but I am unable to solve that issue....
Is there any other way????
what demo you are talking about?
I need to ask a lot of question to understand the issue here...
1.How are you creating selectbox dynamically... can you post the markup which you are using for that.
2.What you meant providing functionality of add button which will add row? adding row where?
Leave a comment on Atik_J's reply
I am talking about this demo.
Above is snapshot of my screen.
Below code is to append value from json response.
$('#selLocation1').append("<option>"+jarrLocation[i].LocationName+"</option>").selectmenu("refresh");
The functionality is as follows:
By looking screen it is clear that there will be single row by default.
When we click add button the clone of previous row will get created in the next line.
Hence we can create multiple rows.
But the problem is the select boxes are showing proper option values I am able to retrieve it but it is not showing selected value in combo box.....
Have u understood the concept?
I can see a row with selectbox(location) and 3 button(service,add Admin,Delete)
Assume you are adding a new row onclick of button 'Add' bottom row (Location,Conenction,Addd,Save)
Assume you are adding a new row onclick of button 'Add' bottom row (Location,Conenction,Addd,Save)
You mentioned abt cloning... r u sure it is not creating duplicate ID's, say 'selLocation1'
Leave a comment on Atik_J's reply
Ya I have make sure that after adding new row each control will have unique id e.g. selLocation1,selLocation2,selLocation3 and so on.
I have used logic as below:
$tr.find("input").attr("name", function(){
var parts = this.id.match(/(\D+)(\d+)$/);
return parts[1] + ++parts[2];
}).attr("id", function(){
var parts = this.id.match(/(\D+)(\d+)$/);
return parts[1] + ++parts[2];
});
Yes I am adding row on bottom "Add" Button.
Sorry, me a fool.. I cannt understand below code...
- $tr.find("input").attr("name", function(){var parts = this.id.match(/(\D+)(\d+)$/);return parts[1] + ++parts[2];}).attr("id", function(){var parts = this.id.match(/(\D+)(\d+)$/);return parts[1] + ++parts[2];});
I don't think its a nice idea to change id's runtime... it may work. but I can search and see issues reported abt it in some browsers.....
Normal dynamic selectbox or adding options to them all work fine.
Its something wrong with the way you clone rows and changing id's
unless you make a standalone sample its hard to help.....
Leave a comment on Atik_J's reply
The above code is working as follows:
1.It will first take previous element name and id
e.g. selLocation1
2.Then it will seperate into two parts i.e. selLocation and 1(integer number present at last)
3.Then it will send new name,id by incrementing the last digit and attaching to string.
i.e. selLocation2--------------> (selLocation)+(1+1)=selLocation2
(selLocation)+(2+1)=selLocation3
and so on.
:( you are not still getting my point...
I can't figure out whats issue here with out asking more questions...
99% sure that there is something wrong in cloning and changing id's....
your code is just complicated...
Are you always making sure you clone the last item.
Are you able to do inspect element and verify that id and name is really changed...
Why you cann't change id/name even before appending?
Edit:
you can even keep that row markup as a template and keep inside a hidden div with name/id suffixed with _xxxx and get html of that div and replace _xxxx with new suffix and append to table...
Leave a comment on Atik_J's reply
I have checked that cloning part.It is giving me proper result.
And also I have checked the id's of every element by alerting the id.
I have inspected the id's for every control.
I do make sure that every time I clone the last item only and append the clone to it after creating new id's i.e. initialization of the control(e.g.button).
can you please paste ur clone logic....
Edit:
assume you are using 'Custom select menus' (nativeMenu = false)
will there by atleast one row by default.... ?
Edit:
assume you are using 'Custom select menus' (nativeMenu = false)
Leave a comment on Atik_J's reply
Yes by default there is single row present.
var $tr = $("#tblLocation").find("tbody tr:last").clone(); // create clone of last row from table
//Assign new id's & names to clone
$tr.find("input").attr("name", function(){
var parts = this.id.match(/(\D+)(\d+)$/);
return parts[1] + ++parts[2];
}).attr("id", function(){
var parts = this.id.match(/(\D+)(\d+)$/);
return parts[1] + ++parts[2];
});
$tr.find("[id^='selLocation']").attr("name", function(){
var parts = this.id.match(/(\D+)(\d+)$/);
//alert(parts[1] + ++parts[2]);
return parts[1] + ++parts[2];
}).attr("id", function(){
var parts = this.id.match(/(\D+)(\d+)$/);
//alert(parts[1] + ++parts[2]);
return parts[1] + ++parts[2];
});
$tr.find("[id^='lblStationNum']").attr("name", function(){
var parts = this.id.match(/(\D+)(\d+)$/);
return parts[1] + ++parts[2];
}).attr("id", function(){
var parts = this.id.match(/(\D+)(\d+)$/);
return parts[1] + ++parts[2];
});
$("#tblLocation").find("tbody tr:last").after($tr); //Append the row to last row of table
I tried a simple sample of what you are trying...which ended in error..
$tr.find("[id^='selLocation']")
returns 2 items?
JQM adds/wraps new elements to enhance your initial markup.
In this scenario its not wise to do changing id's
I suggest you to modify above sample and make it working till cloning/renaming id's and appending it...
Leave a comment on Atik_J's reply
did u noticed that
$tr.find("[id^='selLocation']")
------->
I am not getting how it returns 2 items.
I am not getting how to proceed further.
But I will say thanks for your help.
Let's see what will happened?
this is what I'm trying to explain from begining.. unless you provide proper details I will end up asking more questions to figure out the issue...
are using 'Custom select menus' (nativeMenu = false)??
Please take a copy of above jsfiddle and it can run in ur local...
put an alert
alert($tr.find("[id^='selLocation']").length)
or right click inspect element and see select markup is changed..
Leave a comment on Atik_J's reply
No I am not using Custom select menus.
I will check it by the way suggested by you and let u know.
Leave a comment on Atik_J's reply
Cloning an element containing an id is asking for trouble. Remove the id before you clone it.
Having two instances of the same ID in a document is invalid, and results are not consistent across browsers. No standard defines what should happen if an ID appears more than once.
There is no guarantee that the browser will be able to even find the ID to replace it, or even if it does, which one it will find. Thus, you cannot clone the element and then change the ID!
Given multiple instances of an ID in a document, any given browser might do the following when calling getElementByID():
- find the first such element
- find the last such element
- find a random matching element
- find no elements
- some combination of the above, on subsequent calls
It's an illogical condition, and each browser's authors have had to decide how to make the best of a bad situation when it happens. Which of the above is the most benign response?
Having two instances of the same ID in a document is invalid, and results are not consistent across browsers. No standard defines what should happen if an ID appears more than once.
There is no guarantee that the browser will be able to even find the ID to replace it, or even if it does, which one it will find. Thus, you cannot clone the element and then change the ID!
Given multiple instances of an ID in a document, any given browser might do the following when calling getElementByID():
- find the first such element
- find the last such element
- find a random matching element
- find no elements
- some combination of the above, on subsequent calls
It's an illogical condition, and each browser's authors have had to decide how to make the best of a bad situation when it happens. Which of the above is the most benign response?
Leave a comment on watusiware's reply
Hello Every one !!!!!!
Got Solutions for above problem and understood what was that issue.
Below link is the explanation of that issue.
We can not clone the expandables form element such as Selectbox,Listview etc. because in the current version of jquery mobile this is not possible.
In the above link they have also provided what will be the alternative of that.
So below is the link of that demo.
Thanks everyone for your help.
Leave a comment on Atik_J's reply
Hello John,
I have changed the way of implementation.
I have not used clone function instead I have created whole row dynamically.
Thanks for your help.
IMO
its not cloning the main issue..but changing id's / name is the key issue here....
Leave a comment on Atik_J's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Atik_J's question
{"z7664639":[14737000003915742],"z2070601":[14737000003915506,14737000003915516,14737000003915532,14737000003915542,14737000003915548,14737000003915588,14737000003915640,14737000003915644,14737000003929049],"z23586027":[14737000003913569,14737000003913598,14737000003913614,14737000003913620,14737000003913624,14737000003913626,14737000003913636,14737000003913652,14737000003913698,14737000003930029,14737000003930031]}
Statistics
- 20 Replies
- 1047 Views
- 0 Followers
