I want to load a page in a certain div by using jquery function .load(), here is my code:
<a href="" onclick="return false;" id="generalinfo">
<div class="row alert alert-danger">
<h4 class="text-center">General Info</h4>
</div>
</a>
<div class="col-lg-6" id="userbody"></div>
<script>
$(document).ready(function(){
$('#generalinfo').click(function(){
$('#userbody').load('<?php echo Yii::app()->basePath."/views/users/_generalinfo.php"; ?>');
});
});
</script>
the page didn't load in the div and there are no errors appeared, so where is the problem here?
instead to execute:
$('#userbody').load('basePath."/views/users/_generalinfo.php"; ?>');
try to call:
$('#userbody').load('http://yousthost:portno/views/users/_generalinfo.php');
The jquery cannot evalutes on client side the PHP code echo Yii::app()->basePath
Try for instance to save the content of the PHP basepath server side in a javascript variable and the use it, like
$('#userbody').load(basePath + '/views/users/_generalinfo.php');
while on the server side, while building the html in the javascript section write:
var basePath = echo Yii::app()->basePath;
hope it's usefull
Related
I have been struggling with this common social networking feature for quite some time. What I am trying to do is to expand the div to display comments, I'm sure you know what I am talking about.
Each post a user sends is automatically echo'd with an anchor link Comments. As mentioned, when this link is clicked, it will simply expand the div displaying all comments assigned to that thought_id.
Even if there are no comments assigned to the post, I still want the div to expand to display a text field so any user can post a comment, preferably echo this:
<?php
<form action='' method='post' enctype='multipart/form-data'>
<table style='width:850px;'>
<tr>
<td><textarea name='msg' rows='2' maxlength='255' cols='80' placeholder=' add your comment...'></textarea></td>
<td><input type='submit' name='send' value='Share'/> </td>
</tr>
</table>
</form>
?>
Here is what I have so far:
<script language="javascript">
var id = <?php echo $thought_id; ?>;
function toggle(id) {
var ele = document.getElementById("toggleComment" + id);
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
And here is where the comments anchor link is found. Since it is quite lengthy, I have reduced the echo's content to only the relevant code:
echo "<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
// Options, and display picture of the user who posted the
// thought can be found here.
</div>
</div>
<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
// Below is the comments anchor link.
<a onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a>
</div>
// I expect the following piece below to every comment assigned to the thought_id in the database.
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/> $comment_posted_by said: $comment_body
</div>
</div>
</div>";
Other Infomation:
$thought_id is the id of the though the user posts. (table user_thoughts, column id).
I have another table called user_comments, which stores all comments and links it to the thought it is assigned to by post_id.
At the moment, nothing happens when I click comments.
First, here is a working example of what you want to achieve based on your code.
I had to strip the php part off because jsfiddle doesn't interpret it, so next is your code including the PHP bit.
I assumed that you have jQuery loaded as you added the jquery tag to the question.
It's complicated to know why what you tried doesn't work because we're missing important bit such as: how do you load your content into the DOM? dynamically or not (ajax?)
HTML/PHP
<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
</div>
</div>
<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
<a href="#" class="toggle-comment" data-id="<?=$thought_id?>" style='padding-left: 5px;'> Comments (<?=$num_of_comments?>) </a>
</div>
<div id='toggleComment<?=$thought_id?>' class='new_comment' style='display:none;'>
<br/> <?=$comment_posted_by?> said: <?=$comment_body?>
</div>
</div>
</div>
Your link was missing an href attribute, which is mandatory for it to be displayed properly. So we set it to the commonly used "#" which means blank anchor. We will then need to catch the click event on this link and prevent its default action so we don't see that ugly # in our url
You should avoid storing big chunks of html in a php var and then echo it but use html templates instead.
You should avoid mixing PHP and javascript like this line in your code that assign a php var into a js one var id = <?php echo $thought_id; ?>;
Instead, You can store your thought_ids as a data attribute of your links and easily fetch them using jQuery's data() later.
Javascript
$(function() {
$("a.toggle-comment").on("click", function(event) {
// prevents browser to go to href's #
event.preventDefault();
// uses Jquery's data() function to get comment id from link's data-id attribute
var id = $(this).data('id');
// get element by id and toggle display
var ele = document.getElementById("toggleComment" + id);
$(ele).toggle();
});
});
Here I got rid of your toggle() function and replaced it with a handler function using jQuery's on() that get called each time we click on a link that has the toggle-comment CSS class. It has the advantage of working on dynamically added content after the page is loaded. jQuery's on() documentation page does a great job explaining this (and the deprecated live() page too)
Notice that you will need to add this toggle-comment class to every of your Comments (X) links
If you are new to jQuery, you should consider reading this page to understand what the first line does and why you need it. (referring to enclosing your code into $(function() {...});)
event.preventDefault(); tells the browser to not perform its default behaviour when clicking on the link (which is go to that link and would append # to the address bar)
$(this).data('id'); reads put the clicked link (this) into a jQuery object and use data() to get the value of its data-id attribute, which is set to $thought_id
CSS issue update
See my updated fiddle for your CSS issue, I removed the float inline styles and positioned div.mini_nav using absolute positioning relative to message_wrapper.
I think that this issue is not related to the original question and should be asked in another one.
PHP Code as per OP's
<?php
$thought_id = 1;
$num_of_comments = 10;
$comment_posted_by = "Me";
$comment_body = "test comment body";
//hard coded above vars to achieve assumptions
echo "<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
// Options, and display picture of the user who posted the
// thought can be found here.
</div>
</div>
<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
// Below is the comments anchor link.
<a href='' onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a>
</div>
// I expect the following piece below to every comment assigned to the thought_id in the database.
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/> $comment_posted_by said: $comment_body
</div>
</div>
</div>";
?>
JavaScript
<script language="javascript">
var id = <?php echo $thought_id; ?>;
function toggle(id) {
var ele = document.getElementById("toggleComment" + id);
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
return false;
}
</script>
The above code worked for me, as per single record.
Now as you have tagged your question under jQuery
you could simply use
$(".message_wrapper .mini_nav a[href!='']").click(function() {
$(this).parent().next().toggle();
});
You could simply use the <details> HTML tag which acts as a disclosure triangle.
<details>
<summary>View comments</summary>
<ul>
<li>You comments</li>
<li>You comments</li>
<li>You comments</li>
</ul>
</details>
https://developer.mozilla.org/en/docs/Web/HTML/Element/details
The only issue is that it is not supported by the lovely IE browsers.
If I understand your question correctly , this is what you are looking for
https://jsfiddle.net/vrqsz3ev/7/
<div class='message_wrapper'>
<div class="main-msg-container">
<div class='where_msg_displayed'>
<input type="hidden" id="msg-id" value="1">
<div class='more_options'>
MESSAGE1
</div>
<div class='mini_nav'>
<button class="open-comment">comments</button>
</div>
</div>
<div class="hide-mess-details">
<div class='where_details_displayed'>
<div id='toggleComment1'class='new_comment msg-id-1'>
sachin said: Hii guysss (cmt of msg 1)
</div>
<form action='' class="comment-form"method='post' enctype='multipart/form-data'>
<textarea name='msg' placeholder=' add your comment...'></textarea>
<input type='submit' name='send' value='Share'/>
</form>
</div>
</div>
</div>
I made it using jQuery
Some of the things to note while looking into the code is
Uses the concept of flexbox in css3 to style it.
if you click on the share button only the comment of the respective message gets updated . For checking I added a message id along with the form when comment button is clicked .for checking purpose I added an alert (message id of the respective messages) if you click the share button
Now you can add your messages under .where_msg_displayed using php
display all the comments under .where_details_displayed (if you want to , you can add details under there respective messages -little edit is needed)
If you are continuing with this code , with little edits you can achieve the above requirements .
I'm passing variables using jQuery to Bootstraps modal through span tags but having issue when running PHP within the modal. The variables all pull through normally but when I try to run mySQL statements, the span tag I store in a variable appears as nothing even though it echos fine. I have given an example of the code below:
HTML:
<a role='button' data-topicid='$number' data-toggle='modal' data-target='#modaluserinfo' class='modalsend'>
JS:
<script>
$(document).ready(function () {
$('.modalsend').click(function () {
$('span.user-topicid').text($(this).data('topicid'));
});
});
</script>
Modal:
<div class="modal fade" id="modaluserinfo" tabindex="-1" role="dialog" aria-labelledby="modaluserinfo" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Details...</h4>
</div>
<div class="modal-body" style="text-align:center; margin-top:10px;">
<?php
$numberid = "<span class='user-topicid'></span>";
echo $numberid;// THE VALUE ECHOS FINE IN THE MODAL, BUT FAILS TO LOAD IN THE MYSQL QUERY BELOW
$sqlcomment = mysql_query("SELECT * FROM comments WHERE comments.topic_id='$numberid' AND comments.emotions_id='1'");
$commentnumber = mysql_num_rows($sqlcomment);
echo $commentnumber;
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My guess is that the PHP statement is running on page load rather than when the modal is opened and the variable is sent to the span tag. Not too sure how to fix this though.
Issue has been resolved for passing multiple variables using the following method:
HTML:
$page = mysql_real_escape_string($_GET['page']);
<a role='button' data-topicid='$number' data-page='$page' data-toggle='modal' data-target='#modaluserinfo' class='modalsend'>
jQuery:
$(document).ready(function () {
$('.modalsend').click(function () {
$('span.user-topicid').load('get_number_comments.php?topicid=' + $(this).data('topicid') + '&page=' + $(this).data('page'));
});
});
Refer to #bloodyKnuckles post for any further details
PHP only runs on the server. For the Javascript or jQuery to execute a PHP script a call to the server needs to be made. There's two ways to do that GET (like a link) and POST (like a form). And there's two ways you GET and POST, one way is to reload the page, the other is an XHR object, AKA Ajax.
So, make a separate PHP file, such as...
get_number_comments.php:
<?php
// LOAD YOUR DATABASE CREDENTIALS HERE
$numberid = mysql_real_escape_string($_GET['topicid']);
$page = mysql_real_escape_string($_GET['page']);
$sqlcomment = mysql_query("SELECT * FROM comments WHERE comments.topic_id='$numberid' AND comments.emotions_id='1'");
$commentnumber = mysql_num_rows($sqlcomment);
echo $commentnumber;
?>
And change your document ready function to:
$(document).ready(function () {
$('.modalsend').click(function () {
$('span.user-topicid').load('get_number_comments.php?topicid=' + $(this).data('topicid') + '&page=' + encodeURIComponent('<?php echo page; ?>'));
});
});
The inner DIV of your modal now looks like:
<div class="modal-body" style="text-align:center; margin-top:10px;">
<span class='user-topicid'></span>
</div>
jQuery's load function makes an XHR call to the server, executing the file you enter in the first argument, get_number_comments.php in this case. So then get_number_comments.php takes the GET variable, safely escapes it, interpolates it in the query, and sends the result back to the page through the XHR object.
(By the way, since PHP mysql_* functions are apparently SOON to be null and void I urge you to convert to the PHP mysqli_* functions. Then you can also use rigorous database security measures.)
I have a function in JavaScript something like
function continents(post_id,continent,countries){
location.href="/serv/continent.php?param="+post_id+"&"+continent+"/"+countries;
}
and then I have a anchor tag in my php page
<a href="javascript: void(0)" onclick="continents('<?php echo $row['sno']; ?>','<?php echo $url_con_name; ?>','<?php echo $url_contries; ?>')" >
<div>some date here </div>
</a>
Now the link is working fine but when I right click on that link I don't find open link in new tab and open link in new window.
How can I solve this without removing the function.
There is no href attribute in your a tag, therefore there is no link to open.
The fix is to put a proper URL in your href attribute.
Since you are using jQuery, you likely shouldn't be using onclick attributes anyways.
Do something like this:
<a href="http://example.com/proper/link" id="myLink">
Then attach the JS logic via jQuery:
$('#myLink').click(function(e){
e.preventDefault()
// this will prevent the link from loading the
// href value upon click, but still leave it
// accessible to right-click contextual menu.
the rest of your JS logic here...
})
Add href="#" and onclick event has return false;
Try
<a href="#" onclick="continents('<?php echo $row['sno']; ?>','<?php echo $url_con_name; ?>','<?php echo $url_contries; ?>'); return false;" >
<div>some date here </div></a>
I have the following code:
<body>
<ul id = "nav">
<textarea rows="0" cols="0" name="textBoxStuff" maxlength="0" value="">10</textarea>
<li>Home</li>
<li>About us</li>
<li>Contact</li>
</ul>
<div id="content">
<script src="jquery.js"></script>
<script src="general.js"></script>
</div>
</body>
When I click on any of the links it will load general.js which has the following code:
$(document).ready(function() {
$('#content').load('content/test1.php');
$('ul#nav li a').click(function (){
var page = $(this).attr('href');
$('#content').load(page + '.php');
return false;
});
});
This will then load the content from test2.php, or test3.php, or test4.php. It depends on which link I press. It will load the content without refreshing the webpage which is what I want. However, in my test2.php file, I want it to output what was written in the textbox on the main page.
This is the code in test2.php:
<?php
$textBoxStuff = $_POST['textBoxStuff'];
echo $testBoxStuff;
echo '<h1>Home</h1>';
?>
So the word "Home" is properly showing up when I click Home on the main page, but I don't know how to send the $_POST['textBoxStuff']; to the test2.php file. The $_POST['textBoxStuff'] should be equal to whatever was inside the textarea on the main webpage. So my question is if anyone knows how to send the data from the textbox from the mainpage to my test2.php file without refreshing the webpage, so using jquery.
You need to add a second parameter to the .load() method to tell jQuery what to send to the server.
eg:
$('#content').load(page + '.php', {
textBoxStuff: document.getElementsByName("textBoxStuff")[0].value
});
I have the following div on a page called Transactions.html :
<div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>$12.62 - 11/01/2012 - Kelloggs Diner - Brooklyn Ny</h3>
<div data-role="controlgroup" data-type="horizontal">
<a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
<a class="red" href="#" data-role="button">No</a>
<a class="blue" href="IDK.html" data-transition="slideup" data-role="button">I'm not sure</a>
</div>
</div>
</div>
And when I click the link <a>No</a> I want the whole div to move to another Summary.html page. Any ideas? Thanks
You can do it this way. You need to have a wrapper div tag in-order to select the entire html content.
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('.red').click(function(){
var divData = $('#dataContainer').html();
window.location.href = "summarypage.html?data="+divData+"";
});
});
</script>
<div id="dataContainer">
<div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>$12.62 - 11/01/2012 - Kelloggs Diner - Brooklyn Ny</h3>
<div data-role="controlgroup" data-type="horizontal">
<a class= "green" href="categorize.html" data-transition="slide" data-role="button">Yes</a>
<a class="red" href="#" data-role="button">No</a>
<a class="blue" href="IDK.html" data-transition="slideup" data-role="button">I'm not sure</a>
</div>
</div>
</div>
</div>
In summary page you need to retrieve the data from the URL. When you run this and click 'NO' link it navigates to summary page and you can see the html values on the summary page URL bar
You can use PHP to retrieve this data using <?php echo $_REQUEST['data']; ?>
You can't - that's not how the web works. Each HTML page is self-contained and encapsulated.
Some sites, like Github, do little tricks with the JavaScript history API and AJAX to make it appear as though a new page is "partially loaded", when in fact it's the same page.
You probably need to use PHP or a server side technology for storing data and that needs complete transformation of your static pages to dynamic PHP pages, that needs lots of work.
By using the html it is not possible to transfer the data from one html file to another html file. use the JQuery to perform the data transfer
By clicking on the button, speficy in which div or place you want the data to display, by using the load() in Jquery you can load the specific data in another page to your page