mcfmullen

This is far more complex than it seems so let me give you some background: My wordpress blog is currently set where I have a custom page that displays only posts in a given category. Each post has a toggle button (i.e. "like"). When the toggle button is pressed, the post hides (the ENTIRE div is hidden with title and all post content) and sends values to my database. This works as desired. The page is also set to display 10 posts per page. If I have 11 posts, the 11th is pushed to page 2. This works as desired. The problem is that when a post is toggled (let's say post 3), I am left with a total of 9 posts on this page, with post 11 remaining on page 2. What I want to have happen is that when post 3 is toggled, post 11 should carry onto page 1, with page 2 essentially disappearing (since there are no posts to display there). For illustration purposes: Page 1 displays Posts 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 Page 2 displays Posts 11...and so on. If Post 3 is toggled: Page 1 displays Posts 1, 2, 4, 5, 6, 7, 8, 9, 10, 11 (notice post 3 is gone) Page 2 displays Posts 12, 13, 14, etc (unless there is nothing after post 11 in which case Page 2 disappears) Clearly I need to implement some sort of call to refresh my pagination as posts are toggled... but how to do that within wordpress is quite an obstacle. page.php: <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array( 'category_name' => 'post', 'paged' => $paged, 'posts_per_page' => 10 ); query_posts($args); while (have_posts()) : the_post(); ?> ..........the posts are displayed............. <?php endwhile; ?> <div class="navigation"> <?php include('wp-pagenavi.php'); if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?> </div> </div> toggle.js $(document).on("click", ".toggle", function(){ postID = $(this).attr('id').replace('toggle_', ''); // Declare variables value = '0'; myajax(); return false; }); function myajax(){ // Send values to database $.ajax({ url: 'check.php', //check.php receives the values sent to it and stores them in the database type: 'POST', data: 'postID=' + postID + '&value=' + value, success: function(result) { $('#post_' + postID).toggle(); } }); } Would I have to replace the wordpress pagination with some jquery pagination? Or is there another way?

For the life of me, I can't get this code to work. I have a pair of radio buttons attached to each post. The user selects one of the two radio buttons to choose whether he likes or dislikes it. I am not using checkboxes because I have switches that hide all liked or hide all disliked posts. Anyway, I have the following code which DOES work but only displays the value of the radio button in a hidden div below the each post. Each post is pulled from my database.. <?php $data = mysql_query("SELECT * FROM Contests"); while($row = mysql_fetch_array( $data )){ ?> <script type="text/javascript"> $(document).ready(function() { $("input[name*='pref_<?php echo $row['contestID']; ?>']").click(function() { var defaultValue = $("label[for*='" + this.id + "']").html(); var defaultm = "You have chosen : "; $('#Message_<?php echo $row['contestID']; ?>').html('').html(defaultm + defaultValue + ' | Value is : ' + $(this).val()); }); }); </script> <div id="contest_<?php echo $row['contestID']; ?>" class="post"> <div id="contest_<?php echo $row['contestID']; ?>_inside"> <b><?php echo $row['Title']; ?></b><br> Expires: <?php echo $row['Exp']; ?><br> <ul id="listM"></ul> <form id="form_<?php echo $row['contestID']; ?>" method="post"> <fieldset> <div class="left"><p><input id="like_<?php echo $row['contestID']; ?>" type="radio" name="pref_<?php echo $row['contestID']; ?>" value="1" /> <label for="like_<?php echo $row['contestID']; ?>">Like</label></p></div> <div class="right"><p><input id="dislike_<?php echo $row['contestID']; ?>" type="radio" name="pref_<?php echo $row['contestID']; ?>" value="0" /> <label for="dislike_<?php echo $row['contestID']; ?>">Dislike</label></p></div> <hr /> </fieldset> </form> </div> </div> <div id="Message_<?php echo $row['contestID']; ?>"></div> <?php } ?> The following code DOES NOT work. It is my failed attempt to use ajax to send the radio button value over to check.php for insertion in my database. I'd also like a message to display inside my #Message div to confirm success of database insertion. Unfortunately, nothing happens with m code: <?php $data = mysql_query("SELECT * FROM Contests"); while($row = mysql_fetch_array( $data )){ ?> <script type="text/javascript"> $(document).ready(function() { $("input[name*='pref_<?php echo $row['contestID']; ?>']").click(function() { var defaultValue = $("label[for*='" + this.id + "']").html(); var defaultm = "You have chosen : "; var contestID = <?php echo $row['contestID']; ?>; var value = $('input[name=pref_<?php echo $row['contestID']; ?>]:checked').val() $.ajax({ type: "POST", url: "check.php", data: "userID="+ userID +"& contestID="+ contestID +"& value="+ value, success: function(){ $('#Message_<?php echo $row['contestID']; ?>').html('').html(defaultm + defaultValue + ' | Value is : ' + $(this).val()); } }); }); </script> <div id="contest_<?php echo $row['contestID']; ?>" class="post"> <div id="contest_<?php echo $row['contestID']; ?>_inside"> <b><?php echo $row['Title']; ?></b><br> Expires: <?php echo $row['Exp']; ?><br> <ul id="listM"></ul> <form id="form_<?php echo $row['contestID']; ?>" method="post"> <fieldset> <div class="left"><p><input id="like_<?php echo $row['contestID']; ?>" type="radio" name="pref_<?php echo $row['contestID']; ?>" value="1" /> <label for="like_<?php echo $row['contestID']; ?>">Like</label></p></div> <div class="right"><p><input id="dislike_<?php echo $row['contestID']; ?>" type="radio" name="pref_<?php echo $row['contestID']; ?>" value="0" /> <label for="dislike_<?php echo $row['contestID']; ?>">Dislike</label></p></div> <hr /> </fieldset> </form> </div> </div> <div id="Message_<?php echo $row['contestID']; ?>"></div> <?php } ?> So, does anyone have any idea what's wrong with my code? I know my code is wrong for the success message as I want the message to display the text echoed in check.php My check.php file simply echos the $_POST variables to confirm that they have been passed. Your help is greatly appreciated!

My question is a little more involved than appears n the surface so I am providing you with my code so you can test this yourselves: I have two checkboxes: Show Likes and Show Dislikes which when deselected, hide all likes or all dislikes. Every post has a pair of radio buttons: like and dislike. The user makes his selection for each post and then can use the checkboxes to hide/show his dislikes and likes. This works quite well in my code. My code also sends the likes/dislikes to my database (check.php) so I can implement a memory of each like/dislike. This isn't for now, but the ajaxdiv simply displays the user's selection so I know it is actually sending info to check.php. My problem is, when either checkbox is deselected and the user makes a radio button choice on a post, that post does not hide automatically. I need to have ajax implemented so that when I deselect Show Likes and then like a post, that post should disappear right away instead of forcing me to double click the checkbox again. You'll see what I mean if you try it out. So can anyone help me ajaxify my radio buttons? FYI: Why am I not using jQuery? Because my simple mind can't wrap around it and no one is able to give me a working translation of my code. I'm not asking for handouts, but I just don't understand jQuery, the manual makes no sense to me. test.php: function toggleLayer(formObj) { var showLikes = document.getElementById('show_likes').checked; var showDislikes = document.getElementById('show_dislikes').checked; var postIndex = 1; while(document.getElementById('post_'+postIndex)) { var liked = radioGroupValue(formObj.elements['like_'+postIndex]) var display = ((!showLikes && liked==='1') || (!showDislikes && liked==='0')) ? 'none' : ''; document.getElementById('post_'+postIndex).style.display = display; postIndex++; } } function do_submit() { document.forms['myform'].submit(); } </script> <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function ajaxFunction(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } var entered=null; var arr=document.getElementsByName("like_1"); for(var i=0;i<arr.length;i++){ if(arr[i].checked){ entered=arr[i].value; break; } } var queryString = "?entered=" + entered; ajaxRequest.open("GET", "check.php" + queryString, true); ajaxRequest.send(null); } //--> </script> </head> <body> <form name="myform" action="check.php" method="post"> <fieldset> <legend>Unhide Layer Form</legend> <ul> <p><input id="show_likes" name="show_likes" type="checkbox" value="1" checked="checked" onclick="toggleLayer(this.form);" /><label for="b1">Show Likes:</label> </p> <p><input id="show_dislikes" name="show_dislikes" type="checkbox" value="1" checked="checked" onclick="toggleLayer(this.form);" /><label for="b1">Show Disikes:</label> </p> </ul> <label>Email:</label> <input type="email" /> </fieldset> <br><br> <fieldset> <legend>Posts</legend> <div id="post_1" class="post"> <b>Post #1</b><br> Content of post #1<br> <p><input type="radio" name="like_1" value="1" onclick="ajaxFunction();" onchange="ajaxFunction();" /><label for="like1a">Like</label></p> <p><input type="radio" name="like_1" value="0" onclick="ajaxFunction();" onchange="ajaxFunction();" /><label for="like1b"> Dislike</label></p> </div> </form> </fieldset> <div id='ajaxDiv'>Your result will display here</div> </body> For the curious, check.php: <?php echo 'Value selected: ' . $_GET['entered']; ?>

