Ajax call to php function in a controller - php

I am using the below jquery code to call a ajax function in my contorller CS. Search is the function name. How ever the function is called in the controller. But i am supposed to get a value in the text box of the page inside this function. Basically this is for the auto complete feature. on key up the function is called. But i am not able to get the value in the textbox to do a relavent search. please reply back anything you feel would be helpful to me. Thanks in advance.
$(document).ready(function(){
$("#searchusers").autocomplete("http://localhost/CS/index.php/search" , {
width: 500,
selectFirst: false
});
});
$(document).ready(function(){
$("#searchusers").result(function(event, data, formatted) {
if (data)
$(this).parent().next().find("input").val(data[1]);
});
$('#set1 *').tooltip();
$('#firstname').tooltip();
});

You need to bind autocomplete to the input box:
$(document).ready(function(){
$("#searchusers").parent().next().find("input").autocomplete("http://localhost/CS/index.php/search" , {
width: 500,
selectFirst: false
});
});
If you give the input box its own id, the code becomes much clearer:
<input type="text" id="searchUsersInput">
Then:
$(document).ready(function(){
$("#searchUsersInput").autocomplete("http://localhost/CS/index.php/search" , {
width: 500,
selectFirst: false
});
});
$(document).ready(function(){
$("#searchUsersInput").result(function(event, data, formatted) {
if (data)
$(this).val(data[1]);
});
$('#set1 *').tooltip();
$('#firstname').tooltip();
});

Related

Passing form info from UI Dialog via AJAX

