I am implementing the search functionality through ajax jquery, though I am new in this. I have done that by using keyup event. Whenever type something, according to that letter(s), my searching list has been coming. But thing is that, I am not getting any record when refresh the page. If I search something then only I am getting record and if in that position I delete all the texts typed over the search field, then the correct list of records are coming, but not initially.
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("user-account-other.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
<div id="search_results"></div>
Now please tell me how can solve this issue.
Put ajax_search() funcion in on onload of document and also on blur of a text box element then it will work perfectly
Im not 100% sure what you're asking. I'd be happy to update this answer with some more information once I can understand the problem. I did, however, want to show you how to better streamline your code.
See: http://api.jquery.com/load/
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
function ajax_search(){
var url = "user-account-other.php?search_term=" + $("#search_term").val();
$("#search_results").load(url, function(){
//Ajax Load is Done
}).show();
}
Related
I have the following code
<html>
<head>
//included all jquery related stuff ..not shown here
</head>
<body>
<button id = 'btn' />
<div id = 'ct'>
<?php echo file_get_contents('my_ajax_stuff.php'); ?>
</div>
</body>
<script>
$('.datepicker').datepicker({dateFormat: "dd-mm-yy"});
$('#btn').click(function() {
$.ajax({
type: "GET",
url: "my_ajax_stuff.php" ,
success: function(response) {
$('#ct').html(response);
/*added following line to solve this issue ..but not worked*/
//$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"});
} ,
error: function () {
$('#ct').html("Some problem fetching data.Please try again");
}
});
});
</script>
</html>
The page
my_ajax_stuff.php
contains a jquery ui datepicker with class = 'datepicker'.On the first load the datepicker works.But when I click on the button to reload it again , the contents are replaced with new contents.But the datepicker is not working.I have tried initialising the datepicker inside the ajax success handler ,as you see.But it also failed.What is the issue.How can it be solved???
You need to reinitialize the date picker in Ajax success
$('.datepicker').datepicker({dateFormat: "dd-mm-yy"});
$('#btn').click(function() {
$.ajax({
type: "GET",
url: "my_ajax_stuff.php" ,
success: function(response) {
$('#ct').html(response);
$( "#datepicker" ).datepicker();
/*added following line to solve this issue ..but not worked*/
//$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"});
} ,
error: function () {
$('#ct').html("Some problem fetching data.Please try again");
}
});
});
The answer you are looking for may be similar to this question:
jQuery datepicker won't work on a AJAX added html element
You're replacing the datepicker element in the DOM with the ajax response.
The reason this works for the first time is that PHP renders the my_ajax_stuff.php on first load already in the HTML so it becomes available to jQuery in the DOM.
// do this once the DOM's available...
$(function(){
// this line will add an event handler to the selected inputs, both
// current and future, whenever they are clicked...
// this is delegation at work, and you can use any containing element
// you like - I just used the "body" tag for convenience...
$("body").on("click", ".datepicker", function(){
$(this).datepicker();
$(this).datepicker("show");
});
});
I came across this question because I was having the same problem as OP.
Mooed Farooqui's recommendation to reinitialize in Ajax success worked, but not initially.
Ended up that I was also calling the datepicker function in my equivalent of my_ajax_stuff.php. After I took that out it worked perfectly on button reload and postbacks. Hope this helps someone that stumbles upon this old question...
Call your picker inside .ajaxComplete function.
$(document).ready(function () {
// setup picker here...
});
$(document).ajaxComplete(function() {
// setup picker here...
});
Here is a link
This may be a primitive solution, but I found that If I have in my main document a function MakeDatePicker and I used it in the OnChange portion of my input, I was able to make any object, ajax, or otherwise, turn into a date picker before, and after an ajax call.
Here is the function and the call. (please note, I have ColdFusion # functions, as this is a return on a coldfusion query with a CFOutput.)
<td><input type="date" class="EstDeliveryDatePicker" chassis="#chassis#" value= "#DateFormat(EstDelivery,'mm/dd/yy')#" onclick="MakeDatePicker(this);"></input></td>
here is the function at the top of my page:
function MakeDatePicker(obj)
{
$(obj).datepicker({
changeMonth: true,
changeYear: true
});
$(obj).datepicker("show");
}
like I said, its crude, but it works.
I was having an issue with the way my tables would display their sorts. I have it so when you enter the page, you have 1 field that you can click on to select a date. If you click on one of the headers, it would sort SQL command, and re-display the table. This would break the .datepicker function. So I change it to not read off the class, but make the click, trigger the function. the problem with trying to get it to run on the .class was it would initialize after the table was redrawn and lose the scope of the DOM.
I'm trying to add a link to delete a row from a mysql database using jquery and ajax. The data is currently displayed in a table. For some reason, the Click event isn't triggering.
Here's my AJAX call:
<script>
$(document).ready(function() {
/* load table with page load*/
$("#sort tbody").load("inc/index_table.php");
/* row deletion */
$(".deletelink").click(function(){
var id = $(this).attr("id");
$.ajax({
beforeSend: function (request) {
var answer = confirm("Are you SURE you want to delete this?/nThis action is NOT reversible.")
if (answer){ return(true); }
else { return(false); }
},
type: "POST",
url: location.href,
data: "delete="+id,
error: function() {
console.log("Theres an error with AJAX deletion");
},
success: function(){ //a.td.tr.remove just that row rather than the whole table
$this.parent().parent().remove();
console.log("Deleted.");
}
});
});
});
</script>
And the relevant HTML:
this is part of a while loop that prints a table from my database:
<td><a class="deletelink" id="'.$row["id"].'"><img src="images/delete.png" alt="Delete"></a></td>';
My code specifies <a class="deletelink"> but it's not registering with $(".deletelink").click(function(){ });
Does anyone see what could be wrong here or have an alternate method to suggest?
Looks like you are loading the elements dynamically. You can only bind to elements which currently exist in the DOM. To bind to elements which you are about to add, you must attach the event to a static element, the closer it is to the dynamic content, the better.
Try using on() with a delegate.
$("#sort tbody").load("inc/index_table.php");
/* row deletion */
$("#sort tbody").on("click", ".deletelink", function(){
//...rest of code the same
});
on() was added in jQuery 1.7. If you are using a previous version, but higher than 1.4.2 you can use delegate() instead.
$("#sort tbody").load("inc/index_table.php");
$("#sort tbody").delegate(".deletelink", "click", function(){
//...rest of code the same
});
If #sort or tbody of $("#sort tbody") is also dynamic then $("document").on("click", "#sort tbody .deletelink", function(){...}) would work as well, though anything closer than document is better off course.
Edit
I'm just looking at your code again, the delegate binding should work, however, using load()'s success callback should work with your existing code too.
The callback is executed ones load has successfully completed. I'm not 100% certain but I'm assuming that when success is called that the elements already have been loaded into the DOM and as such the normal bindings should work.
If that doesn't work the dynamic bindings mentioned above should.
$("#sort tbody").load("inc/index_table.php", function(){
/* row deletion */
$(".deletelink").click(function(){
// .. your code as before.
});
});
to make sure the table is fully loaded, try to declare the click function, in the callback of .load() like,
$("#sort tbody").load("inc/index_table.php", function() {
/* row deletion */
$(".deletelink").click(function(){ ....
});
});
Try using .on() to bind the events to the elements
$(".deletelink").on('click',function(e){
e.preventDefault();
Also make sure to add preventDefault to stop the default functioning of the link
The problem is that your delete link appears after the table loads. So when page was loaded and DOM tree was built, it wasn't there. So you can't attach a click to it.
You can try live(). This can be used as
$(".deletelink").live('click',function(){
// ajax call handling code here
});
This function attaches event after the element has been introduced in the DOM. However, this function is a bit greedy as it keeps on scanning entire DOM tree on any DOM change. So use with caution
I read this question, and I'm pretty sure it's 90% of what I need, but I'm after something more than just this, and my success formulating my query in Google has been less than stellar.
What I'd like to do
I have a form on a site that, when submitted, needs to connect with a database, and then the user needs to be apprised of the result. I'm trying to get the result page to load in a modal jQuery dialog instead of forcing a full page reload. At present, I'm just trying to create a jQuery dialog that replaces the contents of a <div> with the product of a PHP file. I know I will get the PHP file's execution result this way. That's what I'm after, but it currently is not working.
My code currently looks like this:
$(document).ready(function() {
$("#dialog").get('include.php', function(data) {
$("div#dialog").html(data);
});
});
And include.php is simply:
<?
echo "<h1>Loaded</h1>";
?>
When I load the page, the original contents of #dialog are still there. I have a strong suspicion that what I'm failing to grasp isn't major, but I've had bad luck finding the fix. I'm a web dev newbie. How do I wwebsite as on the internet?
You are calling get on a jQuery result. That'a a different method than $.get, the one you should be using:
$(document).ready(function() {
$.get('include.php', function(data) {
$("div#dialog").html(data);
});
});
i have been using Ajax call for the same purpose. So try this :
$(document).ready(function() {
$.ajax('include.php',
success : function(data) {
$("#dialog").html(data);
});
});
If you want to replace the entire contents of the #dialog DOM object with the HTML you load, then you probably want to use .load():
$(document).ready(function() {
$("#dialog").load('include.php', function(data) {
// no need to set the html here as .load() already does that
});
});
I have a form which I want to submit and show in Colorbox.
The form is Mals Ecommerce View Cart.
See: https://www.mals-e.com/tpv.php?tp=4
I want it to Show the Cart contents in a colorbox iframe. Is this possible to do using the FORM method rather than the Link method?
here the best answer..
add this to your submitbutton : id="SearchButton"
then use this:
$(document).ready(function() {
$("input#SearchButton").colorbox({href: function(){
var url = $(this).parents('form').attr('action');
var ser = $(this).parents('form').serialize(); //alert(url+'?'+ser);
return url+'?'+ser;
}, innerWidth:920, innerHeight:"86%", iframe:true});
});
test at: http://wwww.xaluan.com or http://wwww.xaluan.com/raovat/
I recently faced this problem, spent some time searching the solution and found this:
$("#submit_button").click(function () { // ATTACH CLICK EVENT TO MYBUTTON
$.post("/postback.php", // PERFORM AJAX POST
$("#info_form").serialize(), // WITH SERIALIZED DATA OF MYFORM
function(data){ // DATA NEXT SENT TO COLORBOX
$.colorbox({
html: data,
open: true,
iframe: false // NO FRAME, JUST DIV CONTAINER?
});
},
"html");
});
I.e. Colorbox uses submitting the form via standard jQuery methods. Hope this helps someone.
Try
$("input#formsubmit").colorbox({title: function(){
var url = $(this).parents('form').attr('action');
}});
Not tested, I just took the syntax from the Colorbox page. You'd have to give your submit button an id of "formsubmit" for the above to work.
you can open colorbox independently using:
jQuery.colorbox({href:,iframe:true, opacity:0.6 ,innerWidth:760,innerHeight:420,title:});
and you can call this function on any event like:
jQuery("document").ready(function(){ jQuery.colorbox.. });
when u submit a form send a query parameter along with it. When after submission you reach back the form. see if that parameter is populated.
and then call jQuery.colorbox()
There's a great tutorial on IBM's website which walked me through a simple search/results list using jQuery,PHP and Ajax.
I was able to make it work and it's really cool.
One problem. I want the results to be hyperlinks and I can't get any java script to run on the results.
Here is the script I have (includes what was in the tutorial plus the additional script necessary to ovverride the hyperlink, click behavior):
<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
$("a").click(ClickInterceptor);
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("./find.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
function ClickInterceptor(e)
{
window.alert("Hellow World!");
return false;
}
</script>
If i put the following html under the <body> tag:
this will work
That will display the alert window.
However, if I change the results to hyperlinks (found in find.php, listing 7 from the tutorial):
$string .= "".$row->name." - ";
It does not work.
Any idea on how to fix this?
The click function binds when it is run. You need to change it to a live binding.
$("a").live("click", ClickInterceptor);
Or you can just bind it when you update the search results by putting the following after $("#search_results").html(data):
$("#search_results a").click(ClickInterceptor);
The problem is pretty simple actually, $("a").click(ClickInterceptor); will only look for items that currently exist in the DOM. All you need to do is change that line to this:
$("a").live("click", ClickInterceptor);
I'd also advise taking the time to read more about jQuery's Events/live.