jQuery UI autocomplete after AJAX <select> - javascript

im having a problem after i select one option
<select name="opcoes" onchange="showInfo(this.value)">
<option value="1">one</option>
<option value="2">two</option>
</select>
I send a option value through this
function showInfo(str)
{
if (str=="")
{
document.getElementById("fields").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("fields").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/php/search/getRow.php?id="+str,true);
xmlhttp.send();
}
That gives my getRow.php the ID to show from the Database a table with inputs so a person can change their values, now i have two fields that need jQuery-UI autocomplete so i have this javascript but its not working.
This is the generated code from the getRow.php
<input type="text" name="editname" id="namesearch" value="one">
<input type="text" name="editname" id="modelsearch" value="wfmq015">
This is my autocomplete...
$(function() {
//autocomplete
$("#namesearch").autocomplete({
source: "/js/namer.php",
minLength: 0
});
$("#modelsearch").autocomplete({
source: "/js/modeler.php",
minLength: 1
});
});
I think my problem is that the javascript is notcatching the id's in time since it was an ajax request... can anyone help me out?
The Javascript's are placed in the main page that calls the ajax to get some more elements into it...

Yikes. Looks like you wrote your own AJAX call. Let's use jQuery for this instead. Save yourself some major headache
function showInfo(str) {
$.get("/php/search/getRow.php?id=" + str, function(html) {
$("#fields").html(html);
});
}
Now, to your second question, the problem is you're using the AJAX to load your fields but are instantiating the autocomplete when the page is loaded. So I would put those into a function and add that to your AJAX callback
function loadAuto() {
$("#namesearch").autocomplete({
source: "/js/namer.php",
minLength: 0
});
$("#modelsearch").autocomplete({
source: "/js/modeler.php",
minLength: 1
});
}
function showInfo(str) {
$.get("/php/search/getRow.php?id=" + str, function(html) {
$("#fields").html(html);
loadAuto();
});
}

Related

Simple php to Codeigniter

i am developing my final year project on codeigniter and facing problem i want to click a drop-down value and then it will return table from db but alas i can't do
this is plain php code that i want to convert into codeigniter please help me
thanks in advance.
<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
You need to separate the code in Controller, View and Model:
Model for DDBB operations.
Controller: control where the data goes and how it can be displayed, and other logic.
View, here is where the form is rendered.
Codeigniter has a great documentation to learn how to do it.
Controllers
Views
Models has the same url, but for models, i've not reputation enough to post 3 links, sorry
You can do like this
$(document).on("change","#select",function(){
$.ajax({
url:""// path to your controller function. here keep all the code which is present in your getuser.php in to a function in controller
data:{"key":value,"key":value}
dataType:"HTML",
success:function(data){
$("#txtHint").html(data)// this you can do 2 things, either manipulate all your data in controller
//and directly change the html of the div, or u can get the required data
}
})
});

How to properly validate a form that resides on a file called via AJAX

I'm having a problem validating a field in a form with a Submit button when the form is sitting on a php file that uses AJAX to pull in up on the current main page.
Here's a fiddle of the validation code and the simple form not using AJAX:
http://jsfiddle.net/mwrfW/
That simple example works fine.
Now if I leave the JS in index.php but put the form on ajax_form.php I get a problem:
On index.php:
<script>
$(document).ready(function () {
$("#contactform").validate({
rules: {
name: {
required: true,
minlength: 3
},
},
submitHandler: function () {
alert('valid form submission');
return false;
}
});
});
</script>
On ajax_form.php (where I echo out the html):
echo '<form id="contactform">
A:<input id="name" type="text" name="name" />
<br/>
<input id="btn" type="submit" />
</form>';
So with that two file setup, validation isn't triggering.
Interestingly, if I bring the Submit button over to index.php and ditch the submitHandler it works as long as I add a little extra code to make the submit button work outside of the form: for example: on index.php:
$(document).ready(function() {
$("#contactform").validate({
name: {
required: true,
minlength: 3
},
})
$('#btn').click(function() {
$("#contactform").valid();
});
});
<input id="btn" type="submit" />
On ajax_form.php (where I echo out just the field's html):
echo '<form id="contactform">
<input id="name" type="text" name="name" />
</form>';
So here's the overall question:
What is the proper way to have the validation js on the index page, while the form/field/submitbutton all reside on the ajax_form.php?
I'm not sure if I'm using the submitHandler correctly or not with this setup.
Just in case it's needed, here's the AJAX code that's calling ajax_form.php (fyi, the form always pulls up fine with this, so I don't think there's a problem with this part of the code):
//Edit Case
function editCase(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_form.php?q="+str,true);
xmlhttp.send();
$(document).ready(function(){
$('.overlay').show();
$('.button').show();
});
}
The form element must be loaded in the DOM before the jQuery validate function can be attached to it. So I expect I'd either move the form to the index.php file and hide it until needed, or move the jQuery validation code to the editCase function, or put the jQ validation code in a function and attach that function to the form in the editCase function.
Here's an example of the last option:
function contactform_validation() {
$("#contactform").validate({
rules: {
name: {
required: true,
minlength: 3
},
},
submitHandler: function () {
alert('valid form submission');
form.submit();
},
invalidHandler: function () {
alert('INvalid form submission');
return false;
}
});
}
function editCase(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
contactform_validation(); // <--- THIS IS NEW
}
}
xmlhttp.open("GET","ajax_form.php?q="+str,true);
xmlhttp.send();
$(document).ready(function(){
$('.overlay').show();
$('.button').show();
});
}
You are using JQuery, so you can use load() function like this:
$('#txtHint').load("ajax_form.php?q="+str , null, function (){
//and here in your callback function, you can attach all behaviors to your form, for example:
$("#contactform").validate({
name: {
required: true,
minlength: 3
},
})
$('#btn').click(function() {
$("#contactform").valid();
});
});

