I wonder if anyone can help. I am using a script that autocompletes from a database, which is working fine apart from one issue I am wondering if someone maybe able to help me with.
When clicking on an autosuggestion it fills the textbox with the selection fine, but if you try to make another selection (by starting to type again), it doesnt fill the textbox with the new selection, it just retains the old selection.
Below is the code I have...
rtsearch.php (php removed to save space) that grabs the data to fill the html form & div:
<div class="display_box2" align="left">
<span class="name"><b><?php echo $country; ?></b>, <span class="bodyotxt"><?php echo $row['town']; ?></span></span>
</div>
<?php } } ?>
THE ACTUAL HTML FORM AUTOCOMPLETES:
<div><form action="<? $_SERVER['php self'];?>" method="post" enctype="multipart/form-data" name="form1" class="form" id="form1" autocomplete="off">
<input name="rt" type="text" class="search2" id="inputSearch2" value="" onclick="this.value='';" /></form>
<div id="divResult2"></div>
</div>
JQUERY:
$(document).ready(function(){
$(".search2").keyup(function()
{
var inputSearch2 = $(this).val();
var dataString = 'searchword='+ inputSearch2;
if(inputSearch2!='')
{
$.ajax({
type: "POST",
url: "autocomplete/rtsearch.php",
data: dataString,
cache: false,
success: function(html)
{
$("#divResult2").html(html).show();
}
});
}return false;
});
$("#divResult2, #divResult2 span").on("click",function(e){
//var $clicked = $(e.target);
if($(this).parent().attr("id")=="divResult2"){ var $clicked = $(this).parent(); }else{ var $clicked = $(e.currentTarget); }
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#inputSearch2').val(decoded);
});
$(document).on("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search2")){
$("#divResult2").fadeOut();
}
});
$('#inputSearch2').click(function(){
$("#divResult2").fadeIn();
});
});
I have gone through it and cannot seem to find the issue.
Thank you in advance to anyone who can shed some light on this
Have you tried using e.currentTarget instead of e.target ?
maybe as simple as:
jQuery("#divResult2, #divResult2 span").on("click",...
Related
I have a page where I'm displaying some information. You can select a option and the page will then display a form by loading the form using ajax response:
$("body").on("change", "#patient_id", function(event){
var prescription_id = $(this).val();
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var curr_data = {
action: 'refferedcall',
prescription_id: prescription_id,
dataType: 'json'
};
$.post(hmgt.ajax, curr_data, function(response) {
$('.prescription_content').html(response);
return true;
});
});
This works fine. But this view is a form. I want to then submit the included form with Ajax as well. But I can't seem to do it. I think it is because if I set up a button handler for the form it doesn't work as the form isn't present when the main page and JQuery script is loaded.
So to be clear, I'm loading this div onto my main page using JQuery and Ajax load. I then want to simply submit this form with Ajax also.
<div class="prescription_content">
<div class="title">Submit News</div>
<form role="form" id="ref_form" name="ref_form_p">
<div class="form-group">
<label for="pat_ref_hosp">Hospital to Refer:</label>
<input type="text" class="form-control" id="pat_ref_hosp" name="pat_ref_hosp" value="<?php if(!empty($result->reffer_hospital)){ echo $result->reffer_hospital; }?>">
</div>
<input type="hidden" class="form-control" id="pres_note" name="pres_note" value="<?php echo $result->priscription_id ;?>">
<button type="button" id="<?php echo $result->priscription_id ;?>" class="btn btn-success reffering_status">Refer Now</button>
</form>
</div>
TIA
Then I submitted form again using ajax through below button click event:
$("body").on("click", ".reffering_status", function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var prescription_id = $("#pres_note").val();
var pat_ref_hosp = $("#pat_ref_hosp").val();
var curr_data = {
action: 'reffering_status',
dataType: 'json',
prescription_id: prescription_id,
pat_ref_hosp : pat_ref_hosp,
};
console.log(curr_data);
)};
Here is log displaying
Object {action: "reffering_status", dataType: "json", prescription_id: "1", pat_ref_hosp: ""}
pat_ref_hosp is empty
I don't know how to display ajax in jsfiddle
https://jsfiddle.net/3ggq3Ldm/
Yes the way you are doing it will not work because the contents of the DIV you are loading-in is not loaded into the DOM when your initial
$("body").on("click", ".reffering_status", function(event){});
call is made.
If I am understanding you correctly, this is the behaviour you want to achieve:
$("#patient_id").on("change", function(event) {
var prescription_id = $(this).val();
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var curr_data = {
action: 'refferedcall',
prescription_id: prescription_id,
dataType: 'json'
};
$.post(hmgt.ajax, curr_data, function(response) {
$(".prescription_content").html(response);
$(".reffering_status").on("click", function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var prescription_id = $("#pres_note").val();
var pat_ref_hosp = $("#pat_ref_hosp").val();
var curr_data = {
action: 'reffering_status',
dataType: 'json',
prescription_id: prescription_id,
pat_ref_hosp : pat_ref_hosp
};
console.log(curr_data);
)};
return true;
});
});
You simply need to run the code that attaches your click listener AFTER the DOM has already been updated with the new information.
Please let me know if this code does what you were intending it to.
So I have this one weird situation which I am really confused now. I can't see any solution on the Net yet for this weird issue. I have one AJAX call that will populate the data which generated on the page also by using AJAX (dynamic). Here is my code:
My jQuery Code:
$(document).delegate('.edit_tr', 'click', function(){
var the_id = $(this).attr('id');
}).delegate('.edit_tr', 'keypress', function(e){
if(e.which == 13) {
var input_name = $("#input_name_" + the_id ).val();
if(input_name.length > 0){
//if I reset the span text and do return false here, the text showed properly on the page
$.ajax({
type: "POST",
url: "ajax_update.php",
data: data_string,
success: function(html){
//do the reset of span text
$('#name_'+the_id+'').html(input_name);
alert('Examining'); //while alert is popped up,text of span is expected as changed
//after 'OK' is clicked on the alert, the span text go back to its previous text
},
error: function(err){
//do something
}
});
}
}
});
Code in another PHP page which gets called via AJAX. This page displays the data on the page before being manipulated by above code for edit in place.
$returned_msg .= '<form id="form1">';
if( $contact_details->exists() ){
$lists = $contact_details->data();
foreach( $lists as $list ){
$returned_msg .= '<tr id = "'.$list->cont_detail_id.'" class="edit_tr">
<td style="text-align:center" class="edit_td">
<input type="hidden" value="'.$list->cont_detail_id.'" id="cont_detail_id_'.$list->cont_detail_id.'" />
<span id="name_'.$list->cont_detail_id.'" class="text_span">'.$list->det_name.'</span>
<input type="text" value="'.$list->det_name.'" style="width:120px;height:6px;" class="editbox" id="input_name_'.$list->cont_detail_id.'" />
<input type="hidden" value="'.$list->det_name.'" class="editbox" id="hidden_name_'.$list->cont_detail_id.'" />
</td>
</tr>';
}
$returned_msg .= '</form>';
}
class editbox is not displayed till the tr is clicked. I am now totally baffled. Looking forward to get some thought on what could probably causing this. Thank you.
I have a form with a search suggestion that appears as the user types in the input. Now this search suggestion is clickable, where users are able to click on a particular item. when that item it clicks it take them to something like searchPage.php?user_query=the text of the item that was click (i.e. searchPage.php?user_query=html).
What I notice is that if the search suggestion item has a special character known as ASCII ISO 8859-1 Characters it will disregard it, and hence the result would be searchPage.php?user_query=
Under no circumstances can it be blank because its bad design if you click on a item and then it populates you the entire list.
Below is the search suggestion js:
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
window.open('searchPage.php?user_query=' + decoded,'_self',false);
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
Below is the form:
<form method="get" action="searchPage.php" enctype="multipart/form-data" autocomplete="off">
<input type="text" class="search" id="searchid" name="user_query" id="searchBar" placeholder="Search for courses" />
<input type="submit" id="searchButton" name="search" value="search" class="btn btn-danger" autocomplete="off"/>
<div id="result"></div>
</form>
First, as commented by GolezTrol, I would use UTF8 everywhere: it is the recommendend most reliable way to avoid any issue like yours.
Then, in the particular case you have here, you may try to replace
var decoded = $("<div/>").html($name).text();
by
var decoded = encodeURIComponent($("<div/>").html($name).text());
(not absolutely sure it works fine...)
I have the following form:
<form id='confirm_reset' action='login/forgotPassword_action' method='post'>
<input type='hidden' name='user_email' value='user_email'>
Submit
</form>
<div id="alert_box_register"></div>
I am trying to submit this with Ajax to return JSON in the alert box:
$("#confirm_reset").on("submit", function(event) {
//disable default click operation
event.preventDefault();
var action_url = $(this).attr("action");
alert_box_register("Resetting password...");
console.log(action_url);
var postData = $(this).serializeArray();
console.log(postData);
$.post(action_url, postData, function(data) {
console.log(data);
var obj = $.parseJSON(data);
alert_box_register(obj.message);
});
});
This script returns no result (as if the link did not function). Where am I going wrong?
Not sure if this code is still a problem for you or not...?
A quick note about out your progress messages ("Resetting password..."): this code will probably run so fast that this message will just barely flash on the screen for the user. I don't know how your stuff is set up but you may never see this on the screen.
<!-- The following line was missing .php from the action -->
<!--form id='confirm_reset' action='login/forgotPassword_action' method='post'-->
<form id='confirm_reset' action='login/forgotPassword_action.php' method='post'>
<input name="txtbox" type="text" value="hello world"/>
<input type='hidden' name='user_email' value='user_email'>
<!-- submit_confirm_reset() is a function I made in the javascript tages-->
Submit
</form>
<div id="alert_box_register"></div>
<script>
function submit_confirm_reset() {
$("#confirm_reset").submit();
}
$("#confirm_reset").on("submit", function(event)
{
console.log('("#confirm_reset").on("submit", function(event)');
//disable default click operation
event.preventDefault();
var action_url = $(this).attr("action");
// you were using alert_box_register like it was a function
// but it doesn't exist in the code you posted in your question
// but a DOM element has this name so I assume you meant that
$("#alert_box_register").html("Resetting password...");
console.log(action_url);
var postData = $(this).serializeArray();
console.log(postData);
$.post(action_url, postData, function(data) {
console.log(data);
// if this response is already json, you don't need to parse it
var obj = $.parseJSON(data);
$("#alert_box_register").html(obj.message);
});
});
</script>
I'm trying to highlight the text that matches the query in a live search using jquery.highlight. The live search works fine but the styling for the highlighting applies then it disappears. Am I doing something wrong?
JQuery
$(document).ready(function() {
$("#search").bind("keyup", function() {
var form = $(this).parents("form");
var query = $(this).val();
var formData = form.serialize();
$.post("/questions/new/search", formData, function(html) {
$("#questionList").html(html);
});
$(".question").highlight(query);
});
});
HTML
<form action="/questions" method="get">
<input id="search" name="search" type="text" />
</form>
<div id="questionList">
<div class="question">What is the 1 + 1?</div>
<div class="answers">2</div>
</div>
Yes, you should execute $(".question").highlight(query) in the http request response handler right after $("#questionList").html(html) this way:
$(document).ready(function() {
$("#search").bind("keyup", function() {
var form = $(this).parents("form");
var query = $(this).val();
var formData = form.serialize();
$.post("/questions/new/search", formData, function(html) {
$("#questionList").html(html);
$(".question").highlight(query);
});
});
});