I want to pass the id into a string but always I get an error
var c = document.getElementById("predefinedMessage");
var id= c.selectedIndex;
var text= "{{ form.predefinedMessage.vars.choices[id].data.message }}";
$('message').val(text);
});
how I can pass the id in the text variable
If the element that you're selecting is a drop down list, I suggest the following code using jQuery as you're already using it:
// Select by the ID predefinedMessage
var dropDown = $("select#predefinedMessage");
// Get the selected index from the dropdown
var selectedIndex = dropDown.find("option:selected").index();
var text = "{{ form.predefinedMessage.vars.choices[" + selectedIndex + "].data.message }}";
$('message').val(text);
Related
I am writing an ajax live search feature into my software. There are multiple input that need to be ajax searchable on each form. Everything works great except I want the list of results to be displayed in a hovering "p" element right below the input I am currently searching in. Right now I have a "p" with class = "options" right below each input to display the results. When I type, the results are displayed in EVERY "p", that is, hovering under every input. Is there a way to reference just the child of the current input or do I need to use a separate function explicitly referencing the desired for each input? I've tried a lot of child selector options on the internet and none of them have worked. The code is below. Thank you for your advice.
$(document).ready(function() {
//sets the chosen value into the input
$( ".options").on( "click", function(event) {
var item = $(event.target).text();
$('#acctname').val(item);//place chosed result into the acctname input
$('.options').hide();//hide result options after click
});
//On pressing a key in input field, this function will be called.
$(".textinput").keyup(function() {
var id = $(this).attr("id");
var val = $(this).val();
if (val === '') { //Validating, if "name" is empty.
$('div > p').html('').show();
}else {//If input is not empty.
$.ajax({
type: "POST",
url: "../model/ajax/livesearch.php",
data: {id: id, val: val},
success: function(html) {//place the result into the p element and set the proper css
$('div > p').html(html).show().css({"position":"absolute","z-index":"+1","cursor":"pointer","color":"black","background-color":"white"});
}
});
}
});
});
Update: this is how my HTML forms are structured.
<form action= "../model/dataentry.php?formname=enter_deposit" method="POST" id="ajaxform" name="ajaxform">
<div class = "label"><p1>Revenue Account Name</p1></div><div class = "field"><input class = "textinput" type="input" name="acctname" id="acctname" value = "" autocomplete="off">
<p class = "options"></p></div>
<div class = "label"><p1>Revenue Account Number</p1></div><div class = "field"><input class = "textinput" type="input" name="acctno" id="acctno" value = "" autocomplete="off">
<p class = "options"></p></div>
<input class = "submit" name = "Submit" type = "button" id = "ajaxsubmit" value = "Submit" >
<input class = "submit" name = "Close" type = "button" id = "close" value = "Close" >
</div>
</form>
Is this what you are looking for?
https://jqueryui.com/autocomplete/
I found a solution to the issue in case anyone is curious. By assigning each div with class "option" an id equal to its parent's id plus "_opt" (i.e. "acctname" input would have a child div with id "acctname_opt"), I can edit div ids dynamically in my functions to place the result list where I want it. Here is my new javascript code. Works flawlessly. Thanks for your help, everyone.
$(document).ready(function() {
//sets the chosen value into the input
$( ".options").on( "click", function(event) {
var item = $(event.target).text();
var clickedid = $(this).attr('id');
var targetid = clickedid.split('_'); //remove the '_opt' suffice to get the target id
$('#' + targetid).val(item);//place chosed result into the acctname input
$('.options').hide();//hide result options after click
});
//On pressing a key in input field, this function will be called.
$(".textinput").keyup(function() {
var id = $(this).attr("id");
var optid = id + '_opt'; //set the target element id
var val = $(this).val();
if (val === '') { //Validating, if "name" is empty.
$('#' + optid).html('').show();
}else {//If input is not empty.
$.ajax({
type: "POST",
url: "../model/ajax/livesearch.php",
data: {id: id, val: val},
success: function(html) {//place the result into the p element and set the proper css
$('#' + optid).html(html).show().css({"position":"absolute","z-index":"+1","cursor":"pointer","color":"black","background-color":"white"});
}
});
}
});
});
In my jquery mobile app, when I click a list element, I get the id of that element. Now I want to pass that id to another page so I can make a query to the database. What would be the best way to achieve this? I tried with a form to post the id, but I don't want a form with a submit button on the page. I also tried using sessionStorage, but I am unsure how to use it properly. Presently, when I click a list element, an alert shows me the id of that selected list element.
<script>
$(document).ready(function(){
$("li").click(function() {
var journeyID = this.id;
sessionStorage.journeyId = journeyID;
alert(sessionStorage.journeyId);
var j = getElementById(journeyDetailsForm);
j.innerHTML = journeyID;
//document.forms["journeyForm"].submit();
});
});
</script>
If you know the url of the page
$("li").on("click",function(){
var url = "example.com/page.php",
id = this.id;
window.location= url + "?id=" + id;
});
I have a form that does a lookup on a database the lookup is done using load(). This is fine.
What I've like to do is to read the value of an input which is returned via the php.
I was thinking that I needed to use the .live() method but I'm not certain how.
My current code is:
var recordCount = $("input[name=noOfCusts]").val();
console.log("Number is " + recordCount)
So input[name=noOfCusts] is loaded from PHP so I can't get at it. I just get a value of undefined.
How do I roll live() into var recordCount = $("input[name=noOfCusts]").val();
Thanks
My load code is
$("input[name=findCust]").keyup(function(){
var key = $(this).val();
var type = 1;
$("div#CustomerResults").html("<img src='../images/loading.gif' alt='loading'/>").delay('500').load("../../ajax/customerFinder.php",{"key":key,"type":type}).fadeIn(300);
//#############################################
// Extra bit to make the search form work with a return
$("input[name=findCust]").live('keyup',function(){
var recordCount = $("input[name=noOfCusts]").val();
console.log("Number is " + recordCount)
});
//var recordCount = $("input[name=noOfCusts]").find("input[name=noOfCusts]").val();
//
//$('input[name="noOfCusts"]').val(data);
//console.log("Number is " + data)
//#############################################
});
Instead of returning an HTML input tag, return just the value for that input that is already present within HTML DOM.
Then in load call on success set the obtained value to that input:
// success
$('input[name="noOfCusts"]').val(data);
alert(data);
i m creating a combo box which gets value from mysql database table.
here is a sample code which i m implementing but it will not populates selectbox values.
mydata +='<div class="content nodisplay"><div class="row"><div class="label" style="font-size:22px;">Subject</div><div class="data">
<select id="fillsubject" name="fillsubject">';
$.post(document.URL,qstring,function(data){
var subjects = $(data).filter('.subjects');
$.each(subjects,function(index,value){
var subid = $(this).attr('id');
var subname = $(this).text();
mydata += "<option value='"+subid+"'>"+subname+"</option>";
//mydata += "<option value='english'>english</option>";
});
});
mydata +='</select></div></div></div>';
var mydata +='<div class="content nodisplay"><div class="row"><div class="label" style="font-size:22px;">Subject</div><div class="data"><select id="fillsubject" name="fillsubject"></select></div></div></div>';
$.post(document.URL,qstring,function(data){
var subjects = $(data).filter('.subjects');
var subopts = '';
$.each(subjects,function(index,value){
var subid = $(this).attr('id');
var subname = $(this).text();
subopts += "<option value='"+subid+"'>"+subname+"</option>";
});
//after the loop is over building your <options/> inject the html
$('#fillsubject').html(subopts);
});
You are splitting the <select></select> that's not necessary. You can do it as above.
How does the code sample fit into the rest of your source code?
Rather than using
mydata += "<option value='"+subid+"'>"+subname+"</option>";
in your .each function, you would be better off using
$("#fillsubject").append("<option value='"+subid+"'>"+subname+"</option>");
I don't know what you're doing with mydata after the code sample you post, but since .post is asynchronous, mydata may have already been displayed to the user when your js gets the reply from your server. If this is the case, then the suggestion above will work as expected.
I'm new to jQuery and PHP.
I'm developing a web page to display a set of records taken from a database. Here I have used PHP and jQuery.
I need to display a set of records as a table. Data is retrieved from a MySQL database using php. Set of rows is passed to the html page as a string using json_encode().
The problem is that I can't display those data in a table row by row. I'm using a table created with <div>. So I need to know how to display this string of data row by row and separating the value for each column.
Here is what I have done to display only one row, but the data is not displayed as a table. No compile error either. I need help to extend this to display multiple rows too.
demo.html (page I'm going to display the records):
<div class="table">
<div class="headRow">
<div class="cell">ID</div>
<div class="cell">First Name</div>
<div class="cell">Last Name</div>
<div class="cell">Age</div>
<div class="cell">Class</div>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: 'beta.php' ,
data:"",
dataType: 'json',
success:function(data){
var elementArray = new Array(); //creating the array
elementArray = data.split(""); //splitting the string which was passed using json_encode()
var id = elementArray[0]; //passing values corresponding to the columns
var fname = elementArray[1];
var lname = elementArray[2];
var age = elementArray[3];
var grade = elementArray[4];
$("<div>", { //creating a new div element and assiging the value and appending it to the column 1
"class":"cell",
"text":id
})
.appendTo("document.body");
$("<div>", { //cloumn 2 value
"class":"cell",
"text":fnam
})
.appendTo("document.body");
$("<div>", { //cloumn 3 value
"class":"cell",
"text":lname
})
.appendTo("document.body");
$("<div>", { //cloumn 4 value
"class":"cell",
"text":age
})
.appendTo("document.body");
$("<div>", { //cloumn 5 value
"class":"cell",
"text":grade
})
.appendTo("document.body");
}
});
});
</script>
</div>
</div>
demo.php (retrieving data from the database):
$result = mysql_query("SELECT * FROM student WHERE StuId=1",$con) or die (mysql_error());
$resultArray = mysql_fetch_row($result);
echo json_encode($value);
If someone can help me it would be a great.
try this one....
var id = elementArray[0];
var fname = elementArray[1];
var lname = elementArray[2];
var age = elementArray[3];
var grade = elementArray[4];
then create table using these values something like this....
$("<table>").appendTo("document.body");
$("table").html("<tr><td>"+id +"</td><td>"+fname +"</td><td>"+lname +"</td><td>"+age +"</td><td>"+grade +"</td></tr>);
Here is a Jfiddle, if you use .html and append to a empty table on your page you can append the var contents returned from your ajax query just the same
http://jsfiddle.net/L4G79/1/
this your code will look something like
var id = elementArray[0]; //passing values corresponding to the columns
var fname = elementArray[1];
var lname = elementArray[2];
var age = elementArray[3];
var grade = elementArray[4];
$("table").html("<tr><td>"+id +"</td><td>"+fname +"</td><td>"+lname +"</td><td>"+age +"</td><td>"+grade +"</td></tr>");