I have no experience with jquery or javascript for that matter.
I am trying to implement this technique to respond to users for errors or messages in general.
lights-out-dimmingcovering-background-content-with-jquery
This method uses the onclick event and that's not what im after, I have tried to replace .onclick with .load but that doesn't seem to work. I'm after a quick fix as I really don't have the time to learn jquery or its event handlers.
The goal is to catch any errors or message's and once these are called the alert box is called without any further actions such as .onclick.
How my code would look:
{PHP}
$forms = new forms();
if(count($forms->showErrors) > 0 // or == true)
{
foreach($forms->showErrors as $error)
{
print('<p class="alert">'.htmlspecialchars($error, ENT_QUOTES).'</p>');
}
}
Edit:
ALL FIXED, thanks!
You're on the right track with ".load" but you want to bind this functionality to the "ready" event of the page (when the DOM is complete; you don't need to wait for the load event), so here's what you need to change - assuming you're using the code sample on the Lights Out page:
$(document).ready(function(){
//Adjust height of overlay to fill screen when page loads
$("#fuzz").css("height", $(document).height());
//When the link that triggers the message is clicked fade in overlay/msgbox
//$(".alert").click(function(){
// $("#fuzz").fadeIn();
// return false;
//});
// INSTEAD: If any errors are present in the page, fade in the layer:
if ( $("p.alert").length ) {
$("#fuzz").fadeIn();
}
// end of change
//When the message box is closed, fade out
$(".close").click(function(){
$("#fuzz").fadeOut();
return false;
});
});
//Adjust height of overlay to fill screen when browser gets resized
$(window).bind("resize", function(){
$("#fuzz").css("height", $(window).height());
});
Be sure to include the HTML and CSS for the layer, too.
Related
I have looked at a few similar examples on StackOverflow but I can't seem to get this to work. I have an onclick event that goes to one function and if that returns ok it goes to another function and if that is fine it will submit it in the else statement like:
document.forms["input"].submit();
so I tried commenting this out and sending it to a function called showHide()
function showHide() {
$('#input').submit(function () {
$('#main-content').hide();
$('#progress').show();
});
}
It doesn't seem to submit the form like expected. I basically want to use bootstrap and show an animated progress bar so the user knows something is happening because sometimes the submission can take awhile.
Update:
I was able to get this working with both bootstrap progress bars and the jquery ui progress bar. I just run the progress bars right before it submits the form. I hide the div when i load the view.
$(function() {
$("#progress").show();
});
document.forms["input"].submit();
Without seeing more HTML, it's a bit hard to troubleshoot. But it looks like you've defined a function, and within this function you're expecting an element to trigger it, which won't really work. You could call your function from your form's submit event, like so:
//this assumes you have a form with id "input"
$('#input').submit(function () {
showHide();
});
function showHide() {
$('#main-content').hide();
$('#progress').show();
}
Simple JSFiddle demo
document.forms is an object containing the names of forms not the IDs.
If your form doesn't have a name of input (<form name="input">...</form>), the jQuery selector you're binding to won't work. Instead you'll need to use $('[name=input']).submit(...).
form submit reloads page.
hence in your head section add:
$(window).load(function() {
// Animate loader off screen
console.log("loading");
$("#dvLoading").fadeOut(2000);
});
I've got a dynamic table filled by a recordset from MYSQL.
Each row has it's own delete button (image) to delete the specific row.
This button has a class="button".
I'm using a JQuery popup modal to get a popup when a delete button is clicked.
In this JQuery script i'm creating a variable which contains the numeric value of the first td cel of the row that has been clicked on.
This all works perfectly.
What i'm trying to accomplish is to use this variable on the same php page.
Here is where my knowledge runs out.
I've read some examples where Ajax is the solution for this, but i lack the knowledge to use these examples for this solution.
JQuery code:
<script src="../javascript/jquery-1.8.2.js"></script>
<script src="../javascript/jquery.reveal.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function(e) { // Button which will activate our modal
var value=$(this).closest('tr').children('td:first').text();
alert(value); // this works
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 500, // how fast animtions are
closeonbackgroundclick: false, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
</script>
I've been trying too much that i don't see the logic anymore.
I hope that someone can help me with this.
The issue is that your JavaScript runs in the client -- the user's web browser -- while your PHP runs on your server. It's a two-stage process: first, all the PHP is executed on the server and the HTML is rendered, which is then sent to the client (the browser). Then, the client executes all the JavaScript on the page.
You need some way to communicate the JS variable (value) to your server if you want to be able to use it in your PHP code. AJAX is one such way, but it would be helpful to have more information on how exactly you want to use this information in your PHP.
Edit: based on your comments above, something like this should work. You'll have to give your Yes button an id attribute (here I'm assuming the id is yesButton).
$(.button).click(function() {
var value=$(this).closest('tr').children('td:first').text();
$("#yesButton").attr("href", "delete_verlof.php?id=" + value);
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 500, // how fast animtions are
closeonbackgroundclick: false, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
The important thing to note is that the JS variable does not exist yet at the time at which your PHP executes, so it is not available to the PHP. What I've done here instead is to dynamically change the href of the Yes button whenever the user clicks a td, which should have the desired effect.
If your using this in a form, then you could create a hidden input field with a unique id and add it with.
$('#idOfField').val(value);
And then use php to get the element from wherever you put it in your code.
Other then you might find attr usefull. For an example
$('#idOfField').attr('data-id', value);
Where the ID can be an div, span, i, a, bold, strong etc etc etc.
I'm just curious if things like this is possible >> While still loading a web page, is it possible to return an onbeforeunload like dialog when a user try to navigate to other page or close the browser ?
Well i made this to display a message to be display before someone quits my site, and this gives them the option to stay or leave the page.
I used jquery so you have to add the link to jquery to your site, yo can do this calling a script tag with the src pointing to the next url:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
and after that just add the next code on your webpage
$(document).ready(function()
{
var flag = true;
function Close()
{
if(flag)
{
return "Are you sure you want to leave?";}
}
}
window.onbeforeunload = Close;
});
This will call the Close function at the onbeforeunload event, and will ask if you want to leave or stay
Hope this helps
The thing is I have this set of code that exports a PDF file, I used TCPDF on this one.
$('#export').click(function() {
var conf = confirm("This will generate a PDF file of all the list of products. Continue ?");
if (conf)
{
$('#ajaxloader').css('visibility', 'visible');
var href = "http://"+url+"/export/items.php";
window.open(href, '_self');
}
});
When I click the button, it downloads the pdf file that contains a list of products, but my problem it's taking about more than 30 seconds to render, I already set the time limit so I'll no problem with that, what I want to do is to display a loader while rendering the pdf file, then hide it afterwards.
I'm pretty new to jQuery, AJAX, and web dev in general, so this is driving me crazy.
I've got an AJAX request that pulls in page content into the current one, and I'm trying to coerce jQuery into displaying it like so:
Fade out current content
Smoothly resize the div to the new content
Fade in new content
So far, I've got it written up something like this. I've changed it a round a bunch, so this might not be the closest I've gotten, but the same problem still persists.
$("#page-data").fadeOut(600).html(data);
$("#page-data").ready(function() {
var newHeight = $('#' + divname).height();
$("#page-data").animate({
height: newHeight,
}, 600, function() {
$("#page-data").fadeIn(100);
});
});
Where page data's got this simple style:
#page-data { position: relative; overflow: hidden; }
My problem is that $('#' + divname).height() doesn't account for images and other things that could occur in the div. I tried using .load() instead of .ready(), but then the callback isn't called at all.
Since there isn't any HTML included in the question, I'm assuming that you have your container <div id="pageData"> that holds another <div> (identified by divname), into which you are loading your dynamic content.
Firstly, $(..).ready() can only be used used on the document object, so using applying it to a <div> goes against jQuery's documentation.
The best way I can think to acheive your goal is to keep track of any images in the HTML that you have dynamically loaded via AJAX and monitor them until they have all been loaded. Then you can apply your logic for setting the height of your container <div>.
The problem is that if we apply a load event handler to an image that has already loaded, then it won't fire. Working out whether an image has been already loaded can be tricky, but the received wisdom seems to be to check the complete property (if it exists) or check whether the the height of the image is greater than 0:
function imageLoaded(img) {
if(typeof img.complete != 'undefined') {
return img.complete;
}
else {
return(img.height > 0);
}
}
Now we can take the following steps:
Fade out the <div> (e.g. #pageContent) that will contain your AJAX
content
Load the AJAX content
Search through the new content for all
images, count how many there are, add a load event handler to each
one, then cycle through each image checking if it's already loaded
and manually firing the load event if so.
In the load event we decrement the counter. When the counter reaches zero, then calculate the height of the container <div> and fade in the content
For example (see here for a working jsfiddle):
$pageData = $('#pageData');
$pageContent = $('#pageContent');
$pageData.height($pageData.height());
$pageContent.fadeOut(function() {
$pageContent.load('http://your.dynamic.content', contentLoaded);
});
function contentLoaded() {
var $loadables = $(this).find('img');
var loadableCount = $loadables.length;
// Attach onLoad event handlers to each image
$loadables.load(function() {
loadableCount--;
checkAllLoaded(loadableCount);
});
// Trigger the onLoad events manually for any images that have already loaded
$loadables.each(function() {
if(imageLoaded(this)) {
$(this).trigger('load');
}
});
}
function checkAllLoaded(loadCount) {
if (loadCount <= 0) {
$('#pageData').animate({
height: $('#pageContent').height()
}, 600, function() {
$('#pageContent').fadeIn();
});
}
}
So I have I this javascript that loads into a div the contents of my php (which gets data from a mysql database). When a different button is clicked, it calls the eat.php file again, with the new data to retrieve from MySQL and again loads the new data into the div.
<script type="text/javascript">
$(function() {
$("a[name=eat]").click(function() {
$("div.nav a[name=eat]").css({"background-color":"#666966","color":"#fff"});
$(".user-main").load("eat.php");
});
$("a[name=analyze]").click(function() {
$(".user-main").load("eat.php",{ name: "John", time: "2pm" });
});
});
</script>
And that is ok and everything. My question is how can I make this "slide" into the new div, like it's being scrolled horizontally? I am having no luck with the animate feature in jQuery, and would prefer not to use any frameworks. Also, is the correct way to check for a jQuery post by doing:
if (isset($_POST['name']))
in my eat.php file?
I am not quite sure what you are asking.
If you want to ensure the data you have just added is scrolled into view, then you can use code like this
if (document.all) {
document.body.scrollIntoView(false);
} else {
document.body.insertAdjacentHTML('beforeEnd','<a name="' + a + '"><\/a>');
window.location.hash = '#'+a;
}
The trick with insertAdjacentHTML is inserting a label into the screen and then telling the browser to jump to it. The label is the contents of a javascript variable which must be different each time the code is run.
If you wish to slide a whole division into view, then you will have to use a timer. Set up the div so the over-flow is hidden and it is positioned off screen, using position relative and large top or left/right values. Then, each time the timer goes off, decrease the offset towards zero.
If the timer goes off every 50ms and you move only a few pixels, you will get 20fps and it will appear quite smooth.