I've got a simple page that I want multiple hyper links on. Each link will go to the same page (test.php) but include a unique variable.
Test.php will capture the variable and load info from a database. This part is fine, the issue I have is how do I pass the variable to the modal page ?
I'm using bPopup.js and have this working as per this FIDDLE
The hyperlink i'm using is :
LINKY
I need to change the id from the example 'my-button' and I'm assuming I'll need to use a class as I can't have each hyperlink with the same ID.
What I'd like to do is this :
LINKY 1
LINKY 2
LINKY 3
LINKY 4
But how do I call this function and pass datavalue to it so it gets sent to test.php ?
similar to test.php?datavalue=111 etc
;(function($) {
$(function() {
$('#my-button').on('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup({
contentContainer:'.content',
loadUrl: 'test.php' //Uses jQuery.load()
});
});
});
})(jQuery);
Try this:
$('.modal').on('click', function(e) {
e.preventDefault();
var data = $(this).attr("datavalue"); //Get your attribute
$('#element_to_pop_up').bPopup({
contentContainer:'.content',
loadUrl: 'test.php?datavalue='+data //Pass via get
});
});
Related
I have very limited knowledge with scripts so I hope you guys can help me with a simple solution to a small problem that I have...
I'm using the following jquery function to refresh a div with new content when a link is clicked
<script>
$(function() {
$("#myButton").click(function() {
$("#loaddiv").fadeOut('slow').load("reload.php").fadeIn("slow");
});
});
</script>
My problem is, I need to send 2 variables to the reload.php page to use in a mysql query (I have no idea how to accomplish that), also I need to make multiple links work with this function, at the moment I have multiples links with the same id and only the first link works so I guess I must associate different ids to the function in order for this to work, how can I do that?
here's the page where i'm using this: http://www.emulegion.info/teste/games/game.php
You may want to use document ready instead of function on your first line as this will make sure the code is not executed until the full page (and all elements) have loaded.
You can then use the callback functions of the fade and load to perform actions in a timely manner.
additional variables you can add after the .php, these can then be read in your reload.php file as $var1 = $_GET['var1'];
Do make sure to sanitize these though for security.
<script type="text/javascript">
// execute when document is ready
$(document).ready(function() {
// add click handler to your button
$("#myButton").click(function() {
// fade div out
$("#loaddiv").fadeOut('slow',function(){
// load new content
$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){
// content has finished loading, fade div in.
$("#loaddiv").fadeIn('slow');
}); // end load content
}); // end fade div out
}); // end add click to button
}); // end document ready
</script>
For different variables you could add a HTML5 style variable to your button.
<input type="button" id="myButton" data-var1="foo" data-var2="bar" />
You can retrieve this when the button is clicked:
// add click handler to your button
$("#myButton").click(function() {
// get vars to use
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
...
load("reload.php?var1="+var1+"&var2="+var2
if you have multiple buttons/links I would use class instead of id "myButton". that way you can apply the function to all buttons with the above script. Just replace "#myButton" for ".myButton"
First, you should use .on('click', function() or .live('click', function() to resolve your one click issue.
You'll want to do something like:
<script>
$(function() {
$("#myButton").on('click', function() {
var a = 'somthing';
var b = 'something_else';
$.post('url.php', {param1: a, param2: b}, function(data) {
//data = url.php response
if(data != '') {
$("#loaddiv").fadeOut('slow').html(data).fadeIn("slow");
}
});
});
});
</script>
Then you can just put var_dump($_POST); in url.php to find out what data is being sent.
Try creating a function that would accept parameters that you want.
Like:
$(document).ready(function(){
$('.link').click(function(){
reload(p1,p2);
});
});
function reload(param1, param2){
$("#loaddiv").fadeOut('slow').load("reload.php?param1="+param1+"¶m2="+param2).fadeIn("slow");
}
But by doing the above code your reload.php should be using $GET. Also you need to use class names for your links instead of id.
<script type="text/javascript">
// execute when document is ready
**$(document).ready(function() {**
**$("#myButton").click(function() {**
**$("#loaddiv").fadeOut('slow',function(){**
**$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){**
// content has finished loading, fade div in.
$("#loaddiv").fadeIn('slow');
});
});
});
});
</script>
$("#myButton").click(function() {
// get vars to use
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
I need to run a PHP code from external server when user clicks a link. Link can't lead directly to PHP file so I guess I need to use AJAX/jQuery to run the PHP? But how can I do it and how can I pass a variable to the link?
Something like this?
<a href="runcode.html?id=' + ID + '"> and then runcode.html will have an AJAX/jQuery code that will send that variable to PHP?
use something like this in you page with link
Some text
in the same page put this somewhere on top
<script language='javascript'>
$(function(){
$('.myClass').click(function(){
var data1 = 'someString';
var data2 = 5;//some integer
var data3 = "<?php echo $somephpVariable?>";
$.ajax({
url : "phpfile.php (where you want to pass datas or run some php code)",
data: "d1="+data1+"&d2="+data2+"&d3="+data3,
type : "post",//can be get or post
success: function(){
alert('success');//do something
}
});
return false;
});
});
</script>
on the url mentioned in url: in ajax submission
you can fetch those datas passed
for examlple
<?php
$data1 =$_POST['d1'];
$data2 =$_POST['d2'];
$data3 =$_POST['d3'];
//now you can perform actions as you wish
?>
hope that helps
You can do this with an ajax request too. The basic idea is:
Send ajax request to runcode.html
Configure another AJAX to trigger from that page
Considering, this as the markup
<a id="link" href="runcode.html'">Test</a>
JS
$("#link").on("click", function() {
$.get("runcode.html", { "id" : ID }, function(data) {
//on success
});
return false; //stop the navigation
});
Basically i have php code which retrieves data from a database into a table, i have placed a button with an onclick function in each row of the table. the buttons aren't working cause its php(server side).
Could someone point me in the right direction to do this? retrieve data from Db put into a table with a button in each row with an onclick event.
thanks
Just use an anchor in each row and assign a class name for example :
<a class="delete_btn" href="index.php?action=fetchdta&id=1">Delete</a>
then use this jquery code on top of your page in a script tag :
<script>
jQuery(document).ready(function ($) {
$('.delete_btn').click(function(){
var urlt = $(this).attr('href');
$.ajax({
url: urlt,
success: function(data) {
//do Everything you want
}
});
return false;
});
</script>
i am trying to put a pagination page into jquery. example.html?id=foo&get=23
i would like to pass the get= into the jquery script so that i can change the page within the div instead of sending the link to the having the user see example.html?id=foo&get=23, they should only see example.html?id=foo. the rest is done in jquery.
<script >
$(document).ready(function()
{
$("#data").load("page.php?ht=<?php print $id; ?>&p=1" );
$("#next").click(function(){
var pageNum = this.id;
$("#content").load("page.php?ht=<?php print $id; ?>&p=" + pageNum, Hide_Load());
});
});
<div id="data">
page1
</div>
Why not modify the anchor
$('#next').attr("href","example.html?id=45");
After every click on the page?
you need something like this:
$(document).ready(function(){
$("#next").click(function(){
$.post('your_script_to_get_values.php',
{ page: "1" },
function(data) {
$('#content').html(data);
});
});
});
Make sure you use a live click handler, and not just a click handler, because you are creating the #next element after the page loads.
$("#next").live('click', function(){ //etc.
Documentation for .live()
It matches the current selector now and in the future (i.e. if the elements are created dynamically).
The simplest way would be with a session variable.
I have a little question.
On my site i use for few jquery functions , they get some data and transfer by GET method to php helper. This is not work when i want to use the data in another php page. For example i have jquery that store id of the anchor:
$("#rightContent .users_list li a").live('click', function() {
var id = $(this).attr('id');
$.get("getHelper",{'userId':id},function(data){
$('#user_rightContent').html(data);
});
});
And in php file returned by "getHelper" i do:
if(isset($_GET['userId'])){
$id = $_GET['userId'];
//do something
);
The anchor of the live click lead to another page displayed by another php file where i want to use this id by using helper... This is work only if i stay on same page...
Can anybody help me in this problem?
thanks for advice
add return false at the end of live('click'....
live('click', function()
{
// code ...
return false;
}
or do that
live('click', function(e)
{
// code ...
e.preventDefault();
}
You're missing the extension on the filename.
Try it with:
$("#rightContent .users_list li a").live('click', function() {
var id = $(this).attr('id');
$.get("getHelper.php",{'userId':id},function(data){
$('#user_rightContent').html(data);
});
});