I tried to make a function which would accept a number when called, and hide any loop generated elements on page with the ID of #sub + the number provided.
<script>
function toggleryhma($id) {
$("#sub"+$id).toggle();
$("#ryhmanum"+$id).toggle();
}
</script>
The element I'd need to click to call the function is...
<span class=ryhmaspan onclick="$(toggleryhma('<?php echo $ryhmanum;?>');">
For some reason this doesn't seem to do anything. I basically have lots of images with the ID's "#sub1", "#sub2", "#sub3", etc...
Same with the #ryhmanum. I want to use those ID's to only toggle the items under the span I'm clicking.
The problem is in your onclick. Your onclick should be like below.
onclick="toggleryhma('<?php echo $ryhmanum;?>')"
Related
I have a PHP script that queries a database and returns the rows as li elements to a div in a jQuery Dialog. It does this by building an array in the PHP while loop that processes the query row responses. So far, so good. It displays a set of rows inside the Dialog in a div with an id=dialogResponse . It is the first two parts (2 rows of code) of the array instruction below. BTW, it is just li elements - there is no ul.
Now, I want to put a jQuery Button in each li response to give the user an action choice to inactivate/pause that posting. I'm pretty new at this, and I can't get a button to appear or anything to work. I get an Internal Server Error message so I can't tell if it is a selector problem, php syntax, or something else.
How do I get a jQuery button at the end of each li that will be the trigger point for a function that takes action on that row in the database? The event.preventDefault is a placeholder for a future function that will do a MySQL UPDATE on the selected streetAddress and city. Here's the code.
$messages[] = "<li>
$storedStreetAddress, $storedCity
"<script type="text/javascript"> $(function() { $( "#dialogResponse li")
.button( label: Pause posting).click(function( event ) event.preventDefault();});});
</script>"
</li>";
Please be specific and code helps a lot. I don't follow general instructions well in this area.
Why does the <script> have to be printed in with the PHP? Why not have it included with in a JS file? For the button, why not create a standard HTML [or whatever your preference] in each <li> and have jQuery target them for the actions? - You will need an <a>, <input>, <button>, etc. for the .button()
I have searched before posting but none of the posts are that relevant (saying that i am new to Jquery).
My problem is when i click the "add friend" button it wont fire upon a single click but it needs a double click.
These are the relevant sections of code:
Setting the div:
$fField = <div style="display:inline; border:#CCC 1px solid; padding:5px; background-color:#E4E4E4; color#999; font-size:11px;">
Add Friend
</div>;
Javascript:
function friendArea(x){
//alert(x);
if($('#'+x).is(":hidden")){
$('#'+x).slideDown(200);
} else {
$('#'+x).hide();
}
$('.friendSlide').hide();
}
the message to display (the one which needs 2 clicks to be displayed)
<div class="friendSlide" id="addFriend">Are you sure?</div>
Any help would be much appreciated! Oh and I'm using the latest version of jQuery.
Hmm, well, it looks like you are showing and hiding your div at the same time:
HTML:
<div class="friendSlide" id="addFriend">Are you sure?</div>
JS:
function friendArea(x){
//alert(x);
if($('#'+x).is(":hidden")){
$('#'+x).slideDown(200);
} else {
$('#'+x).hide();
}
$('.friendSlide').hide();
}
You call friendArea('addFriend'), which is supposed to slideDown your div, but at the end of the function you hide .friendSlide, of which your div is also a class. You basically hide it every time. This can't be what you want.
Comment out that line and it works: http://jsfiddle.net/Ggdhp/
Of course, you might have had a different reason for that, but I think you are getting some divs and classes mixed up.
Note:
I would also suggest that you don't use inline css or javascript. It always makes debug much more difficult, and you miss typos as you end up having to put everything on a single line and escape quotes. For instance, color#999; in your div style is missing a colon.
I'm not entirely sure that's the relevant part of the code, but if you want to learn how to bind functions to click/doubleclick/etc:
http://api.jquery.com/category/events/mouse-events/
I assume you have a button/link somewhere that has something to the extent of:
Add Friend
What you would want to do instead is give that button a class indicating that it's an add friend button, and use jQuery to add the double click function to it.
Add Friend
$('.addFriend-button').click( function(e) {
friendArea( $(this).data('friendName') );
} );
This will cause your function to fire when the button is double clicked, not single clicked. It also allows you to only have to write 1 function, and you can pass the relevant data in using the data-* attributes on the link element.
if you want to run any code on double click over an element use jquery like this,
$('#target').dblclick(function() {
alert('Handler for .click() called.');
});
and one more thing use jquery toggle to display and hide elements like below, On your function
if you are using class name of selector use the selector like below (use .) in case of id use # with id name like above code
$('.target').toggle();
if double clicks works for you to use below code, it converts the single click to double click by jquery. Hopes this will help you
$('#target').click(function() {
$('#target').dblclick();
});
I am going to display the Flexigrid in html div tag when click a button.The function for Flexigrid would be in the Javascript function. so i add a image tag with onclick to call a function which is called f_reload() which is going to load the flexigrid function. First time its loaded. by second time click it doest load the grid again.
<script type="text/javascript">
function loadFlexiGrid(){
//here flexigrid content
$("#flex1").flexigrid{{
//...........}}
}
function eventhandler() {
$("#flex").html(function() { //this function used to reload grid but it is not called when click second time on the button
return "<div id='flex1'></div>";});
javascript:loadGrid();
}
</script>
<input type="image" class="btn" id="sub" src="<?=base_url();?>images/rbtnsave.gif"
onclick="eventhandler();"/>
<div id="flex"><div id="flex1"></div></div>
</div>
here flex1 id of the flecigrid and flex is the id of the div.
when click first time on the button it shows the grid. but second time it doesn't why
When the eventHandler is executed, the nested function in $('#flex').html() is declared, but not executed. Is there a particular reason why you put it there?
Otherwise, try replacing it with:
function eventhandler()
{
$("#flex").html("<div id='flex1'></div>");
javascript:loadGrid();
}
The first time it works fine, since you've put <div id="flex1"></div> manually in your HTML.
Besides, are you sure javascript:loadGrid() is correct? Try removing the javascript: part. And - if referring to function loadFlexiGrid(), call it loadFlexiGrid();, not loadGrid();.
use click() function ..
$("#flex").click(function()
I have an HTML div:
<div id='text_icon_<?php $i++; ?>' class="text_icon">Some Text</div>
that I print inside a foreach loop. I am using ajax to handle the click() event on it and change its text to Done!, so I have an output like:
<div class="text">Done!</div>
If I run the loop 4 times and I click on one of the divs (i.e. the one with class text_icon) then only first one is working while the rest of the divs are not working.
Update:
Your update indicates the below is not the problem, the IDs are unique.
Without your jQuery code it's hard to help you debug, so here's an example of how it can be done:
HTML:
<div id='text_icon1' class='text_icon'>Div #1</div>
<div id='text_icon2' class='text_icon'>Div #2</div>
<div id='text_icon3' class='text_icon'>Div #3</div>
<div id='text_icon4' class='text_icon'>Div #4</div>
JavaScript code using jQuery:
$("div.text_icon").click(function() {
// Within the `click` handler, `this` points to the
// DOM element. If you're kicking off some ajax something,
// you'll probably be doing something like this:
// Grab `this` to a variable we can access from the
// `success` closure
var theDiv = this;
// Do our call
$.ajax({
url: "your_url_here",
success: function() {
// It worked, udate the div
$(theDiv).text("Done!");
}
});
});
Live copy
Original answer:
If you're really using "DIV id='text_icon' class="text_icon..../DIV", e.g.:
<DIV id='text_icon' class="text_icon">....</DIV>
...then the problem is that the id is not unique. ID values must be unique on the page (reference). That would seem to fit with the symptom you describe, with "only the first one" working. Most browsers, when given invalid HTML with multiple IDs, will use the ID on the first element in document order and ignore the remaining ones.
If you don't need the div to have an ID at all, you can just remove it. Otherwise, just ensure the ID is unique, e.g.:
<DIV id='text_icon1' class="text_icon">....</DIV>
<DIV id='text_icon2' class="text_icon">....</DIV>
<DIV id='text_icon3' class="text_icon">....</DIV>
<DIV id='text_icon4' class="text_icon">....</DIV>
As far as I can tell, you are giving your divs the same ID. Targetting multiple elements with the same ID is impossible, the IDs need to be unique.
Try this:
$i = 1;
foreach ($array as $al) {
echo "<div id='text_icon_$i'>blablabla</div>";
$i++;
}
Of course, you'll need to modify your jQuery code too to include a potentially unlimited number of such IDs (I don't know whether performance will be good this way, but I remember doing it once for a comments list on a blog).
Another way would be to use a common class rather than unique IDs :).
Apart from the arguments about unique IDs, could it also be that the click handlers need to be hooked up again after the ajax call? If so, it'd be better to use .live rather than .click.
$("div.text_icon").live("click",
function(event) {
var icon = $(this);
}
}
I use this to toggle my div elements, and hide all them when the DOM is ready...
$('div[class*="showhide"]').hide();
$('input:image').click( function() {
var nr = $(this).attr('id').substr(7,2);
$('div.showhide' + nr).toggle(400);
});
I have dynamically created div elements with class showhide0;showhide1;showhide2...etc...
Inside the DIV tags I have search boxes.
First when page is loaded all DIV tags hide.
I toggle one of them to show.
Start a search, so the page is reloaded with the result of the query.
Of course all DIV is hide again, because the page is reloaded. Unfortunately...
Is it possible to not hide again after I searched for something? It would be nice when I open the page, all the divs are hidden, but after then just when I toggle it...
If you need a specific element or elements to stay visible upon a page reload, then you're going to need to do something to maintain state across requests, and then modify your jQuery to utilize that state information when initializing the visible state of the elements.
This can be done in numerous ways which include but are not necessarily limited to
Include it in the query string
Include it in the URL hash
Use a cookie
Well, yeah, you just don't run the initial hide() if there's a search request. I'd just exclude that line from the output if, on the PHP level, you know you're executing a search.
We do something similar to this where I work.
We opted instead of have the class name just be hide for all elements and instead have the ids named.
So, we'd have it something like:
<div id="hide1" class="hide"> </div>
along with this CSS to hide all those divs by default
.hide {
display: none;
}
Finally, we use something like this to show them:
$('input:image').click( function() {
var nr = $(this).attr('id').substr(7,2);
$('#hide' + nr).toggle(400);
});
}
This works because of CSS precedence rules. The toggle()/hide()/show() method overrides the hide class's style.
As for the unhiding part, if you pass the ID to unhide to your script, you can parse it and unhide the appropriate div.
You can read and process the query string from window.location.search. Unfortunately, you then have to manually parse it or use a plugin, such as jQuery Query String Object or jQuery URL Utils.
var id = $.query.get('unhide_id'); // This is using Query String Object
$('#' + id).show(400);