WordPress.org

Forums

[resolved] Retrieve the input type date value via ajax (10 posts)

  1. bagwis
    Member
    Posted 2 years ago #

    Hello,

    I am quite new to ajax and I've been struggling for 3 days now on how to solve my problem. I am trying to fetch the value of the date input (input type="date" in html)and pass (post method) it to ajax so that it can be processed. My goal is to be able to update a certain post meta value of multiple posts filtered via post date in a specific date range selected by user using an html 5 date input.

    Currently I only have a button which updates all the post meta value but the date range must be manually entered into the code, I couldn't make it possible to be dynamic where a user can select a date range like update post meta values of posts between April 1, 2013 and May 1, 2013.

    My working ajax which can run my function is

    jQuery(document).ready(function($) {
    	$('#update-form').submit(function(){
    		data = {
    			action: 'update_beginning_balance'
    		};
    
    		$.post(ajaxurl, data, function(updatebbal) {
    			$('#updated-bbal-result').html(updatebbal);
    		})
    		return false;
    	});
    });

    I tried to use $(#id).val which I referred from here http://api.jquery.com/val/. I hope you could give me some ideas on how to $_POST my input date fields via ajax.

    Thank you

    Kind Regards

  2. ianhaycox
    Member
    Posted 2 years ago #

    Not tested, (my jQuery is limited) but you could try,

    data = {
        action:'update_beginning_balance',
        formdata: $('#update-form').serialize()
    }

    That should send all active the form elements to you AJAX handler.

    You may need to set the dataType of the AJAX call to JSON, then decode on receipt.

    Alternatively,

    data = "action=update_beginning_balance&mydate=" + $('#update-form-date-field').val();

    Ian.

  3. bagwis
    Member
    Posted 2 years ago #

    Hello ianhaycox,

    Thank you for your reply, I will try this one now, someone else helped me yesterday but I can't still unable to filter the post via the selected start and end date.

    I am also searching for some alternatives on how I can filter posts by date range without using ajax then update its specific post meta value using my query.

    What I am trying to do is to add a filter where for my query based on a selected value.

  4. bcworkz
    Member
    Posted 2 years ago #

    $(#id).val will work if you just want that one value. Ian's suggestion is appropriate because you typically want all the form data. I just wanted you to know you were on the right track, the value returned just needs to be added to the data array just as Ian did for the serialized form data.

    data = {
        action:'update_beginning_balance',
        datedata: $(#id).val
    }

    In case you haven't figured out the next part yet, in PHP you hook the action 'wp_ajax_nopriv_update_beginning_balance' and the action callback can get the datedata value with $_POST['datedata']

  5. bagwis
    Member
    Posted 2 years ago #

    hanks bcworkz,

    My code in my update_beginning_balance function looks like this

    function update_bbal_ajax(){
    	add_filter( 'posts_where', 'filter_where' );
    	$recent = new WP_Query(array('post_type'=>'product','posts_per_page'=>-1,'post_status'=>'publish'));
    	remove_filter( 'posts_where', 'filter_where' );
    	while($recent->have_posts()) : $recent->the_post();
    	$postid = get_the_ID();
    	$new_val = 12;
    	$count = $recent->post_count;
    	echo the_title() . ' new beginning balance is ' . $new_val;
    	echo '<br/>';
    	update_post_meta( $postid, 'product_meta_beginning_balance', $new_val );
    	endwhile;
    	if($count == 1){
    		echo '<p>Successful!</p>';
    		echo 'A total of <strong>' . $count . '</strong> product updated!';
    	}
    	elseif($count >= 2){
    		echo '<p>Successful!</p>';
    		echo 'A total of <strong>' . $count . '</strong> products updated!';
    	}
    	else{
    		echo '<p>Failed!</p>';
    		echo 'No product updated!';
    	}
    	echo $_POST['start'];
    }
    add_action('wp_ajax_update_beginning_balance', 'update_bbal_ajax');

    And I also have this filter_where function
    'function filter_where( $where = '' ) {
    if(isset($_POST['start']) && !empty($_POST['start'])){
    $start = $_POST['start'];
    }
    if(isset($_POST['end']) && !empty($_POST['end'])){
    $start = $_POST['end'];
    }
    $where .= " AND post_date >= '".date("Y-m-d",$start)."' AND post_date <= '".date("Y-m-d",$end)."'";
    return $where;
    }
    add_action('wp_ajax_process_date', 'filter_where');'

    Now on this PHP code first, is it correct that I added action hook on my filter_where function? This function is what I am using to filter the result of my first function which is update_bbal_ajax. Then to add that additional where condition on my first function I added an add_filter hook on it.

    On my jQuery I have added this
    '$('#update-form').submit(function(){
    data = {
    action:'update_beginning_balance',
    formdata: $('#update-form').serialize()

    };

    $.post(ajaxurl, data, function(updatebbal) {
    $('#updated-bbal-result').html(updatebbal);
    })
    return false;
    });

    });'

    But the value on my date input aren't passed. Also I have this jQuery
    ' jQuery('#start').on('blur', function(){

    var date_value = this.value;
    var ajaxdata = {
    action: 'process_date',
    date_value: date_value
    };
    jQuery.post(ajaxurl, ajaxdata, function(res){
    // $('#date-selected').html(res);
    });
    return false;
    });

    jQuery('#end').on('blur', function(){
    var date_value = this.value;
    var ajaxdata = {
    action: 'process_date',
    date_value: date_value
    };
    jQuery.post(ajaxurl, ajaxdata, function(res){
    //$('#date-selected').html(res);
    });
    return false;
    });
    '
    Which if I add some console.log I can see the posted date but still it doesn't work because I couldn't filter my result to the date range, rather it affects all the published products.

    I really appreciate your help, thank you.

  6. bagwis
    Member
    Posted 2 years ago #

    Ooppss...
    Why some of my codes aren't placed in the box? I added ' on it, how can I escape tickbacks which is on my code? ThanKs

  7. bagwis
    Member
    Posted 2 years ago #

    Hello,

    Finally, I have successfully posted both my start and end dates, but there is one more problem, whenever I change the end time the start time replicates the end time. Say for example, I selected start time as May 1, 2013, it successfully show the date then if I now select an end date the start date reloads and it copy the value of my end date.

    I pasted here in http://pastebin.com/XfsxP8hB my code for better view.

    Just this one more thing and I am sure that I am good to go, I can then finally work with it.

    EDIT
    Ooppss, just being careless, I saw my code that I used the class in the start date rather than the ID. Will try it now if it will work. Will update this thread once I successfully reach my goal. :)
    Thanks

  8. bagwis
    Member
    Posted 2 years ago #

    Well, after struggling with this, I finally came up with a working solution, probably there is a lot of other ways to accomplish this but here is my own solution and works 100% to me. This is a reference for those who will be needing this in the future.

    jQuery(document).ready(function($) {
    $('#form').submit(function(){
    		start_date = $("#start").attr('value');
    		end_date = $("#end").attr('value');
    		data = {
    			action:'update_beginning_balance',
    			start_date_value: start_date,
    			end_date_value: end_date
    		}
    		$.post(ajaxurl, data, function(updatebbal) {
    			$('#updated-bbal-result').html(updatebbal);
    		})
    		return false;
    	});
    });

    This will retrieve the value of any input and you can now use it in your php. Similar to $_POST['start_date_value'], that's all. Finally I can now accomplish my custom plugin. :)

  9. bcworkz
    Member
    Posted 2 years ago #

    I see no reason to do anything differently, good work! Sounds like it was quite a struggle, but I'll bet you learned some good stuff along the way that will serve you well in the future.

  10. bagwis
    Member
    Posted 2 years ago #

    @bcworks, actually, what made me stuck is my lack of knowledge in jQuery, I don't have any idea to make a single function with multiple actions on it. Because what I found on the internet was snippets coded as functions, I've also been too lazy to read the jQuery documentation which later I did, ha ha. Yeah, it's been a struggle but you're right, I really learned with this experience. I am looking forward of improving my knowledge in jQuery.

    I just noticed that this end_date = $("#end").attr('value'); is similar to this start_date_value: $("#end").attr('value'); which what you gave, I've just been to exhausted that I didn't analyze your code. But actually I tried it at first but I can't remember why it didn't work. But I am pretty sure that in my case placing only .val() didn't work.

    Anyway, I would like to thank you because your statement saying that I am on the right track gave me hope that I am near. Which actually was. :) And solving a problem although seems simple to others is actually a fulfillment.

    Thanks again

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.