Ok so im trying to start an ajax call after the first call has completed. I have a form with 3 drop down menus. The first menu onload runs the script to bring back values. I then want to feed the vale into the second script and run the script to populate the second 3rd menu.
the second dropdown is populated onChange of the first. This works great. I then want the result of that feed into to third drop down. I know my external queries are right I just think the ajax is wrong. Here is my Ajax calls....
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function() {
jQuery('#networks').trigger('change');
});
function get_cities(networks)
{
$.ajax({
type: "POST",
url: "select.php",
beforeSend: function () {
$("#folder").html("<option>Loading ...</option>");
},
data: "idnetworks="+networks +"&par="+ <?php echo $row_rs_doc['parentid']; ?>,
success: function(msg){
$("#folder").html(msg);
}
});
}
</script>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function() {
jQuery('#folder').trigger('change');
});
function get_sub(folder)
{
$.ajax({
type: "POST",
url: "select2.php",
beforeSend: function () {
$("#subfolder").html("<option>Loading ...</option>");
},
data: "iddocs="+folder,
success: function(msg){
$("#subfolder").html(msg);
}
});
}
</script>
ok here are the form fields
<select name="networks" id="networks" onChange='get_cities($(this).val())'>
<?php create(network, networkid, netname);?>
</select>
<select name="folder" id="folder" onChange='get_sub($(this).val())'>
</select>
<select name="subfolder" id="subfolder">
</select>
KISS it. Just put the second ajax call inside the success of the first one
You can use deferred objects, which will allow you to initiate additional actions without having to rewrite your existing event handler, and without nesting your code too much:
var req1 = $.ajax(...);
req1.done(function() { ... } ); // start your second request
Related
I want to retrieve the value of my dropdown on change, and post it to my PHP (at the moment, the PHP is just var_dump, for debugging purposes)
I'm stuck at posting the selected value to my AJAX, seemingly there no change.
I Using WP framework to load scripts and run them through admin-ajax.php -- I've been
using this approach for others AJAX functions, and it is working.
I have a dropdown list, like this:
HTML
<form action="" method="post">
<select name="count" class="count">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
<input class="koordinator_id" type="hidden" name="koordinator_id" value="<?php echo $_SESSION['coordinator_id'] ?>">
</form>
AJAX
$(document).ready(function () {
$('select.count').change(function () {
alert("Whyunoalert?");
$.ajax({
type: "POST",
url: (my_ajax_script.ajaxurl),
data: ({
action: 'generate',
koordinator_id: $('input[name=$"koordinator_id"]').val(),
id: $('select.count').val()
}),
success: function (msg) {
alert("Data changed:" + msg);
}
});
});
});
PHP
function generate() {
$count = $_POST['id'];
var_dump($count);
$koordinator_id = $_POST['koordinator_id'];
var_dump($koordinator_id);
}
EDIT
I've changed the code accordingly to the first three comments. Now my code executes the AJAX but still no var_dump are made in the php file. Thanks for the help so far, hope you can do a bit more. Also i've added the functions.php code , where the php function is bound and the redirect to ajax-admin.php is setup.
functions.php
function load_scripts() {
wp_enqueue_script('local_jquery', '/wp-content/themes/tutorial_theme/scripts/scripts.js');
wp_enqueue_script('ajax_func', get_template_directory_uri() . '/scripts/ajax_implementation.js');
}
if (!is_admin())
add_action('wp_enqueue_scripts', 'load_scripts');
add_action('template_redirect', 'load_scripts');
$dirName = dirname(__FILE__);
$baseName = basename(realpath($dirName));
require_once ("$dirName/ajax_functions.php");
add_action("wp_ajax_nopriv_approve", "generate");
add_action("wp_ajax_approve", "generate");
2nd EDIT
removed this from the ajax: (was from old copy-paste)
dataType: 'html',
The selector $('input[name=$"koordinator_id"]') is wrong in your data line. The syntax for input name ending with some string is $('input[name$=somestring]'].
Use this instead:
$('input[name$="koordinator_id"]') // '$' needs to be before '='
^
First of all if you are firing ajax onchange event why did you wrap them in the form tag? remove it if no use other than onchange event.
Second is you're using action: 'generate' in your ajax function but you're not hooking the right action in your functions file of php
add_action("wp_ajax_nopriv_YOUR_ACTION", "METHOD");
add_action("wp_ajax_YOUR_ACTION", "METHOD");
So it would be
add_action("wp_ajax_nopriv_generate", "generate");
add_action("wp_ajax_generate", "generate");
Last but not least always exit your ajax method call, so make sure it won't fall below.
function generate() {
$count = $_POST['id'];
var_dump($count);
$koordinator_id = $_POST['koordinator_id'];
var_dump($koordinator_id);
exit;
}
Also as #Krishna answer remove the $ sign unexpected expression
koordinator_id: jQuery('input[name=$"koordinator_id"]').val(),
Need to be:
koordinator_id: jQuery('input[name="koordinator_id"]').val(),
You're missing the { after the .ready(function(). Fix it like this:
$(document).ready(function () {
$('select.count').change(function () {
alert("Whyunoalert?");
$.ajax({
type: "POST",
url: 'my_ajax_script.ajaxurl',
data: ({
action: 'generate',
koordinator_id: $('input[name=$"koordinator_id"]').val(),
id: $('select.count').val()
}),
dataType: 'html',
success: function (msg) {
alert("Data changed:" + msg);
}
});
});
});
Try like this
$(document).ready(function()
$('.count').change(function() {
$.ajax({
type: "POST",
url: 'my_ajax_script.ajaxurl',
data: {'action': 'generate', 'koordinator_id': $('input[name=koordinator_id]').val(), 'id': $('.count').val()}),
dataType: 'html',
success: function(msg) {
alert("Data changed:" + msg);
}
});
});
});
Also avoid using of php short tags.Sometimes it cause problems if your php version doesnt support short tags.So change this
<input class="koordinator_id" type="hidden" name="koordinator_id" value="<?php echo $_SESSION['coordinator_id'] ?>">
I have PHP page called (jQuery_puff.php) which only holds a javascript/jQuery in it.
The jquery in that PHP is this:
<?php
echo '<script>
$( "#myButton" ).click(function() {
$( "#myDiv" ).effect( "puff", "slow" );
$( "#myDiv" ).toggle( "puff" );
});
</script>';
?>
I have included this PHP page within another PHP file like so:
<?php include "jQuery_puff.php"; ?>
what the first code inside the jQuery_puff.php does is that it will apply a jquery puff effect to the #myDiv everytime the user clicks on the #myButton.
Everything works as they should. so far so good. but this is only happens for one user (client side).
Now My Question:
Is there any way to run this PHP page in real time for all the users using AJAX?
For example the USER 1 clicks on the #myButton and the USER 2, USER 3 etc will also see the puff effect being applied to the #myDiv ?
I thought about using something like this But this doesn't do anything!!
<script type="text/javascript">
$(document).ready(function() {
$("#myButton").click(function() {
$.ajax({
url: 'myOwn.php',
cache: false,
success: function(data) {
checkForNewData2();
}
});
});
var intervalID2 = setInterval(checkForNewData2, 500);
});
function checkForNewData2() {
$.ajax({
url: 'jQuery_puff.php',
dataType: 'json',
cache: false,
success: function(data) {
$("#data").html(data.data);
}
});
}
</script>
am I in the right direction? or...?
I have a complex website setup so I'll just make an example a simple one.
Current Setup
I have two buttons.
<a id="one" href="#">Link 1</a>
<a id="two" href="#">Link 2</a>
And I have two divs
<div id="showOne" style="display:none">1</div>
<div id="showTwo" style="display:none">2</div>
This is my JQuery code
$('#one').click(function (e) {
$('#showOne').show();
});
$('#two').click(function (e) {
$('#showTwo').show();
});
What I'm Trying to Accomplish
Basically, I have a database table setup that has a row to count how many times was div(showOne) and div(showTwo) shown.
How would I work with AJAX to add one to the database row aka counter if display = block?
My Attempt
$('#one').is(":visible")
{
$.ajax({
type:"POST"
url: update.php
data: {type:link_one_shown}
success: function(data){
alert("Test");
}
})
When I do this, the rest of my JQuery code crashes. Not sure if this doesn't make sense or I just wrote something wrong.
Thank you in advance!
Three problems that I can see:
As Akam notes, you've mangled the if statement.
The data isn't correct -- link_one_shown should be either a variable (which you haven't defined?) or a string literal.
You're missing commas between the ajax function parameters.
Here's the modified code:
if ($('#showOne').is(":visible")) {
$.ajax({
type:"POST",
url: update.php,
data: { type: "link_one_shown" },
success: function(data){
alert("Test");
}
});
}
why not just move ajax call to function and invoke it when show the div, this avoids code repetition and makes it simpler.
$('#one').click(function (e) {
$('#showOne').show();
updateDB('link_one');
});
$('#two').click(function (e) {
$('#showTwo').show();
updateDB('link_two');
});
function updateDB(link)
{
$.ajax({
type:"POST"
url: update.php
data: {type:link}
success: function(data){
alert("Test");
}
});
}
I have a simple combo box whose value I can get in JavaScript.
I am doing that so I don't need to refresh the page.
Also I want to use the selected value to do some conditional branching after combo box so how do I get the value of combo box from JavaScript to my variable $change.
echo '<select id="combo_1">';
echo '<option value="2">Submative</option>';
echo '<option value="1">formative</option>';
echo '</select>';
Below is my JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('#combo_1').change(function(){
});
});
</script>
Here I want to do $change = $(this).val(), but obviously I cant do it like this.
Any suggestions?
i want to do it on the same page without refreshing or without submitting
my url kinda look like this
http://localhost/lms/grade/report/userdef/index.php
and i want it to be on click action
cuz depending on the choice of combobox 2 very different procedures will be called
You're gonna want to use AJAX and submit the form, then you can access the returned data without ever refreshing the page.
Basically:
HTML
<select name="combo" id="combo_1">
<option value="2">Submative</option>
<option value="1">formative</option>
</select>
JavaScript
$('#combo_1').change(function() {
$.post('calcScript.php', $(this).serialize(), function(data) {
alert(data);
});
});
in PHP, you can access your combo data via $_POST['combo'].
<script type="text/javascript">
$(document).ready(function() {
$('#combo_1').change(function(){
var combo_1 = $(this).val();
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {'combo_1':combo_1},
success: function(data){
alert(data)
}
});
});
});
</script>
ajax.php
if( isset($_GET['combo_1]) ) {
echo $change = $_GET['combo_1'];
}
JS:
$.ajax({
type: "POST",
url: './filename.php',
beforeSend: function(){
//If you want to do something
},
data: 'data='$('#combo_1').val(), //Optional '&data2='+value+'&datan='+value,
success: function(msg){
alert(msg);
}
});
PHP:
$val = $_POST['data'];
return 'received successfully';
This will alert 'received successfully'
I have a PHP file, Test.php, and it has two functions:
<?php
echo displayInfo();
echo displayDetails();
?>
JavaScript:
<html>
...
<script type="text/javascript">
$.ajax({
type:'POST',
url: 'display.php',
data:'id='+id ,
success: function(data){
$("#response").html(data);
}
});
</script>
...
<div id="response">
</div>
</html>
It returns the response from jQuery. The response shows as <a href=Another.php?>Link</a>. When I click the Another.php link in test.php, it loads in another window. But I need it to load the same <div> </div> area without changing the content of test.php, since it has displayInfo(), displayDetails(). Or is it possible to load a PHP page inside <div> </div> elements?
How can I tackle this problem?
If I understand correctly, you'd like for the a link to cancel navigation, but fire the AJAX function?
In that case:
$("#mylink").click(function() {
$.ajax({ type: "POST", url: "another.php", data: {id: "somedata"}, function(data) {
$("#response").html(data);
});
return false;
});
Krof is correct,
One possible unwanted behavior of this however is that it will query the data every time the link is clicked. You can set the event to only call the ajax query once by using one.
$("#mylink").one('click', function() {
// ajax call
return false;
});
Don't forget to set href="javascript:{}" in your link so after the event is fired once the link wont do anything;
You could just use MooTools and class Request.HTML.