I have the following code:
HTML
<div id="resume-begin" style="background:#CCCCCC; display:inline-block;">
<img src="/images/plus-plus.png" style="display:inline;" class="trigger"/>
</div>
<div class="input-resume-data" style="display:none;">
<form id="project-form">
<label for="resume-create-name">Resume Project Name:</label>
<input type="text" id="resume-create-it" name="resume-create-it" class="text ui-widget-content ui-corner-all">
</form>
</div>
jQuery
<script>
$(document).ready(function() {
$('#resume-begin').click(function() {
('#resume-begin').hide();
$('.input-resume-data').dialog("open");
});
});
</script>
Once the div resume-begin is clicked, it opens my UI Dialog box, which is as follows:
<script>
$(function() {
$( ".input-resume-data" ).dialog({
title: 'Name your Resume Project',
autoOpen: false,
resizable: false,
height: 450,
width: 380,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
buttons: {
"Submit": function() {
var $this = $(this);
var string = $('#resume-create-it').serialize();
$.ajax({
url: 'functions.php',
type: 'POST',
data: string,
success: function(data){
alert("Project created!");
$this.dialog('close');
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
$( "#resume-begin" ).show( "slow", function() {
}); //end function
} //end cancel button
} //end buttons
}); //end dialog
}); //end jquery function
</script>
What I would like:
Once the user enters the text in the UI-input, and clicks Submit, I want to post the data to the PHP page, where I would save it to the database. Currently, if I enter in data and push submit, the success function works, but the data is not saved in the database.
In my PHP, I try to grab the data like:
//Sanitize the POST values
$resumeProjectname = $_POST['resume-create-it'];
I am unsure if I am passing the data correctly, which is through the variable "string" in jQuery, as well as if I'm retrieving the data correctly in the php file.
Any help would be greatly appreciated. Please let me know if you have any questions!
Thanks.
From my view i found two errors
('#resume-begin').hide();//$ missing
and another
var string = $('#resume-create-it').serialize();
should be
var string = $('#project-form').serialize();
As serialize applies to Form.
https://api.jquery.com/serialize/
To send your data do the following
data: {
resume_name: string
},
dataType: "json"
And then in PHP access it with
$resume_name = $_POST['resume_name'];
And as a final note, I wouldn't call a variable string since string is a keyword in many languages. At first I thought you were trying to tell it that the data you're sending is a string. Also don't call the response from the server data because you use the word data two lines above it. Use something like response.
I should mention
You don't have to use JSON. You can use other data types but that is one of the critical pieces that you are missing. You need to set the dataType so that jQuery knows how to format your response. I personally think that since you are using JavaScript to begin with it makes sense to use JavaScript Object Notation.

Submit form with ajax and post to to pages

A bit of a tricky one here
Is there a way i can join the two scripts below into one so when the form is posted it actually loads both the different named url's into the 2 different named divs
<script type="text/javascript">
$(document).ready(function(){
$("#profile").validate({
debug: false,
submitHandler: function(form) {$.post('brides_Includes/edit-profile-top.php', $("#profile").serialize(), function(data) {
$('#results').html(data);
//This executes the JavaScript passed back by the ajax.
$("#results").find("script").each(function(i) {
eval($(this).text());
});
$("form#profile")[0].reset();
});
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#profile").validate({
debug: false,
submitHandler: function(form) {$.post('brides_Includes/welcome-menu.php', $("#profile").serialize(), function(data) {
$('#mymenu').html(data);
//This executes the JavaScript passed back by the ajax.
$("#mymenu").find("script").each(function(i) {
eval($(this).text());
});
$("form#profile")[0].reset();
});
}
});
});
</script>
I am not sure if this is even possible but would be great if it was :)
Many thanks
Just put the contents of the second submitHandler into the first one:
submitHandler: function(form) {
var jqxhr1 = $.post('brides_Includes/edit-profile-top.php', $("#prof...
function(data) {
$('#results').html(data);
//This executes the JavaScript passed back by the ajax.
$("#results").find("script").each(function(i) {
eval($(this).text());
});
});
}
var jqxhr2 = $.post('brides_Includes/welcome-menu.php', $("#pro...
function(data) {
$('#mymenu').html(data);
//This executes the JavaScript passed back by the ajax.
$("#mymenu").find("script").each(function(i) {
eval($(this).text());
});
$.when(jqxhr1, jqhxr2).done(function() { $("#profile")[0].reset(); });
}
<script>
function ajax_loadpage(loadUrl,output_container)
{
$.post
(
loadUrl,
{language: "php", version: 5},function(responseText){$(output_container).html(responseText);},"html"
);
}
ajax_loadpage("url1.php","#div1");
ajax_loadpage("url2.php","#div2");
</script>
the first parameter should be supplied with the URL you want to load, the second will be the name of the id of the element you want to load it into.

Hiding div then posting form

I'm still working on my multi-stage form (http://jsfiddle.net/xSkgH/93/) and have incorporated the following solution to assist in ajax submit:
<script type="text/javascript">
$(document).ready(function() {
$("#postData").click(function() {
$("#last-step").hide(600);
$("#task5_booking").submit(function() {
$.post('resources/process2.php', function(data) {
$("#result").html(data);
});
});
return false;
});
});
</script>
It fades out the last step well but when it comes to loading up the content ot process2.php which is simply an array of all the form fields:
<?php
print_r($_POST);
?>
Nothing seems to happen at all. The div remains blank. Would really appreciate any help guys. Thanks in advance.
if you call a resource via ajax you should also pass the serialized form along the call. So assuming $("#task5_booking") is your form element
$("#task5_booking").submit(function(evt) {
evt.preventDefault();
$.post('resources/process2.php', { data: $("#task5_booking").serialize() }, function(data) {
$("#result").html(data);
});
});
When you submit the form
stop the default event (submit) otherwise the form submission stops immediately the subsequent code and the ajax call never starts - this is done using preventDefault() method;
make a post call, passing the form serialized with serialize() method (see http://api.jquery.com/serialize/).
Please also note that as pointed out by Jack your form in the fiddle has camperapplicationForm id and not task5_booking
I think you should remove your submit function:
<script type="text/javascript">
$(document).ready(function() {
$("#postData").click(function() {
$("#last-step").hide(600);
$.post('resources/process2.php', function(data) {
$("#result").html(data);
});
return false;
});
});
</script>
$(document).ready(function() {
$("#postData").click(function(e) {
e.preventDefault();
$("#last-step").hide(600);
$("#task5_booking").submit(function() {
$.post('resources/process2.php', $(this).serialize(), function(data) {
$("#result").html(data);
});
});
});
});

Jquery function not loading after refreshing div using Ajax

I have a several divs that a refreshed using Ajax after the user clicks on a link on the page.
Here's my code for the Ajax refresh div:
<script type="text/javascript"><!-- AJAX CALL FOR MY PICTURES -->
$(document).ready(function() {
$('#pictures_wrapper a.delete_image').live('click', function(e){
$('#pictures_wrapper').load( $(this).attr('href') + ' #pictures_wrapper' );
e.preventDefault();
});
});
</script>
On this same page, I am loading this Jquery effect:
<script type="text/javascript"><!-- HOVER OVER ITEMS CHANGE BG COLOR -->
$(document).ready(function() {
$(".item_control_box").hide();
jQuery('.each_item_container').hover(function() {
jQuery(this).find('.item_control_box').show()
}, function() {
jQuery(this).find('.item_control_box').hide();
});
});
</script>
My issue is that when the user click on the link to refresh the Divs, this jquery effect breaks and no longer works. I'm thinking that I have to "reload" this function some how since only the div is being reloaded and not the whole page. How can I keep this Jquery function working after refreshing a div?
You should use the callback function of the load, means u recall the jquery after loading has completed.
$('#pictures_wrapper').load( $(this).attr('href') + ' #pictures_wrapper', , function () { //hover effect function } );
Hope this help :)
Your code should work if you change your .bind() calls to .live():
jQuery('.each_item_container').live('mouseenter', function() {
jQuery(this).find('.item_control_box').show()
}).live('mouseleave', function() {
jQuery(this).find('.item_control_box').hide();
});
.hover() is the same thing as using .bind('mouseover', function () {...}) and .bind('mouseout', function () {...})
When you want to bind event handlers to elements not yet in the DOM you can use .live() or .delegate(): http://api.jquery.com/live/, http://api.jquery.com/delegate/
Attach an event handler for all elements which match the current
selector, now and in the future.
As of jQuery 1.7 you should be using .on() as .bind(), .live(), and .delegate() are depreciated: http://api.jquery.com/on/
Better put the code in a custom function with a name
function effectLoad(){
$(".item_control_box").hide();
jQuery('.each_item_container').hover(function() {
jQuery(this).find('.item_control_box').show()
}, function() {
jQuery(this).find('.item_control_box').hide();
});
}
then put the function in your ajax success function
$.ajax({
url: 'your_php_file.php',
type: 'POST',
data:formData,
success: function(response)
{
$("#formbox").html(response);
effectLoad();
}
});
Hope it will work.
Thanks
as #Guillaume Cisco mentioned in the comments you have to rebind the hover effect to dynamically inserted elements in the DOM, you can do it like
$(".item_control_box").live(
{
mouseenter:function(){
jQuery(this).find('.item_control_box').show();
},
mouseleave:function(){
jQuery(this).find('.item_control_box').hide();
}
});

ajax function and click function not working upon click

I have no idea what's wrong with my code to call another PHP file via jQuery.ajax function. Need some help in identifying the error.
$('#submit').click(function(event){
event.preventDefault();
do_cart();
});
function do_cart(){
alert('testing');
$.ajax({
url:'doCartupdate.php',
success:function(){
alert('Success.');
$('#form').submit();
}
});
}
Do I miss anything here? I have no need to pass data over to the PHP file, I just need the function inside the PHP file get called.
edit 2: now I required some alert boxes.
<script type ="text/javascript">
$('#submit').live('click',function(event){
//event.preventDefault();
do_cart();
alert('Ridirecting to paypal');
});
function do_cart(){
alert('please wait');
$.ajax({
url:'doCartupdate.php',
success:function(){
alert('Success.');
//$('#form').submit();
}
});
}
</script>
It would be good if I can reduce the box to only 1 or none.
It works for me.
http://sandbox.phpcode.eu/g/8ed34.php
be sure you put this script AFTER definition of #submit or be sure you put
your code to
$(function(){
//yourcode
});
Try $('#submit').live('click', function(event){...
Change this
$('#submit').click(function(event){
event.preventDefault();
do_cart();
});
To
$('#submit').click(function(event){
do_cart();
event.preventDefault();
});

Categories