FYI, this is my first attempt at ajax so be kind.... For more info: The goal is to have two choices: Like and Dislike for each post in a blog. The value of this choice is to be store in a database so that when the user returns, his choices are recalled into those same radio buttons. The reason? The user can then choose to hide all liked and/or hide all disliked posts.

Alright so I have a pair of radio buttons that are to store their values into a database in order to retain their state when the user returns to the site in the future. For now, my code is just testing to make sure the values are being stored in the first place, into a variable. The thing is, whether the user chooses button 1 (like) or button 2 (dislike) the value is always returned as like. Can anyone help me figure out why dislike isn't being returned? Here is my form.php: <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function ajaxFunction(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } var entered = document.getElementById('entered').value; var queryString = "?entered=" + entered; ajaxRequest.open("GET", "check.php" + queryString, true); ajaxRequest.send(null); } //--> </script> <form name="myform" action="check.php" method="post"> <fieldset> <legend>Posts</legend> <div id="post_1" class="post"> <b>Post #1</b><br> Content of post #1<br> <p><input type="radio" id="entered" name="like_1" value="like" onclick="ajaxFunction();" onchange="ajaxFunction();" /><label for="like1a">Like</label></p> <p><input type="radio" id="entered" name="like_1" value="dislike" onclick="ajaxFunction();" onchange="ajaxFunction();" /><label for="like1b"> Dislike</label></p> </div> </fieldset> </form> <div id='ajaxDiv'>Your result will display here</div> and this is check.php: <?php // Retrieve data from Query String $entered = $_GET['entered']; // Escape User Input to help prevent SQL Injection $entered = mysql_real_escape_string($entered); echo $entered; ?> So basically $entered is only storing "like" no matter which radio button is selected and changing the selection should change the value stored, but that doesn't happen either. Am I missing something?

Thank you, this helps tremendously!

I was suggested that perhaps localStorage might be a better option but no method of implementing it seems to work. All it does is kill my checkboxes. In your example, how would the radio buttons send their values to the database? I can see how their value are set from the database. does toggleLayer send as well as receive?

PERFECT! This is exactly what I was trying to accomplish but now the hard part, how am I to make it so the information is remembered when the user returns to the website at a later date?

rebuild = build. You can't build through examination without first taking the code and examining it which is exactly what I have done above!

I'm not ripping pff anyone. The rating system is a plugin for wordpress. There's no ripping off there. You are saying that I want to clone his site. I clearly do not want to do that. I want users to select posts they like or dislike, not contests they've entered/ignored. I simply want to build a similar system. I have given the code I've found to help people get an idea of what is at play. I don't care if the coding is the same, nor if it uses the same code. I simply want to be pointed in the right direction as to how to build such a thing. You would have known that had you read my post in the first place. Please focus on being helpful rather than trolling me for stealing when I clearly am not, nor have any interest in doing such a thing.

So I want to have a pair of radio buttons: 'Like' and 'Dislike' that the user can select. Each pair of radio buttons is to be attached to a unique post-id div. I also want a pair of check boxes: "Hide Liked" and "Hide Disliked". What I want to do is have the user be able to select whether he likes or dislikes each post and when he checks off 'Hide Liked', all the posts attached to the radio buttons marked 'Like' disappear. The same for "Hide Disliked". This is the code I have so far but the problem is that the checkbox turns the radio button On and Off and obviously, I want them to work individually so that when the box is checked, the radio buttons remains On or Off as per the user's selection. Furthermore, how can I get the javascript to take into account all Div IDs (they will be numbered) that get added in the future as new posts are made/old posts are deleted? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Unhide on checkboxes/radio buttons</title> <script type="text/javascript"> function toggleLayer(val) { if(val == 'on' || val === true) { document.getElementById('a1').checked = true; document.getElementById('layer1').style.display = 'block'; } else if(val == 'off' || val === false) { document.getElementById('a2').checked = true; document.getElementById('layer1').style.display = 'none'; } } </script> </head> <body> <form action="" method="post"> <fieldset> <legend>Unhide Layer Form</legend> <ul> <li><label for="a1">On</label> <input id="a1" name="switcher" type="radio" value="off" checked="checked" onclick="toggleLayer(this.checked);" /> <label for="a2">Off</label> <input id="a2" name="switcher" type="radio" value="off" onclick="toggleLayer(!this.checked);" /></li> <li><label for="b1">Check Me:</label> <input id="b1" name="b1" type="checkbox" value="off" checked="checked" onclick="toggleLayer(this.checked);" /></li> </ul> </fieldset> </form> <div id="layer1">You can now see this.</div> </body> </html>