Jquery mobile listview formated text not working through php

I have the following function in Javascript.
function showInfo(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","information.php?q="+str,true);
xmlhttp.send();
}
I have created a select so that once something is chosen it will display a list.
<ul>
<li><select name="days" id="days" onchange="showInfo(this.value)" data-native-menu="false">
<option value=""> select </option>
<option value="1"> option 1 </option>
<option value="2"> option 2 </option>
</select></li>
</ul>
The information.php takes the value and querys a database to get the infor I want in a list. This all works fine, however when I want to show the list it comes out with the incorrect format.
echo '
<ul data-role="listview">
<li>
<h3>Author:'.$the_author.'</h3>
<p><b>Description:</b>'.$description.'</p>
<p class="ui-li-aside">Last update:'.$date.'</p>
</li>
//Etc.
</ul>
';
Now the list displayed should be simillar to the one from jquery mobile demos (http://demos.jquerymobile.com/1.0.1/docs/lists/lists-formatting.html)
however it comes out looking like a standard html list.
Because you are dynamically creating the <UL> element and not just the listitems, you need to call enhanceWithin() (http://api.jquerymobile.com/enhanceWithin/) on txtHint after setting its HTML
Instead of this:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
Try
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
$('#txtHint').append(xmlhttp.responseText).enhanceWithin();
}
}
Here is a working DEMO with a mock AJAX call

Ajax script calls php script twice

I use ajax on my html page to load data from MySql db w.o. reload and send email notification on some event, after selecting on html page - ajax calls script.php that made request to db and return result, it works perfect; and in same time I use function that shows and hides ajax loader image until query is executed, but it calls my php script twice so that each time it sends email twice
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js"></script>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../getuser.php?q="+str,true);
xmlhttp.send();
}
// ajax loader image
function getuser(str){
$.ajax({
url: "http://site.com/getuser.php?q="+str,
beforeSend: function (XMLHttpRequest)
{
$("#loading").show();
}
})
.done(function ( data ) {
$("#txtHint").html(data);
$("#loading").hide();
});
}
$(document).ready(function(){
$("select[name='users']").change(function () {
getuser($("option:selected", this).val());
});
});
</script>
how to improve this code to call php script just one time?
HTML
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a user:</option>
<option value="1">User1</option>
<option value="2">User2</option>
</select>
</form>
<div style="display:none" id="loading">
<p><img src="../loader.gif" /></p>
</div>
<br>
<div id="txtHint"><b>User info will be listed here.</b></div>
remove onchange event from:
<select name="users" onchange="showUser(this.value)">
What are you using showUser for? This seems to be enough;
function getuser(str) {
$.ajax({
url: "/getuser.php?q=" + str, // No need to include the domain here
beforeSend: function (jqXHR) {
$("#loading").show();
}
}).done(function(data) {
$("#txtHint").html(data);
$("#loading").hide();
});
}
$(document).ready(function() {
$("select[name='users']").change(function() {
getuser($(this).val());
});
});

Call javascript function on maxlength of textfield

I am looking for a script that calls for a JavaScript function automatically when reaching the maxlength of a text field.
I tried to modify this piece of Script which I found here ajax call after x characters
$("input#zipcode").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
if(!$(this).data('triggered')) {
// set the 'triggered' data attribute to true
$(this).data('triggered',true);
if ($(this).valid() == true ) { loadXMLDoc(); }
}
} else { $(this).data('triggered',false); }
});
This is the part of code containing the loadXMLDoc part:
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
document.getElementById("state_insert").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","state_insert.asp?zipcode="+document.getElementById('zipcode').value,true);
xmlhttp.send();
}
When the maxlength is reached, I want it to call for a "LoadXMLDoc" function which requires no additional parameters to be passed on.
At the moment I have it set to onblur="LoadXMLDoc()"
Like this:
[input name='zipcode' type='text' class="form_elements" id='zipcode' tabindex='11' autocomplete='off' onchange="this.value=extractNumeric(this.value)" onkeypress="return isNumericKey(event)" value='' size="4" maxlength="5" onblur="loadXMLDoc()" /]
I used the [ and ] because < and > are not allowed.
in the text field properties, but I would like that it loads as soon as the 5 digits of the Zip Code have been entered.
Thanks in advance :)
Robert.
You can do it with onkeypress event like:
onkeypress="return isNumericKey(event,this)"
along with the number it should also check for the max length. And the code should be like:
function isNumericKey(evt,zip) {
// your Number
// check here
var zipLen=zip.getAttribute('maxlength');
var zipValueLen=zip.value.length;
if(zipValueLen>=zipLen) { LoadXMLDoc(); return false;}
}

Categories

Resources