WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery Voting
Confirmation before vote is cast? (13 posts)

  1. Wookiee
    Member
    Posted 2 years ago #

    Hey Shauno.

    I have tried many things and I am having a brain freeze at the moment. Could you say if it is possible to have a confirmation popup before the actual "vote" is cast.

    Im only looking for this option with the like/dislike options being used.

    The reason I think this is important, is for when the settings are 1 vote per user, and the user makes a silly mistake and clicks somewhere he didnt want to.

    A Simple: Are you sure? Yes/No thing would be great.

    Thanks in advance man, I really appreciate it

    http://wordpress.org/extend/plugins/nextgen-gallery-voting/

  2. shauno
    Member
    Plugin Author

    Posted 2 years ago #

    Hi Wookiee

    Thanks for the suggestion. I will add it to my to-do list. In the meantime, you can add a quick hack to the code if you want.
    Wrap the jQuery click event in a javascript confirm() call.

    Before line 17 of js/ajaxify-likes.js, add:
    if(confirm('Are you sure you want to vote for this image?')) {

    and then close it after line 55 with a simple closing brace:
    }

    It's not a pretty UI or anything, but that's going to take a lot more work to integrate :)

  3. Wookiee
    Member
    Posted 2 years ago #

    Thanks Shauno.

    That helps for the moment. There is an issue with this however, the loading.gif image keeps showing when you "cancel" instead of confirm.

    Other than that, it works fine.

    I will play around a bit and see what i can come up with, this is where i am stuck at at the moment. I see you are from Cape Town? Go stormers! lol

    Ons het hulle lekker a tweede les geleer die naweek he!!!

  4. Wookiee
    Member
    Posted 2 years ago #

    Ok, i've figured it out and it seems to be working fine.

    Added this:
    if(confirm('Are you sure you want to vote for this image?')) {

    before this:
    jQuery.ajax({

    Moved This:
    container.find('img.nggv-star-loader').show();

    To below this:
    if(confirm('Are you sure you want to vote for this image?')) {

    Closed the If statement on line 59 NOT line 55:
    }

    Final code:

    if(confirm('Are you sure you want to vote for this image?')) {
    container.find('img.nggv-star-loader').show();
    jQuery.ajax({

    Now going to style it (or die trying!!) will post the results here, but it might take some time.

    Thanks again Shauno!

  5. shauno
    Member
    Plugin Author

    Posted 2 years ago #

    I missed the loading gif. Good find.
    Unfortunately you aren't going to be able to style the confirm box. It's built into the browser.
    The alternative is to implement jQuery UI (or something similar), but then you need to write the code to execute for the buttons. It's not terribly difficult, but a little out side of the scope of the help forum right now :)

    I might live in Cape Town now, but I was born in Sharks country. Black and White for life :)

  6. Wookiee
    Member
    Posted 2 years ago #

    Yeah I have been busy working on this the whole fricking day so far.

    WordPress has got Jquery UI included, but im trying to enqueue the javascript files for it in my child theme. Its not working at the moment, even if i include the javascripts and css manually (for test purposes).

    I want it to work first ANYWHERE on the bloody page lol. Then ill need to figure out how to implement it into the ngg-voting.php file.

    Still busy... and great, now that i've confessed supporting Province... i guess this is the end of the line for getting any advise!! lol

    I wish i could show you why this is all so important, but im scared someone might nick my idea of the site. You might even like it..if i can only get it to work!!

  7. shauno
    Member
    Plugin Author

    Posted 2 years ago #

    Ok, step by step, here's how it's done :)

    Add the following into your theme's functions.php file:
    wp_enqueue_script('jquery-ui-dialog');

    Roll a jQueryUI theme and include it's css in your theme (I just added an @import into the default style.css)

    Replace your nextgen-gallery-voting/js/ajaxify-like.js with the code from here: http://pastebin.com/TacJqCNc

    Let me know how that goes

  8. Wookiee
    Member
    Posted 2 years ago #

    Hey Shauno

    I have tried this before as well:

    wp_enqueue_script('jquery-ui-dialog');

    No javascript gets into the page that way. It simply doesnt work! Im on a genesis child theme (still reading for this solution)

    The JQuery UI dialog requires the following 3 javascript files and 1 css to work standalone local server. (which works perfectly)

    1) jquery-ui.min.js
    2) jquery.min.js
    3) custom.js (it contains the following code)

    [ Moderator note and edited, please use backticks or the code button for posting code samples. ]

    $(function() {
    
    	$("#box").dialog(
    					 	{
    							title: 'Voting',
    							width: 400,
    							height: 200,
    							modal: true,
    							resizable: false,
    							buttons: [
    									  	{
    										text: 'Yes',
    										click: function()
    													{
    					alert('You just voted');								$(this).dialog('close');
    													}
    										},
    									  	{
    										text: 'No',
    										click: function()
    													{
    													$(this).dialog('close');
    													}
    										}
    									  ]
    						}
    					);
    
    });

    4) jquery-ui.css

    This is what i have tried so far:

    1) Added the 4 files into my template theme with:
    wp_enqueue_script('custom-script_1', get_home_url() . '/wp-content/plugins/nextgen-gallery-voting/js/jquery.min.js');
    wp_enqueue_script('custom-script_2', get_home_url() . 'wp-content/plugins/nextgen-gallery-voting/js/jquery-ui.min.js');
    wp_enqueue_script('custom-script_3', get_home_url() . 'wp-content/plugins/nextgen-gallery-voting/js/custom.js');
    wp_enqueue_style('custom-style_1', get_home_url() . 'wp-content/plugins/nextgen-gallery-voting/css/jquery-ui.css');

    Result:
    They all get included properly BUT there is a conflict with jquery.min.js, once i remove that, no conflict is detected. But clearly on local tests, it is required for jQuery UI

    2) I added a <div id="box">Are you sure you want to vote for this image</div>

    The result:
    The div appears fine on the gallery page, but its content is not being influenced by the javascript (or css for that matter).

    I will link you to the site im working on. None of the above has been done LIVE, im ONLY doing this locally first. And please bare in mind, its still under construction. LOTS of work needed, but same as you man, need to find the time to work on this. NOTE ITS ONLY dummy content at the moment too!! Need to get in touch with the rugby unions, supersport haven't responded so far...

    http://www.myboksquad.co.cc/

    I have tried your recommendation above, but nothing changed. I will go about this again step by step slooooowly and let you know how it goes. I still need to reference your ngg-vote-confirm div somewhere... I tried to change my id="box" to id="ngg-vote-confirm" but that didnt work either... Think its all just javascript conflicts at the moment... SIGH lol

  9. Wookiee
    Member
    Posted 2 years ago #

    Oh voting is currently disabled as well, as i said still working on structure and populating the content, but the voting works perfectly as is.

    So if you cant see the voting oh wait ill enable it anyway....might be worth the tests

  10. Wookiee
    Member
    Posted 2 years ago #

    Ok, voting is enabled only for jersey no 1, results can be seen on the results page (still working on short codes for the results) but thats another day's issues! I've worked my way around that for the moment

  11. Wookiee
    Member
    Posted 2 years ago #

    Omg Shauno, wait, I got the javascript loaded, its just not in the correct area.

    It loads it in the footer when using:

    wp_enqueue_script('jquery-ui-dialog');

    Thats a bit strange i'd say.

    Progress
    1) Get the javascript loaded > Check!
    2) Get the stylesheet loaded > in progress...
    3) Change ajaxify-likes.js > not there yet....
    4) run some more tests > do i really have to...

  12. Wookiee
    Member
    Posted 2 years ago #

    Solved it Shauno. I had to include the following code to get it to work for the genesis child theme.

    function script_managment() {
    	  wp_deregister_script( 'jquery' );
    	  wp_deregister_script( 'jquery-ui' );
    	  wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' );
    	  wp_register_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js' );
    	  wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array( 'jquery' ), '4.0', false );
    	  wp_enqueue_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js', array( 'jquery' ), '1.8.16' );
    }
    
    add_action( 'wp_enqueue_scripts', 'script_managment', 99);

    Thanks a million for the javascript code. Seriously man you rock.

    Progress
    1) Javascript > check
    2) Stylesheet > check
    3) ajaxify-likes > check
    4) tests > success!

    Mark as resolved?

  13. shauno
    Member
    Plugin Author

    Posted 2 years ago #

    Ok, reading through your last couple posts hurt my head a bit :)

    You don't need to worry about adding your own div for the confirmation etc, the ajaxify-likes.js loads everything dynamically.

    To re-iterate:

    1) Get the dialog JS loading. You don't have to worry about loading jQuery etc, as WP does that for your with the wp_enqueue_script function. Seems you have that working now, so lets move on.

    2) Stylesheet. This is simple. Go to http://jqueryui.com/download and download the default version of jQuery UI. You don't need to customise it, as we are only interested in the CSS that will come with the download. Copy the CSS directory to your theme, and @import the [path-to]jquery-ui-1.8.20.custom.css into your main stylesheet.

    3) Copy and paste over your ajaxify-likes.js with the code in the link provided earlier. Couldn't be simpler :)

    4) Enjoy your popup confirmation for voting.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.