jQuery x-editable with update_user

Discussion:

jQuery x-editable with update_user_meta?

BenderisGreat

2013-10-27 02:22:55 UTC

Looking to use this jQuery plugin with an update_user_meta option on a
profile page. Ex. would be click your location, or mood and it allows for
inline editing and updating. It uses a unique ajaxOptions setting that I
cant seem to get working with wordpress.

http://vitalets.github.io/x-editable/index.html
<http://vitalets.github.io/x-editable/index.html> - the x-editable plugin

http://jsfiddle.net/xBB5x/62/ <http://jsfiddle.net/xBB5x/62/> - JSFiddle
of x-editable working outside wordpress - but unsure how it would work
within WP.

Mostly looking for someone to verify if this would work, and explain how the
data would be passed (for example the 'pk' field looks for a row in the DB,
maybe it would be possible to substiture that with something different?
That or pk needs to be redefined I think?

--
View this message in context: http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641.html
Sent from the Wordpress Hackers mailing list archive at Nabble.com.

J.D. Grimes

2013-10-27 19:32:38 UTC

Permalink

Yes, this is possible. A very basic example of how you would handle the request with PHP is here https://github.com/vitalets/x-editable/blob/gh-pages/backend-samples/php/post.php

You will need to fill in the value for pk in your JS, which means you'll need to pull the ID from the database and use wp_localize_script() to pass it on to the JS. Here is an example function (based on this http://wpseek.com/blog/2010/how-to-get-the-meta-id-by-meta-key/80/) to pull the meta id from the database:

function get_user_mid_by_key( $user_id, $meta_key ) {
global $wpdb;
$mid = $wpdb->get_var( $wpdb->prepare("SELECT meta_id FROM $wpdb->usermeta WHERE user_id = %d AND meta_key = %s", $user_id, $meta_key) );
if( $mid != '' )
return (int)$mid;

return false;
}

Then when the request comes in you can use update_metadata_by_mid() (http://wpseek.com/update_metadata_by_mid/) to update the value in the database.

-J.D.

Post by BenderisGreat
Looking to use this jQuery plugin with an update_user_meta option on a
profile page. Ex. would be click your location, or mood and it allows for
inline editing and updating. It uses a unique ajaxOptions setting that I
cant seem to get working with wordpress.
http://vitalets.github.io/x-editable/index.html
<http://vitalets.github.io/x-editable/index.html> - the x-editable plugin
http://jsfiddle.net/xBB5x/62/ <http://jsfiddle.net/xBB5x/62/> - JSFiddle
of x-editable working outside wordpress - but unsure how it would work
within WP.
Mostly looking for someone to verify if this would work, and explain how the
data would be passed (for example the 'pk' field looks for a row in the DB,
maybe it would be possible to substiture that with something different?
That or pk needs to be redefined I think?
--
View this message in context: http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641.html
Sent from the Wordpress Hackers mailing list archive at Nabble.com.
_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

BenderisGreat

2013-10-28 16:48:21 UTC

Permalink

Thanks JD! with ajaxOptions though, it requests the url, 'ajaxurl' does not
work. Should i dorectly specify my admin-ajax.php here? Also there is no
option for action: which is required in WP to reach the function to handle
the ajax call right? I tried adding that in as well, and it did not
function.

I could just use a separate .php file for processing, and place the code in
that. Would that be the best option?

--
View this message in context: http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641p42645.html
Sent from the Wordpress Hackers mailing list archive at Nabble.com.

J.D. Grimes

2013-10-28 18:40:47 UTC

Permalink

Use the ajaxurl as the value for the x-editable url:

jQuery( '#selector' ).editable({
type: 'text',
pk: pk,
url: ajaxurl,
// etc.
});

I don't know if it will let you pass the action through ajaxOptions.data, but if not you could try appending it to the ajaxurl as a GET query parameter.

-J.D.

Post by BenderisGreat
Thanks JD! with ajaxOptions though, it requests the url, 'ajaxurl' does not
work. Should i dorectly specify my admin-ajax.php here? Also there is no
option for action: which is required in WP to reach the function to handle
the ajax call right? I tried adding that in as well, and it did not
function.
I could just use a separate .php file for processing, and place the code in
that. Would that be the best option?
--
View this message in context: http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641p42645.html
Sent from the Wordpress Hackers mailing list archive at Nabble.com.
_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

Gregory Lancaster

2013-10-28 19:49:05 UTC

Permalink

I got the ajaxurl working, but for some reason clicking the <a> only
displays the popup if I am logged out now. I think I will need to hire
help for this one. Thank you for your assistance though J.D. you did help.

Post by J.D. Grimes
jQuery( '#selector' ).editable({
type: 'text',
pk: pk,
url: ajaxurl,
// etc.
});
I don't know if it will let you pass the action through ajaxOptions.data,
but if not you could try appending it to the ajaxurl as a GET query
parameter.
-J.D.

Post by BenderisGreat
Thanks JD! with ajaxOptions though, it requests the url, 'ajaxurl' does

not

Post by BenderisGreat
work. Should i dorectly specify my admin-ajax.php here? Also there is

Post by BenderisGreat
option for action: which is required in WP to reach the function to

handle

Post by BenderisGreat
the ajax call right? I tried adding that in as well, and it did not
function.
I could just use a separate .php file for processing, and place the code

Post by BenderisGreat
that. Would that be the best option?
--

http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641p42645.html

Post by BenderisGreat
Sent from the Wordpress Hackers mailing list archive at Nabble.com.
_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

J.D. Grimes

2013-10-28 19:53:40 UTC

Permalink

That sounds like a JS conflict. Are you getting any errors in your browsers console?

-J.D.

Post by Gregory Lancaster
I got the ajaxurl working, but for some reason clicking the <a> only
displays the popup if I am logged out now. I think I will need to hire
help for this one. Thank you for your assistance though J.D. you did help.

Post by BenderisGreat
Thanks JD! with ajaxOptions though, it requests the url, 'ajaxurl' does

not

Post by BenderisGreat
work. Should i dorectly specify my admin-ajax.php here? Also there is

Post by BenderisGreat
option for action: which is required in WP to reach the function to

handle

Post by BenderisGreat
the ajax call right? I tried adding that in as well, and it did not
function.
I could just use a separate .php file for processing, and place the code

Post by BenderisGreat
that. Would that be the best option?
--

http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641p42645.html

_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

BenderisGreat

2013-10-28 20:04:59 UTC

Permalink

I checked it with FireBug and got this :

ReferenceError: reference to undefined property x.event.triggered

<Loading Image...

>

--
View this message in context: http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641p42649.html
Sent from the Wordpress Hackers mailing list archive at Nabble.com.

BenderisGreat

2013-10-28 21:20:55 UTC

Permalink

I think I see the issue, when I am logged in the head.php gets loaded twice.
Not sure why exactly though. Is there a way to show all files being loaded
in sequence as they are fired?

--
View this message in context: http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641p42650.html
Sent from the Wordpress Hackers mailing list archive at Nabble.com.

J.D. Grimes

2013-10-28 21:26:46 UTC

Permalink

You could add a debug_print_backtrace() in head.php. That will print the stack for each inclusion.

-J.D.

Post by BenderisGreat
I think I see the issue, when I am logged in the head.php gets loaded twice.
Not sure why exactly though. Is there a way to show all files being loaded
in sequence as they are fired?
--
View this message in context: http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641p42650.html
Sent from the Wordpress Hackers mailing list archive at Nabble.com.
_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

Gregory Lancaster

2013-10-28 21:40:51 UTC

Permalink

Damn that was incredibily useful, thanks man. I fixed the double headers
but unfortunately this still wont work unless I am logged out. I found the
culprit though, the same block of code that was an issue previously:

*/
function themeblvd_redirect_admin(){
if ( ! current_user_can( 'edit_posts' ) && (! defined('DOING_AJAX') || !
DOING_AJAX ) ){
wp_redirect( site_url() );
exit;
}
}
add_action( 'admin_init', 'themeblvd_redirect_admin' );

commenting out that block fixed it. What do I need to add to this so I
can still block wp-admin access but keep the ajax call working? Add a
jQuery exception as well?

Post by J.D. Grimes
You could add a debug_print_backtrace() in head.php. That will print the
stack for each inclusion.
-J.D.

Post by BenderisGreat
I think I see the issue, when I am logged in the head.php gets loaded

twice.

Post by BenderisGreat
Not sure why exactly though. Is there a way to show all files being

loaded

Post by BenderisGreat
in sequence as they are fired?
--

http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641p42650.html

_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

J.D. Grimes

2013-10-28 21:57:21 UTC

Permalink

That really doesn’t make sense. Is this code you pasted an exact copy of the code in your theme?

Post by Gregory Lancaster
Damn that was incredibily useful, thanks man. I fixed the double headers
but unfortunately this still wont work unless I am logged out. I found the
*/
function themeblvd_redirect_admin(){
if ( ! current_user_can( 'edit_posts' ) && (! defined('DOING_AJAX') || !
DOING_AJAX ) ){
wp_redirect( site_url() );
exit;
}
}
add_action( 'admin_init', 'themeblvd_redirect_admin' );
commenting out that block fixed it. What do I need to add to this so I
can still block wp-admin access but keep the ajax call working? Add a
jQuery exception as well?

Post by J.D. Grimes
You could add a debug_print_backtrace() in head.php. That will print the
stack for each inclusion.
-J.D.

Post by BenderisGreat
I think I see the issue, when I am logged in the head.php gets loaded

twice.

Post by BenderisGreat
Not sure why exactly though. Is there a way to show all files being

loaded

Post by BenderisGreat
in sequence as they are fired?
--

http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641p42650.html

_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

Gregory Lancaster

2013-10-28 22:45:19 UTC

Permalink

Yea you're right, realized it right after I posted. I logged out, which
fixed the issue. I have no idea what is causing this. :-/ Ill post on
github and maybe someone can target the issue. Its def odd though, that it
only works when logged out. I compared the loaded html side by side with a
coparison tool and they are nearly identical.

Post by J.D. Grimes
That really doesn’t make sense. Is this code you pasted an exact copy of
the code in your theme?

Post by Gregory Lancaster
Damn that was incredibily useful, thanks man. I fixed the double headers
but unfortunately this still wont work unless I am logged out. I found

the

Post by Gregory Lancaster
*/
function themeblvd_redirect_admin(){
if ( ! current_user_can( 'edit_posts' ) && (! defined('DOING_AJAX') || !
DOING_AJAX ) ){
wp_redirect( site_url() );
exit;
}
}
add_action( 'admin_init', 'themeblvd_redirect_admin' );
commenting out that block fixed it. What do I need to add to this so I
can still block wp-admin access but keep the ajax call working? Add a
jQuery exception as well?

Post by J.D. Grimes
You could add a debug_print_backtrace() in head.php. That will print the
stack for each inclusion.
-J.D.

Post by BenderisGreat
I think I see the issue, when I am logged in the head.php gets loaded

twice.

Post by BenderisGreat
Not sure why exactly though. Is there a way to show all files being

loaded

Post by BenderisGreat
in sequence as they are fired?
--

http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641p42650.html

Post by Gregory Lancaster

Post by J.D. Grimes

_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

Gregory Lancaster

2013-11-05 21:52:12 UTC

Permalink

Hey man - Can I hire you to code this jquery file upload plugin into the
plugin I have so far? Along with the php print image thing so people can
share an image from their profile? How much would that run (estimated
obv)?

Here is the plugin: http://blueimp.github.io/jQuery-File-Upload/

On Mon, Oct 28, 2013 at 3:45 PM, Gregory Lancaster <

Post by Gregory Lancaster
Yea you're right, realized it right after I posted. I logged out, which
fixed the issue. I have no idea what is causing this. :-/ Ill post on
github and maybe someone can target the issue. Its def odd though, that it
only works when logged out. I compared the loaded html side by side with a
coparison tool and they are nearly identical.

Post by J.D. Grimes
That really doesn’t make sense. Is this code you pasted an exact copy of
the code in your theme?

Post by Gregory Lancaster
Damn that was incredibily useful, thanks man. I fixed the double

headers

Post by Gregory Lancaster
but unfortunately this still wont work unless I am logged out. I found

the

Post by J.D. Grimes
You could add a debug_print_backtrace() in head.php. That will print

the

Post by Gregory Lancaster

Post by J.D. Grimes
stack for each inclusion.
-J.D.

Post by BenderisGreat
I think I see the issue, when I am logged in the head.php gets loaded

twice.

Post by BenderisGreat
Not sure why exactly though. Is there a way to show all files being

loaded

Post by BenderisGreat
in sequence as they are fired?
--

http://wordpress-hackers.1065353.n5.nabble.com/jQuery-x-editable-with-update-user-meta-tp42641p42650.html

Post by Gregory Lancaster

Post by J.D. Grimes

_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers