Click function show(), after next click it disappears - php

So I'm experiencing problem - I got a function, when someone clicks a menu, it will show a div tag. See here -
$("a#cat").click(function() {
$("div#categoryBox").show();
return false;
});
So far everything works great, the div content shows up excellent, but the problem is that inside div content there are buttons (a tags), delete and edit, when I click one of these buttons, the div tag hides. The button links are -
<a href="?action=edit&id=<?php echo $id; ?>"> and <a href="?action=delete&id=<?php echo $id; ?>">
If I press one of these links, the div content automatically hides, and I need to press again the a button with id #cat. Is there any way to make it stay, unless I press different menu link or refresh page?
If you need any additional information, please ask.

May be the page is reloaded when you click on edit/delete links, so you think the div gets hidden. If you are doing any client side implementation on edit and delete click then you should make sure to prevent the default behavior or those links. Try this.
$('#categoryBox a').click(function(e){
e.preventDefault();
});

There are several ways to do this. Perhaps the easiest is to re-show the div when the page loads if certain conditions are met.
If you want to display the div every time the url is ?action=edit or ?action=delete, use this:
$(function () {
if (/\baction=(edit|delete)\b/.test(location.search)) {
$("div#categoryBox").show();
}
});
Or, you could append a hash parameter when you want to show the div:
edit
delete
$(function () {
if (location.hash === "#showCategoryBox") {
$("div#categoryBox").show();
}
});

Related

Is it possible to REFRESH a div without LOADING a page into it?

SOLVED -SORT OF---
window.location.reload(); in my code where i have the submit button close the div, worked.
// Collapse Panel on submit
$("div#panel").on('submit', function() {
window.location.reload();
$("div#panel").slideUp("slow");
$("#toggle a").toggle();
return false;
});
I keep searching for this answer and i get more frustrated every time.
Scenario:
i have a div that slides down for login purposes (jquery, css).
the login form itself in that div is initially dynamically created with PHP ( by if else statement based on value in SESSIONS - PHP echo loads the form).
3.if i put in the correct login and click submit, i have the div close (jquery on(submit)) so that the user can see the page. The page loads dynamic content from a php file using xajax/PHP functions.
4.PROBLEM - if i click to re-open the div it still shows my login form.(because the page has not reloaded). BUT my on page navbar done with xajax/PHP reloads to show the correct menu functions.
my problem is that i want the div to REFRESH after submission, or on any event change if that helps, so that it sees the NEW SESSION data and adjusts accordingly. I DO NOT WANT TO LOAD ANOTHER HTML PAGE INTO THE DIV, so load(whatever.html) IS NOT WHAT I WANT.
if i refresh the whole page using f5 after i login, and pull down the div, the login form will not be there because my SESSIONS now states that im a logged in user and no longer a guest that needs to login. and the div isnt just for login, it will house other links and shortcuts, so it would be used while your logged in throughout your visit.
index.php
<div id="left" class="left">
<?php if(isset($_SESSION['admin'])){
if($_SESSION["admin"] == "1") {
echo "YOU ARE LOGGED IN AS AN ADMIN";
}
}
if(isset($_SESSION['userID'])){
echo "YOU ARE LOGGED IN AS A USER";
}
else { echo '<form class="clearfix" id="loginForm" name="loginForm" action="javascript:void(null)" onsubmit="xajax_login(xajax.getFormValues(\'loginForm\'));">';
slide.js
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
// Collapse Panel on submit
$("div#panel").on('submit', function() {
$("div#panel").slideUp("slow");
$("#toggle a").toggle();
return false;
});
// if there is an error, close div and allow link on main content page to be clicked to reopen div
$("#content").on('click', "#tryAgain",function() {
$("div#panel").slideDown("slow");
$("#toggle a").toggle();
}); });
This is very easy to be acomplished even with pure JavaScript, no need of jQuery.
Just make one JS function that resets the input fields in the form or the div and call it every time when you need to "refresh" the content of the div or the form.
If you paste the div definition we can give you more specific advice accompanied with JS code that actually do this.
Well, if you load values into the form when the page loads, it makes sense they'd be there when the form is submitted via ajax. What you really need to do is clear the form values when the div is 'closed' in the first place.
$(#formselector).on('submit',function(){
//your ajax login and page load code
//then:
$('#formselector').find('input').attr('value','');
});
UPDATE
Based on your comment, what you really need to do is check to see if the user is really logged in before popping the form in the first place. There are a few techniques to do this, but what I'd recommend is in your php script that your form submits to, before processing the login, check your $_COOKIE variable to see if the user is recognized. This also requires modification of your login script to make sure it stores user data in a $_COOKIE, similar to how it stores data in the &_SESSION variable.
At that point, your php script will deliver two different responses based on the user state, and your javascript code that launches the form drop down would check to see if it gets the "user not found" response before showing the login form.
To just refresh the content of a particular div, use the follwing:
$("#abc").load(location.href + " #abc>*", "")
where #abc is for the div to be targeted.

how to inactive a link using jquery

I have jQuery site here. I have 4 links with in ul tag. Within this link, I need to inactive a link but have to show. See below:
<div class="over hide" id="waterSecondOver">
Overview
Local Area
Floor Plans
<a href="javascript:void(0);" id="chancingallery" >Gallery</a>
</div>
I have a click function on the above links (except the 4th one i.e gallery). See the code
JQR('#waterSecondOver a').click(function() {
// my code
});
Here I need to show the gallery link, but nothing happens when click on the gallery (i.e must be inactive link or what I say it's functionality is only show the link as "gallery ")
I think it's clear . Please help me
JQR('#waterSecondOver a').click(function(event) {
event.preventDefault();
});
Don't set hrefs in the anchor tags to javascript:void(0); - this is messy because it's needless repetition. With jQuery, it's possible to use return false; in your event callback to avoid the default click event taking you to a new page or the current one. While this is the easiest method, it's not always the best. See this article for more info:
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
But you definitely don't want to be setting href manually.
I would simply change the class of the anchor(lets say class="active") and everytime onclick check for that "active" class. If the class is "active" do nothing else DO SOMETHING.
You can do this way for simplicity...
JQR('#waterSecondOver a').click(function(event) {
if(JQR(this).attr('id') == "chancingallery"){
// inactive all links except the one you dont want
}else{
// whatever you need....
}
});

refreshing php page with button

i have simple coding problem. i have created a page with textbox and share button. the page also contains one Points up button.
i had a problem with that points up button that when the user click on that button and refresh the page ... a window ask for resend of information
for that i have used following code which works fine.
`header('Location: samepageurl.php');
exit;`
but the problem with above code is when user scroll down page and click the button. the page automatically scrolls up. and user have to manually scroll it down.
what i want is the page should refresh but it should be on the same location where it was.
if the problem is still unclear please refer the following images
You can set a fragment identifier.
eg:
<a name="points_up"></a> <!-- this needs to be near that button, the page will scroll exactly where the element is -->
and redirect him to:
header('Location: samepageurl.php#points_up');
die;
Mihai answer is correct, but as you said that fragment identifier is not working because each user has points up button, you can pass user id as a fragment identifier and make a hidden(display : none;) <a> tag and pass the user id in front of each user...
Like this:
You can set a prefix before a user id too (optional)
<a name="pu12345" style="display: none;"></a>
<?php
header('Location: whatever.php#pu12345');
exit;
?>
You can send the request via ajax instead relying on the normal form submission. That will not affect the scrolling of the current page.
Add this line at the bottom of your page before the the <\body> tag
<button id="PageRefresh">Refresh a Page in jQuery</button>
<script type="text/javascript">
$('#PageRefresh').click(function() {
location.reload();
});
</script>

Prevent jquery ui dialog boxs from poping up multiple times on click

I was wondering is it a simple bug in the framework or maybe I'm doing something wrong but I have an applacation were a user clicks a link and a ajax call is made on load of the dialog box but I notice more then one dialog box pops up? The link gets clicks and you see 1-10 boxes stacked ontop of each other! I do not know what is going on. The links come from a php loop that generates anywhere from 1-1000 links that all have the function on mousedown triggering a function that calls for the jquery ui dialog to take the value of the id and make a ajax call with that to return content for that dialog box.
/// php
while($row = mysql_fetch_array($sql3)){
$clutchs[] = "
<li id=\"".$row['id']."\" class=\"ui-widget-content\" >
<a id=\"".$row['id']."\"
href=\"#\" onclick=\"return false\" onmousedown=\"popup('c:".$row['id']."')\"
title=\"".$row['fs']."\"
class=\"cer\">".$row['size']." car worth</a>
</li>
";
}
// jquery
function popup(a){
$.fx.speeds._default=500;
$(".popup").dialog({
autoOpen:!0,
show:"blind",
hide:"explode",
stack:!1
});
$(".popup").html(
'<center><img src="source/images/loaders/loaders(1).gif"></center>'
);
$.post("....",".....="+a,function(a){
$(".popup").html(a)
})
}
you might have more than one element with the class popup

Jquery on click ads a variable to the link

My blog has its posts links. What I need is code that will do this: when a user clicks on a post link, a parameter will be added to the link which I'll use with a get function on the other page.
This is my link - link which is visible and indexed by google:
my post link
When a user clicks on it, I need a way to add ?car=type to the link, http://www.mysite.com/post1/?car=type.
I'd like to do this with jQuery.
P.S.
I can't just add my car variable to the links in normal html, becouse Google will index them badly, the variables change every day and I'd get pages not found all over the serps.
Any idee?
Ty!
Well...
$(document).ready(function() {
$("a").click(function() {
this.href += "?car=type";
});
});
Live test case: http://jsfiddle.net/y6PrF/
If you mark the desingated links in a way such as a class (say addType):
<a href="http://www.mysite.com/post1/" class="addType" >my post link</a>
you can do something like this on document load, no need to wait for click to do it:
$(function() {
$("a.addType").attr("href",function() {return this + "?car=type";});
});
Here's a jsfiddle example: http://jsfiddle.net/nbKPu/

Categories