That is the definition of reverse engineering - to take something you don't understand and rebuilding it into something you can use. Regardless of that, how is your comment helpful?

Okay, I'm trying to reverse engineer a feature on a website I found - the webmaster is not replying to me. The site in question is http://www.win-free-stuff.ca/new-contests and in particular I am trying to build the Show Entered and Show not interested buttons of the site which work in tandem with the checkmarks and X's next to each post/contest. I have figured out that he is using either jQuery or mootools to accomplish this probably with php and MSQL. I've also found my way into his css to build the buttons. My problem is in the coding of the javascript to get the bottons to actually function. This is what I have so far for the Hide entered and Hide all not interested: `<form id="compFilterForm" action="http://www.win-free-stuff.ca/new-contests" method="POST"> <div id="filterInputs"> <input id="cmFilterDisplayOption1" class="cmFilterDisplay hidden" type="checkbox" name="cm_filter_display[]" value="entered" checked /> <input id="cmFilterDisplayOption2" class="cmFilterDisplay hidden" type="checkbox" name="cm_filter_display[]" value="notInterested" checked /> <a id="filterEntered" class="filterEntered filterEnteredChked" href="#" title="Click here to show the competitions you’ve marked as entered" target="_self"></a> <a id="filterNotInterested" class="filterNotInterested filterNotInterestedChked" href="#" title="Click here to show the competitions you’ve marked as not interested" target="_self"></a> <a id="compFilterHelp" class="help helpAlt" href="#" title="Help" target="_self"></a> </div> </form> ` And this is the entered/not interested for the individual posts: `<form id="compListing" class="preferences" action="" method="POST"> <div class="competitionBox"> <div class="compPref"> <a class="updatePrefEntered entered" href="#" title="Mark as Entered" target="_self"> <input class="hidden" type="text" name="cm_user_pref_tick" value="0" /> </a> <a class="updatePrefNotInterested notInterested" href="#" title="Mark as Not Interested" target="_self"> <input class="hidden" type="text" name="cm_user_pref_cross" value="0" /> </a> </div> </div> </form> ` So is there a $_GET function I should be calling? Is it jQuery or is it Mootools or is it php and MySQL? Can someone at least point me in the right direction if you can't help me here? Ideally this whole thing must also remember the entered/not interested every time the user returns as well, would this require cookies? The goal is to allow users to see only posts they like, only posts they dislike (they might change their minds), see only posts they haven't decided on, or see everything. I realize I may be in over my head but I kow someone here can point me in the right direction. Thanks. You can see what I've put together at www.mcfilmmakers.com

Seemed pretty clear to me that I was having problems with one particular line of code. In any case, it was a problem that persisted for 2 weeks (started in another topic) to which I've never had a response. I'm sorry for my comment, I didn't mean to come off as ungrateful. The people here are, in fact, extremely helpful and deserve a lot more credit than are given.

echo "<td>".$selected[0]->requiredLevel ."</td>"; I'm dismayed at the lack of help, but I did manage to get an answer elsewhere. Thank you anyway for looking!