I have a php page holding a data grid generated by jQuery lets say dataGrid.php
and 2 divs on the home page some thing like this
dataGrid.php
<script>
generate the grid
</script>
<body>
<lightbox><div> close me </div>
<div > holding the dataGrid </div>
</lightbox>
</body>
NOTE: I mean a popup box when I say this is not a real valid HTML tag I am using
and here is the home page
<body>
<div> click here to see the grid </div>
<div> <?php include dataGrid.php ?></div>
</body>
I have a close button on dataGrid.php. I am closing the include using jQuery remove() but remove() refreshes the home page which is what I don't want. I am also not sure id remove() command is really cross browser?
My question: Is there any way or method to close dataGrid.php and the light-box without refreshing the home page?
I have checked 3 other questions posted on stack-overflow with the same question title but different in the question body.
If your close button is interactive (i.e. a hyperlink) you'll need to call preventDefault() on the event to prevent the browser from treating it as interactive.
Before I begin it's worth reiterating what I said in my comment on this question: <lightbox> isn't a valid HTML element and will fail validation tests. For this answer, however, I'm going to use this as this is given the code you've provided.
Assuming your code is something like this:
<lightbox>
Close Me
...
</lightbox>
You'd prevent the hyperlink from functioning by passing in the event and calling event.preventDefault():
$('lightbox').on('click', 'a.close', function(event) {
event.preventDefault();
$('lightbox').remove();
});
Alternatively you can simply change your close button to something which isn't interactive, like a span for example:
<lightbox>
<span class="close">Close Me</span>
...
</lightbox>
$('lightbox').on('click', 'span.close', function() {
$('lightbox').remove();
});
For those who have it with an onclick, and doesn't know if the event is reachable within the function:
<button class="remove-form" onclick="remove_form(this);">Remove this form</button>
function remove_form(button){
jQuery(button).parent().remove();
event.preventDefault();
}
Related
I have a PHP script labeled first_page.php. On that page, I currently have a div that looks like this:
<div id="status">
<h3>To view a list of all rooms statuses, select the link below.</h3>
Show Status
</div>
And links to the correct page, response_data.php. What i'd really like to have instead, is a button that is on the first_page.php, and when that button is clicked, have it load the response_data.php page with .fadeIn().
I've tried to get this jQuery script working, with no luck. Here is what I have tried. I've changed my html to look like this:
<button id="button">Click here to show data</button>
<div id="data" style="display: none;">
<?php include 'response_data.php' ?>
</div>
$('#button').click(function() {
$('#data').fadeIn(1000);
});
Above, I have added a button and a div that I wanted to fadeIn. The div holds the php script, so I wanted the div to fade the php script in. I set the data CSS to display none. When I click the button, nothing happens. It actually works, but the div data fade's in without having had the button clicked. Then the button remains. I'd like it to not auto click, and also somehow hide the button after the first click.
The jQuery part is just fine. I highly suggest to check that your div#data actually has some text in it.
To do so, you can try something like:
console.log($('#data').text().length > 0 ? 'Text found' : 'Could not find text');
Also, to hide the button after it was clicked simply use the hide() method:
$('#button').on('click', function() {
$('#data').fadeIn(1000);
$(this).hide();
});
Note: You can also use the fadeOut() method or the remove() method if you wish to remove the button from the DOM.
<script>
$(document).ready(function(){
$("#signup").click(function(){
alert("jquery working.");
$("#mydiv").load("welcome/signup");
});
});
</script>
In my login form contains
<input type="button" value="Sign Up!" id="signup"/>
I have written this code in head section of my header. I have one controller named welcome one function defined in it named signup. now I have created a login form in which I have created a button with id="signup" which is shown above. Now when user clicks on that button I want signup.php form to be loaded in #mvdiv without loading the whole page.
For testing purpose I wrote that alert and it is working means the code is working fine but that page is not loading on that <div> tag.
Thank you!!
You need to write smth like this:
$("#mydiv").load("welcome/signup #formId");
More info: http://api.jquery.com/load/
I'm working on comments for posts on my website. How to create a button in javascript that will open iframe window with comments when user clicks on that button? Something like Facebook have with their comments on posts. If there is a way to create this with other language I would like that you write it. I just wrote javascript because I heard that you can do that in javascript. If there is a more elegant and/or better way feel free to write it.
So below every posts I would add a button and when user clicks on it, it should open something like this:
<iframe src="comment.php?postid=<?php echo $postid; ?>"
width=600px;
height=500px;>
</iframe>
And is there a way that iframe window loads only when you click on the button, not in the same time as page on which are posts? For example, if I have 10 posts on one page, and comments for all 10 posts are loading at the same time as the page with posts, it would slow down a page a lot.
Also do you know how to adjust iframe window size to amount of posts, so that if a post have 1 comment, window size is 100px, and if a posts have 5 comments, window size is 500px?
I know that Facebook have something much better than this for their comments, so if you know something better than my idea, please feel free to share it.
A trivial solution to your question would be..
<html>
..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
<body>
...
<div class='comments-container'></div>
<a class='show-comments' href='#'>Show Comments</a>
...
<script>
$(".show-comments").click(function(){
$(".comments-container").html('<iframe src="comment.php?postid=<?php echo $postid; ?>"
width=600px;
height=500px;>
</iframe>');
});
</script>
</body>
</html>
Or you can load all the comments onto a div element, and by default have that element hidden, and then once clicked on a button, you can show it. That solution could be
<html>
..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
<body>
...
<div class='comments-container'>
comment 1: ----
comment 2: -----
</div>
<a class='show-comments' href='#'>Show Comments</a>
...
<script>
$(".show-comments").click(function(){
$(".comments-container").slideDown("slow");
});
</script>
</body>
</html>
Try using something like prettyPhoto:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
If you scroll down on that page you will see an example where the loaded window displays an iFrame. Very handy for creating semi-ajax-like functionality to a website. You can use pretty much any lightbox clone out there for something like this, but I have found that prettyPhoto is the most robust and has a decent amount of support out there. This does use jQuery to work as well as it's own javascript file to function, but it is minimal.
Hope this helps.
I would jquery .load, .post, .get or .ajax
under every article have a div class named comments and display none css on that div. when the user clicks the view comments button for that article, send a request to the server and ask for comments for that article id.
you will want to store the id of the article in an attribute of the view comments link so that you can pass the .load request the id of the article you want comments for.
<div articleid="5" class="view-com-button">view comments</div>
<div class="comment" articleid="5" style="display:none"></div>
$(".view-com-button").click(function(event){
$(".comment[articleid='$(this).attrib("articleid").load("comment.php", {( "idarticle" : $(this).attrib("articleid") )};
});
I am not sure if what I am trying to do is possible but here it is.
I have a header, inside that header is a php include for "login.php"
On "login.php" is a link that takes the user to "forgot.php".
What I would like to do is, instead of the user being taken to "forgot.php" is to just refresh the page with "login.php" include replaced with "forgot.php" or do some sort of content switch out, sort of like using an Iframe.
I dont want to bring the user to a new page, I just want to switch out the content displayed inside my header.
Thanks for any help you can provide, code samples appreciated.
If you are trying to accomplish this without reloading the page you will need to use AJAX.
If you want to just keep the login.php you can perhaps do something like:
link
with php something like
<?
if ( isset($_GET['p']) && $_GET['p']=="forgot") {
include('forgot.php');
} else {
include('login.php');
}
PHP is parsed in it's entirety before the page is displayed in a user's browser, therefore, things such as onclick() or onsubmit() that are featured in JavaScript (a client-side language) are not available in PHP.
There would be a few solutions possible:
1) Use AJAX to submit a query to the server and replace the HTML content on the page with the result.
2) As you mentioned, use iFrames.
3) Have a hidden <div> on your login.php page that contains the HTML for forgot.php, and use a simple JavaScript onclick() method to swap the page contents. In this case, both "pages" would actually all be in the same file of login.php.
I can think of two things:
What I would do, assuming that the differences between your login.php and forgot.php aren't too different because you don't to change the page, is to put the html for the forgot.php just below the html for the login.php and hide the login.php html and show the forgot.php content.
example:
<div id = "login">
<!-- Login HTML -->
</div>
<div id = "forgot" style = "display:none" >
<!-- forgot password HTML -->
</div>
<input type="button" value="Forgot Password?" onclick="forgot()" />
Javascript:
function forgot(){
document.getElementById('login').style.display='none';
document.getElementById('forgot').style.display='block';
}
Otherwise, you could use an ajax call to the page and insert the necessary elements. This would create a noticeable pause.
You can't change the include statement from javascript because the script was already executed by the time you see your page in the browser.
Use ajax to dinamically change the content of the page without refreshing.
If you're using jquery the code would be pretty simple:
<script type="text/javascript">
$(document).ready(function() {
$('#link').click(function() {
$.get('script.php', function(data) {
$('#divOfContainer').html(data);
});
});
});
</script>
<div id="divOfContainer"><!-- the content to be fetched with ajax will be put here --></div>
Link
I'm wondering if the best way to tackle this is in PHP or using jQuery? Not sure how best to tie together refreshing the parent page's data when the user hits save in the edit window and submits changes. The code to launch the window is below:
edit
And in the edit page here is the code for the save button:
<fieldset class="submit actions">
<input id="signup" type="submit" name="signup" class="submitbtn" value="Save" />
<input type="button" class="secondary" name="butClose" id="butClose" value="Close" onclick="window.parent.Lightview.hide();" />
</fieldset>
You can utilize jQuery and setup an onclick() event handler to refresh the page on the click of the save button. In addition, you could apply form validation if needed, and only refresh the page if all requirements are met. Without knowing specifically what your project entails, you may also be able to just do everything via AJAX and not reload the page at all.
As you may see in your code example (the "edit" window), the shadowbox snippet uses window.parent for accessing the parents window element to close the box.
You have to write your own JavaScript and add an id (something like butSubmit) to the submit button. Something like this:
$('butSubmit').onClick({
// Reference to the parent window
var parentWindow = window.parent;
// Accessing the parent windows jQuery object
// and find the element with id #myTargetElement
var targetElement = parentWindow.$('#myTargetElement');
// Current window elements (with id #myInputField) value
var content = $('#myInputField').val();
targetElement.text(content); // May use .html() or .val()
parentWindow.Lightview.hide(); // Close the box
});
Ah yeah, I assume you have loaded jQuery on both (!) windows.
However, this does not save your content. You shoud use the jQuery.ajax() method for solving this.