I want to send multiple arguments to JQUERY event functions.For sending one data i put it in value attr in html code.
<li id="<?php echo 'v'.$value['vehicleid'] ?>" value="<?php echo $value['vehicleid']; ?>" >
And get data in JQuery event function with $(this).val() But i don't know how can i pass multiple php data to JQuery event function!
these data are dynamic and produced by php code.
I came across something similar the other day.
Try using the html5 custom data attribute.
John Resig (the king of jquery and general javascript ninja) first posted about it here.
so:
<li id="vehicle<?php echo 'v'.$value['vehicleid'] ?>" data-vehicle="<?php echo $value['vehicleid']; ?>" >
Then access it using the jquery .data function. see http://api.jquery.com/data/.
If you have a lot of data you want to add I recommend using an object literal
{ vehicleId: <?php echo 'v'.$value['vehicleid'] ?>,
vehicleName: <?php echo 'v'.$value['vehicleName'] ?>}
as in the example on the jquery website.
You cannot use val() on an li it is supposed to be used on form elements like input for which there is a valid attribute called value
For an li you can use data attributes
<li id="<?php echo 'v'.$value['vehicleid'] ?>" data-vehicleid="<?php echo $value['vehicleid']; ?>" >
and use:
var vehicleId = $(this).data('vehicleid');
For passing multiple data you can seperate each id with some char like "-":
<li id="<?php echo 'v'.$value['vehicleid'] ?>" data-vehicleids="<?php echo $value['vehicleid1']. '-' .$value['vehicleid2']; ?>" >
which should produce something like:
<li id="1234" data-vehicleids="1234-3456-5678" >
then do
var vehicleIdsArray = $(this).data('vehicleids').split('-');
just make sure charachter used for seperation is not used for vehicle ids
This should help you:
<ul id="list">
<li data-vehicleid="1234" data-vehiclename="renault" data-vehicle-color="silver">Renault</li>
</ul>
$(document).ready(function(){
$('ul#list li').click(function(e){
var vehicleId = $(this).attr('vehicleid');
var vehicleName = $(this).attr('vehiclename');
var vehicleColor = $(this).attr('vehiclecolor');
return false;
});
});
Quote from Resig:
I think what is most enticing about this whole specification is that
you don't have to wait for any browser to implement anything in order
to begin using it. By starting to use data- prefixes on your HTML
metadata today you'll be safe in knowing that it'll continue to work
well into the future. The time at which the HTML 5 validator is
integrated into the full W3C validator your site will already be
compliant (assuming, of course, you're already valid HTML 5 and using
the HTML 5 Doctype).
I am not one hundred percent sure which kind of event are you pertaining to. But you can pass multiple arguments inside the function(..HERE..). It should be separated by commas. Its like this.
$('selector').change(function(arg1,arg2,arg3){
alert(arg1+arg2+arg3);
});
In this example i am using change event for the selector 'selector'.
I think you have to create a function to handle the event
function handleEvent(data-vehicleid,data-vehiclename,data-vehiclename)
{
alert(data-vehicleid + data-vehiclename + data-vehiclename);
}
Then on your li,
<li onmouseover="handleEvent(<?php echo $variable1;?>,<?php echo $variable2;?>,<?php echo $variable3;?>)">Renault</li>
Related
I am trying to implement pagination functionality to a page. I have custom post types and I have looped through and gathered all the posts for this page. I display the first post and hide the rest and I have next/previous buttons that will show the next post and hide the current post. It seems to be working, however I am not able to view all the posts - only 2 of them.
Here is my code:
<?php
$currProj = 1;
$countposts = 3;
?>
<?php if ($countposts>1) {
$prevID = $currProj - 1;
if ($prevID <= 0) {
$prevID = $countposts;
?>
<a class="btn-previous" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $prevID; ?>')" onclick="<?php $currProj=$prevID; ?>"> < Previous </a>
<?php } else {
?>
<a class="btn-previous" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $prevID; ?>')" onclick="<?php $currProj=$prevID; ?>"> < Previous </a>
<?php
//$currProj = $prevID;
}
echo $currProj; //This outputs 3 where it should be 1
$nextID = $currProj + 1;
if ($nextID > $countposts) {
$nextID = 1;
?>
<a class="btn-next" id="nextlink" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $nextID; ?>')" onclick="<?php $currProj=$nextID; ?>"> Next > </a>
<?php } else {
?>
<a class="btn-next" id="nextlink" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $nextID; ?>')" onclick="<?php $currProj=$nextID; ?>"> Next > </a>
<?php
//$currProj = $nextID;
}
} ?>
The javascript function is working correctly, the issue seems to be the $currProj variable. I think the issue is my onClick attribute in the tag - is there a better way of having an onClick event that will give my variable a different value? Or a way of checking if this link has been clicked then give the currProj the value of prevID/nextID ?
I have been stuck on this for a while now and I don't seem to be getting anywhere. Any help would be greatly appreciated.
Your code above seems to be conflating what's happening on the server side and what's happening on the client side. Anything wrapped in <?php ... ?> is going to be executed on the server and then sent to the client as HTML -- for example, this line:
<a class="btn-previous" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $prevID; ?>')" onclick="<?php $currProj=$prevID; ?>"> < Previous </a>
will end up being sent to the client with all of the PHP interpreted:
<a class="btn-previous" href="javascript:showProject(1,3)" onclick=""> < Previous </a>
The key thing here is this you're not re-running the PHP when you click -- the client is completely agnostic to the PHP ever having been there. Every time you click the Previous button, its href attribute is still javascript:showProject(1,3).
You have two options; namely, you can go back to the server and have it re-render the page whenever you click the next / previous button by including those variables as parameters to your page, e.g., get the current project from the URL and link like so:
$currProj = ( $_REQUEST['currProj'] ? $_REQUEST['currProj'] : 1 );
...
<a class="btn-previous" href="<?php echo '[your_url_here]?currProj=' . $prevID ?>">
However, it looks like you're interested in doing this without ever pinging the server again. In that case, you'll need to store, reference, and update these variables in javascript. There are probably a thousand ways to do this; the closes to what you seem to want to do would be to have your showProject function take no arguments and instead figure out what it needs to do based on the value of the current project, something like
var currProj = <?php echo $currProj; ?>; // this initializes the JS variable currProj from whatever it is in PHP when the server sends the page contents
var countposts = <?php echo $countposts; ?>; // initialize this too
var showPrevProject = function showPrevProject() {
// hide the current project using jQuery; assumes the DOM element you want to hide is given ID #project-[currProj]
$('#project-' + currProj).hide();
// Update the current project variable in JS; scope should update globally
currProj = currProj - 1;
if (currProj === 0) { currProj = countposts; }
// Now show that element
$('#project-' + currProj).show();
}
Then in your link you can use showNextProject or showPrevProject as appropriate.
More generally, though, it's probably better to include your javascript as a separate file and register event handlers to deal with this sort of thing. I would also recommend checking out jQuery, which is a powerful library that greatly simplifies accessing and manipulating DOM elements.
What about creating a HTML hidden input for storing those values?
<input type="hidden" value="<?php echo $currProj ?>" id="currProj">
So you can access it and modify it in client side with javascript or jQuery. If you want a solution server-side you can do it with ajax and POST or GET requests.
Maybe this isn't what you are looking for (modify the php attributes) and I misunderstood you. Let me know if this is your case.
I have 2 functions that makes menu links active/inactive:
function disableCtrl() {
echo 'style="background: #999999;" onclick="return false;"';
}
function enableCtrl() {
echo ' ';
}
I'm using them like this:
<li><a href="#" <?php if (#$_POST['submit']){disableCtrl();} if (#$_GET['guest'] == "add") {enableCtrl();} ?> >MenuButton</a></span></li>
The only problem I have is that menu links must be disabled by default (when the page is loaded).
When I tried to write <?php disableCtrl(); if (#$_POST['submit'])..., the button became perma-disabled.
Is there a way to make it work, maybe with JavaScript or something else?
you need to put the 'guest' check as if and the default(disabled)mode as else.
<li><a href="#" <?php if ($_GET['guest']== "add"){enableCtrl();} else {disableCtrl();} ?>>MenuButton</a></li>
Or with a ternairy (= short if/else-> [condition ? ifTrue : ifFalse] )
<li><a href="#" <?php $_GET['guest']=="add" ? enableCtrl() : disableCtrl() ?>>MenuButton</a></li>
In combination with disabled (which is made for this exact situation):
<li><a href="#" <?=($_GET['guest']=="add" ? 'disabled="disabled"' : '')?>>MenuButton</a></li>
If you want something to vary, say, with every load of a page, use a server-side technology such as php. If you want it to vary within one page load, I.e. in response to user interaction, use a client-side technology I.e. JavaScript.
To attempt to answer the original question, or at least give you some pointers, you want something a bit like:
<ul id="menu" style="display: none;"><li>...</li>...</ul>
<a id="btn" href="#">disable menu</a>
<script>
document.getElementById('btn').addEventListener('click', function() {
document.getElementById('menu').setAttribute('style', 'display: block');
}
</script>
That's not perfect (in practice, for one thing, you don't want to just point your link to "#" since that won't do anything for those with javascript disabled) but it's a pointer in the right direction. The jQuery equivalent would be something like:
<script>
$('#btn').click(function() { $('#menu').hide(); });</script>
</script>
if that's more appealing, check out jQuery.
Keep in mind that php is server side so you can use printf to put your javascript into your page.
printf("<script>Here is my javascript code</script>");
I do this a lot with the mapping services.
For example reading in locations from a database and making markers:
public function MarkerGoogle($s)
{
$str = sprintf("\r\n var amkr%d = new google.maps.Marker();\r\n", $s);
// More php code here …
I am having trouble creating a solution that will target the end row of a MySQL query. Currently I have a foreach function that works through the query and displays each one as a div with the information inside:
<?php $residents = Resident::find_all();
foreach($residents as $resident): ?>
<div class="submenu">
<p class="menuitem submenuheader"><?php echo $resident->name; ?></p>
<img src="images/<?php echo $resident->image_path(); ?>" width="250" class="image" />
<p><?php echo $resident->info; ?></p>
</div>
.submenu currently has a bottom border. I need to remove this on the last row returned. I have looked at DESC LIMIT 1, however this requires another MySQL query and could make things very messy...
Addd this to your CSS:
.submenu:last-child { border-bottom: 0; }
Note: this is not supported by IE < 9.
You could switch to putting the border on the top of the element, and use the :first-child pseudo selector in CSS to remove it.
http://reference.sitepoint.com/css/pseudoclass-firstchild
The :last-child selector would be nice, but it's not supported in IE before version 9, so it's not a good idea to use it if you want compatibility.
If you separate your HTML and PHP a little this is easily achieved:
<?php
function echoBlock($resident,$pClass="menuitem submenuheader") {
echo "<div class=\"submenu\">\n<p class=\"$pClass\">\n";
echo $resident->name;
echo "</p>\n<img src=\"images/";
echo $resident->image_path();
echo "\" width=\"250\" class=\"image\" />\n<p>";
echo $resident->info;
echo "</p>\n</div>\n\n";
}
$residents = Resident::find_all();
$last=count($residents)-1;//2 element array last pos is 1
for ($i=0;$i<$last;$i++) {
echoBlock($residents[$i]);
}
echoBlock($residents[$last],"menuitem");
?>
echoBlock (which could easily be a method on a class) requires the calling code to know about the classes it uses, which isn't really separating intent but it does prevent the need for an if branch on every loop. That being said it would be less efficient but perhaps more usable to set it up as:
function echoBlock($resident,$isLast=false) {
$pClass="menuitem".($isLast?"":" submenuheader");
//...
Which then doesn't need the caller to know anything about what echoBlock does.
You could try and pop the array using array_pop(), to get the last value out of the array and then inputing it using the special class after the foreach loop.
What about
Instead of echo'ing each line one by one, create one big string in PHP, search for the last entry of "submenu" and change the class.
for($v=0;$v<11;$v++) {
echo "<div class='unsubscribed'><a class='button'>Unsubscribe</a></div>";
echo "<div id='$v'></div>";
}
I want onclick of the class unsubscribed to remove the div below in the same iteration. So for this i have to pass $v to jquery.
This is what i started with jquery but i don't know how to get the variable $v. How do i accomplish this?
$.ready(
function() {
$('.unsubscribed').remove();
}
);
you do not need to pass anything to jquery :
$(document).ready(function(){
$('.unsubscribed').one('click',function(){
$(this).next().remove();
});
});
This works for your current html.
To be more safe, you should add a class to the elements you want to be removed:
for($v=0;$v<11;$v++) {
echo "<div class='unsubscribed'><a class='button'>Unsubscribe</a></div>";
echo "<div class='to_be_removed'></div>";
}
This way you can reference the div you want to remove withouth it being necessarily after the unsubscribed div :
$(document).ready(function(){
$('.unsubscribed').one('click',function(){
$(this).next('.to_be_removed').remove();
});
});
A better solution might be:
<?php for($v=0;$v<11;$v++) { ?>
<div class="unsubscribed" rel="<?php echo $v; ?>">
<a class='button'>Unsubscribe</a>
</div>
<div id="<?php echo $v; ?>"></div>
<?php } ?>
$(document).ready(function(){
$(".unsubscribed").click(function(){
var div_to_remove = $(this).attr("rel");
$('#'+div_to_remove).remove();
});
});
I prefer doing it this way, because working with .next can sometimes cause problems, when you add something in between. It can be very hard to find the problem then.
This way, you simply embed the needed information about the div you want to remove into an attribute of the div that triggers the event.
Note: in this example, the function is called on clicking the .unsubscribed div - not the .button.
You also have to make sure, the removable divs have different and unique ids. If $v isn't unique, you can do e.g. something like this:
...
<div id="<?php echo $v . $i; ?>"></div>
...
I have problem and I tried click link then it doesn't work to open link using target: name of iFrame. i dont want use href because im going make show/hide div.
Javascript:
<script type="text/javascript">
<!--//
function godirect(url, targetname)
{
document.getElementById(targetname).src = url;
//frame[targetname].location.href = url;
}
//-->
</script>
in HTML and PHP:
$a=0;
echo 'Click Me!';
echo '<iframe class="iframe_url" id="iframe_url'.$a.'"></iframe>';
How about
<script type="text/javascript">
function godirect(url, targetname) {
window.frames[targetname].location = url;
//OR
//window.open(url,targetname);
return false;
}
</script>
<?PHP
$a=0;
?>
Click Me!
<iframe class="iframe_url" name="iframe_url<? echo $a; ?>" id="iframe_url<? echo $a; ?>"></iframe>
You have to quote strings in JavaScript. You are trying to get the id of the element by passing in a variable which you haven't defined.
You are also using the same quote characters to delimit your HTML attribute value as you are using to delimit your JS strings.
To use the approach you are using, while making the minimum number of fixes to make it work:
echo 'Click Me!';
Using JS for this is a very silly idea in the first place though, and your implementation fails to have any kind of fallback for when JS is not available (which is odd, since you are taking steps to stop browsers which don't recognise the script element from rendering the JS as content text).
You can do this with plain HTML:
<a href="http://www.google.com"
target="iframe_url<?php echo htmlspecialchars($a); ?>">
Click Me!
</a>
i dont want use href because im going make show/hide div.
You can do that as well as having a normal, functioning link. Build on things that work.
Try this:
echo 'Click Me!';
echo '<iframe class=\"iframe_url\" id=\"iframe_url'.$a.'\"></iframe>';