<a data-toggle="modal" href="msg_id=<?php echo $id; ?>#example" class="link_comment">Comment</a>
<div id="example" class="modal" style="display: none; ">
Your message ID is :
<?php
echo $msg_id = $_GET['msg_id'];
?>
</div>
When I try to mouseover to Comment link, in status URL : I can see the msg_id value. But When I try to click the comment link (I using Jquery modal), it can't be show the value of the link.
So my question, how can I do that to make the value of msg_id show in Jquery modal.
Thanks for your help.
Since you open #example div with jquery Modal, it dosen't reload the page, hence $_GET is empty.
You can achieve what your goal in at least 2 ways:
Use Ajax to load contents of #example div when link is clicked.
<a data-toggle="modal" href="<?php echo $id; ?>#example" class="link_comment">Comment</a>
<script type='text/javascript'>
$('.link_comment').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
$.get('givemycomments.php?id='+id, function(data) {
$('#example').html(data);
});
});
</script>
Load all possible contents when page is rendered with php. For example, you would have #example_1 , #example_2 divs. When link is clicked, get value of its ID, and fire Modal with correct div. edit: after writing example code i realized that if you have lots of comments, it can be quite heavy to load em all.
Related
How can I make each button instead of going to another page to display the information on a dialog box in the same page.
This code here is in the head to call the id from the other file
<script type="text/javascript">
function getvoucher(id){
return data;
});
}
</script>
Then I have this button in my while loop:
<td><?php echo $row['voucher_id']; ?></td>
<td> <?php echo' Click here'; ?></td>
When I click on the button it displays what I want in test but instead I want it to show in a dialog box, any help?
you can use JQuery's UI dialog which is pretty widely used today. Here is the link for demo:
https://jqueryui.com/dialog/
What you can do is to set the content you want to display in the dialog div's tag and then bind the dialog to the button id.
Example
JAVASCRIPT
$("#voucher_id").click(function() {
$.get("http://52.91.139.19/inactive/test.php?id=" + id, function(data,status){
$("#content").html(data);
});
});
HTML
<div id="dialog" title="Basic dialog">
<p id="content">This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
You should then put Id on button and in script
$("#id").click(function(){
alert("You clicked the button");
});
Did you try with alert something like this echo <script>alert("Message");</script>;
Or did you try to open fancybox you can use for example <a class="className" data-fancybox-type="iframe" href="yourhreftodisplayinfoonfancybox">Open</a>
<script>
$(".className").fancybox({
maxWidth:500,
maxHeight:600,
fitToView:false,
width:'60%',
height:'100%'
}
});</script>`
If you want on button then try with onclick to rised fancybox or dialog I don't do like that
$("#id").click(function() {
$.get("http://inactive/test.php?id=" + id, function(data,status){
$("#content").html(data);
});
});
I'm building a website where the admin can make settings for the website. I would like the admin settings page to have a similar "feel" as the rest of the website, which has some nice looking jQuery features.
On the admin site there's a hidden div, which is shown when one of six links has been clicked. I'd like the content of the hidden div to change content before showing itself. I'm not sure how to do this. I could have a div box for every link on the page. But this becomes pretty cumbersome since I'd need to repeat my css and jquery for every link. I imagine that this, somehow, can be done with some javascript/jquery code that determines which link that was click and then decides which php function to call inside the hidden div. Then the php could "echo" out the content of the div, which then could be shown.
How could one do this?
My HTML/jQuery code is as follows:
--- The html links ---
<table id="settings">
<tr>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
----- The Hidden div -----
<div id="dashboard_box">
<div class="dashboard_inside">
<form action="#" method="post">
<p style="font-size:20px; font-weight: bold;">Change color</p>
</br>
<fieldset>
<? load_content1();?>
</fieldset>
</form>
</div>
</div>
---- jquery code (working)----
var mouse_is_inside = false;
$(document).ready(function() {
$(".action").click(function() {
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
return false;
});
$("#dashboard_box").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});
});
You probably want to use ajax to load the content from the server. Take a look at jquery's .load() method: http://api.jquery.com/load/
You could include a data attribute per link:
<a class="action" data-content="content.php?method=load_content1"></a>
<a class="action" data-content="content.php?method=load_content2"></a>
js would look something like this:
$(".action").on('click', function() {
$("#dashboard_box fieldset").load($(this).data('content'), function() {
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
}
return false;
});
Then, in your content.php file you could check the method parameter in the url to determine what content to return.
My php is a little rusty, but something like this:
<?
call_user_func($_GET['method']); // i'm not sure how safe this is. you may want to be more explicit
?>
You can just add data attribute in each of your link's
<a href="#" data-url="content1.php" ..
Then on click of any of the a you can get the php to be called.
$('a').on('click',function(){
var phpFunctionToCall = $(this).data('url');
});
You probably need to make ajax call to load content into your fieldset As this <? load_content1();?> run's on server and javascript have no control over it.
Thanks for all the help. this is what I ended up doing.
--- HTML ---
<a class="action" data-content="content.php?method=load_content2"></a>
---Jquery---
var mouse_is_inside = false;
$(document).ready(function() {
$(".action").click(function() {
var phpFunctionToCall = $(this).data('content');
$('#indhold').load(phpFunctionToCall);
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
return false;
});
$("#dashboard_box").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});
});
--- PHP (shortened)---
function load_settings_panel($settingOnRequest) {
return $settingOnRequest;
}
$result = call_user_func('load_settings_panel', $_GET['method']);
echo($result);
I have this div named "pachete" which generates image links(click on an image and the corresponding address from the database loads) which works I get sent to correct page but what i want is to load that page into the page where I'm at(right below the image links ) into the new_page div , not get redirected to it.The class "poza_efect" is a simple opacity effect. I have a JavaScript function but for some reason it does not work.
<script>
$('.stil_link_img').click(function () {
$('#new_page').load($(this).attr('href'));
return false;
});
</script>
<div id="pachete">
<?php $result=mysql_query( "SELECT* FROM imagini"); while($data=mysql_fetch_row($result)){ if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<a href="<?php echo $data[4];?>" class="poza_efect">
<img src="upload/<?php echo $data[1];?>">
</a>
</div>
<?php } }?>
</div>
<div id="new_page">//some content which should be replaced with my loaded page</div>
In your Javascript function, the reference $(this) is not pointing to the A element, but to the container DIV. Try to do it like this:
$('.stil_link_img a').click(function() ...
And also, wrap this into the $(document).ready(function() { .... }); handler to ensure that the elements are completely loaded.
The stil_link_img click event is registered before the elements are loaded, so the event is never attached. Use
$(".stil_link_img").live(..) or
attach the event after the page is loaded completely
move the .click after your loop
Also you should register the click event to the a-tag instead of the div(or if you want that, be sure to set some clickable background..)
I am a newby in ajax and php and I would very much appreciate it if you could help me out. Seeing that I only know a little bit javascript and php I really don't know how to remedy this problem could you help me please! I've been hunting down a fix but couldn't find any, hopefully my search will stop here. I'll try my best to be clear in my explanation.
I would like this:
load html page called ducks
to load into the myDiv area an html page called ducks.html.
I would also like that when I click on on this:
load a list of html links
I would like it to load an html page with a list of links that when clicked will load into the myDiv area without reloading the whole page.
And lastly I would like to set up the myphpscript php file. To load a page with a list of links that will appear in the myDiv area and when I click on one of those links it will load likewise into the myDiv area.
This is my code
<!-- This is your PHP script... myphpscript.php -->
<?php
$contentVar = $_POST['contentVar'];
if ($contentVar == "con1") {
include 'con2.html';
} else if ($contentVar == "con2") {
echo "<a href='con2'>View</a>";
} else if ($contentVar == "con3") {
echo "Content for third click is now loaded. Any <strong>HTML</strong> or text you wish.";
}
?>
<!-- This is the rest of my code -->
<html>
<head>
<script type="text/javascript" src="jQuery-1.5.1.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
function swapContent(cv) {
$("#myDiv").html('<img src="loader.gif"/>').show();
var url = "myphpscript.php";
$.post(url, {contentVar: cv} ,function(data) {
$("#myDiv").html(data).show();
});
}
//-->
</script>
<style type="text/css">
#myDiv {
width:200px; height:150px; padding:12px;
border:#666 1px solid; background-color:#FAEEC5;
font-size:18px;
}
</style>
</head>
<body>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con1');">Content1</a>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con2');">Content2</a>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con3');">Content3</a>
<div id="myDiv">My default content for this page element when the page initially loads</div>
</body>
</html>
It sounds to me that if you want an external page to load when something is clicked, you need to perform an ajax GET or POST request, then print the results to the div:
http://api.jquery.com/jQuery.post/
If you just want to change the contents of the div to some other text, you can use something like jQuery.html: http://api.jquery.com/html/
<script>
$("#idForLink").click(function () {
var htmlStr = "The new text to show";
$('#myDiv').text(htmlStr);
});
</script>
Without using jQuery, your example above is sending self posts to echo contentVar which will always refresh the page.
See this fiddle for a jquery+css solution to your problem [NO PHP REQUIRED]: http://jsfiddle.net/bYNeg/
If you are simply grabbing HTML from another file I would use the load method, as its quick and easy:
$(document).ready(function(){
$('#myDiv').load("someFile.html");
});
For more extensive requests you can use Post and Get. They allow you to pass data with the URL request in order to affect the results that are returned. Obviously your requested URL would need to be PHP/ASP and handle the request in this case.
JAVASCRIPT:
<script type="text/javascript">
$(document).ready(function(){
// this is your mouse event (click) listener
$('.destination_div').on('click','a',function() {
var url = $(this).attr("href");
$('.destination_div').load(url);
return false;
});
});
</script>
Make your HTML anchors simple, do not include inline javascript, because the on("click") handles it already.
HTML:
Your HTML with links
I am trying to make a div where I include PHP web pages into it, however when I click any link inside the div, it loads in new window.
Does anyone know how to solve this problem?
I also tried using an iframe instead of a div but it caused other problems.
HTML code:
<div id="cover5">
<div id="warning">
<?php include 'SignIn.php'; ?>
<p align="center">
Home
</p>
</div>
</div>
JS code:
function cover5() {
var cover = document.getElementById('cover5');
if (vis) {
vis = 0;
cover.style.display='block';
}
else {
vis = 1;
cover.style.display='none';
}
}
You have to make a distinction bitween the client-side and the server-side of a Web application.
<?php include 'SignIn.php'; ?> is a server-side command, because of the <?php ?>, which means that the user will never see that line exactly.
If your SignIn.php file contains for example my link, the user will only get the ouput of that inclusion, i.e.
<div id="warning">
<a href="go-there.php">my link</a
</div>
When the user clicks on the link, his browser will load it as if this <a /> would have been hard written within your HTML code directly, and then open it in a new window.
I don't no how to do it using native JS, but with jQuery, you can try something like this:
$(function() {
$("#warning a").each(function() {
$("#warning").load($(this).attr("href"));
});
});
To render html from a specific link within an element on the page you need to run an ajax GET call, and load the html. Then insert the response in your div.
using jQuery:
$("a").click(function(){ //calls function when anchor is clicked
var link = $(this).prop("src"); //finds the link from the anchor
$.get(link,function(data, status, xhr){ //makes an ajax call to the page
$("#myDiv").html(data); //replaces the html of #myDiv with the returned page
});
});
Hope that helps
HTML CODE :
<div id="cover5">
<div id="links">
<p align="center">
Home
</p>
</div>
<div id="warning">
<?php include 'SignIn.php'; ?>
</div>
</div>
and JS code:
function cover5() {
var cover = document.getElementById('warning');
if (vis) {
vis = 0;
cover.style.display='block';
}
else {
vis = 1;
cover.style.display='none';
}
}
Whenever an user click on the link in "links" div it will call JS function "cover5()"
You can use jQuery or ajax to pop-up "warning" div
In your code you added the links to the worning div so as when in second time ti will hide all the links form there.