Bootstrap spinner-border disappear - javascript

currently I try to make website which should print some line after I click a link.
So far so good, now I want to add a spinner-border from bootstrap. It works pretty well but I have no idea how to remove it again.
<p>New here? Sign up here.</p><br>
<?php
if(isset($_GET['signup'])) {
echo '<div class="spinner-border" role="status"></div>';
for($i=0;$i<3;$i++){
flush();
ob_flush();
sleep(1);
}
echo "<span><h1>Sign up</h1>";

So I think what you're trying to do isn't really something you'd want to use PHP for.
Please correct me if I'm wrong, but it looks like what you want is:
Show a page with a link to a sign up form
When you click the link, show a spinner
Hide the spinner after a second, and show the Sign up page
PHP can't be used to create a dynamic page like this, as it executes all of the code on the server, before sending it to your browser.
Really, if what you want is a link to a sign up page, all you need is a separate file instead, as then you can link to that and when you click it, the new page content would be there.
However, if you want to use the spinner, things will get more complicated as you would need to use some ajax to load the page content.
Alternatively, if all you want is a spinner to show before showing the content, you could let the page reload as normal, showing the spinner. Then hide the spinner using JavaScript.
If you had your spinner-border class, you could do something like
document.getElementsByClassName('spinner-border').style.display = 'none';

Related

Use Jquery load method unlimited times for a like button?

I am programming something like a tinder picture which you vote on ( but not for dating but the same concept). I want this Voting window, or rather said div, to refresh after you clicked the for example like button. But not the whole page because of the cashed images in the browser and the ugly static look when you post data via php post method and have to refresh the whole page. I did structure it like this now:
$('#indexMiddleLayout').load('rateableWindow.php');
The above line comes before in the script tag so the content gets loaded to begin with and the next code line comes after to make it possible to reload again when a sertain button is clicked.
$('#iML-VotingButtonRight').click(function () {
$('#indexMiddleLayout').load('rateableWindow.php');
});
This refreshes my div now but only once :/
I was putting the whole div and it's containing stuff into a seperate php file which i, after you clicked the like button, want to refresh with a ajax request which adds data to the sql database telling it has been liked and after that success i'd like the div or rather the included page to reload so only that div refreshes.

Reload iFrame, wait till it is loaded, open URL in same iFrame

so when it comes to Javascript, I have no idea what I am doing.
I have a main page, with two iFrames. The main "content" iFrame holds the main content, in this case, the results from a MySQL database SELECT. The bottom iFrame is used to add rows to the same table.
When the 'add row' form is submitted from the bottom iFrame, I want the 'content' iFrame to load the list of results, and scroll to the newly added result.
I use
Currently, the only way to make this work that I have found is echo-ing the following code once upon successful row entry:
parent.document.getElementById('content').contentWindow.location.reload();
parent.document.getElementById('content').src = '../pages/results.php#".$id."';
The $id variable is set with $mysqli->insert_id;
The above code works, but it's obviously bad coding, on slower connections, for example, I can imagine the browser will fail to change the src as the reload action is still performing.
So, what can I add to my code, or what can I change my code to, to make the javascript either:
Reload the 'content' iFrame to show the new row and then navigate to the anchor to scroll the user to the newly created row. or
Do all of that in one simple action (I've found just using the bottom line of the two lines on it's own doesn't work, so the reload seems necessary to me at the moment.)

Simulate button click with loadContent

Right now when user want to go back they are required to click a button. Here is the code that generate said button :
echo "<button onclick=\"loadContent('client/profile_edit.php?id=182&next_tab=user_records');\" value=\"Back\" type=\"button\" class=\"negative iconstxt icoNegative\"><span>Back</span></button>";
Now I want to make it automatic. I want it to redirect automatically. Is there anyway I can simulate button click with PHP? JavaScript redirect does not work mainly because I have problem with this part client/profile_edit.php
It's a PHP page inside a page. I'm sorry because I don't know what it's called. Maybe it's a frame?? The redirect code below partially worked:
echo ("<SCRIPT LANGUAGE='JavaScript'>
window.location.href='client/profile_edit.php?id=182&next_tab=user_records';
</SCRIPT>");
I do get redirected to client/profile_edit.php but there's no CSS at all. That's mean a page with no styling.
So anyone know how can I simulate button click? Please comment if what I'm wrote does not make any sense/clear. Thanks in advance.

Need a link or button click to trigger a php function on my Codeigniter site

I want to know how I should be doing this. I feel like I'm missing something.
I have links and buttons on my main page that i want to trigger my PHP code. My PHP code varies.
I have one that uploads two xml files and loads them into my mysql table
one runs a large update query
one creates xml's from my sql table
I have them all working now. Thats not the problem. The problem is I hate how I am having to load another PHP page with just code then redirect back to the page i started on.
What i want is to be able to click the button or link and run the code then display on the page or bootstrap modal that its been done.
I was trying to have a bootstrap modal with progress bar pop up while running these functions then when done user clicks okay to close modal popup.
What is the best practice here? is this not conventional?
I have a CodeIgniter site setup with Ajax, Jquery and Bootstrap.
One other thing i looked at trying to do what using a controller or helper to do the work but i just can seem to understand the best practice.
you can create a controller specific for ajax operation and put all function in to that controller.
e.g.
class myajax extends CI_controller
{
... ... ....
function create_xml()
{
}
}
and use site_url('myajax/create_xml') as location in ajax call.

jQuery Print - Show Preview before print

I would like to print a portion of the page, that is a div.
Also I need css files referred, so it will get printed as we see in the page.
I tried to use jQPrint then printThis . But my IE7
browser was getting crashed when i click a button on second time. Not
sure what is the problem. My page has lot of elements (100+ input
fields and 3 Grids)
Finally, I followed this http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm and implemented. Now no crash!
Now how can I show a print preview dialog before sending printer?
Something like this https://github.com/etimbo/jquery-print-preview-plugin, I tried this too but its not working :(
I did this same task in a prior job, and completed y the following example. We set it up to where what ever part of the design we were sending to a printer, we would replicate the HTML, and create a dynamic page with that content, and then trigger the browser print dialog. If you want to do what you are asking, without a lot of "magic", this is a good way to handle it.

Categories

Resources