Constraining tank_auth views to a div on a web age - codeigniter

Hi Tank_auth & web Gurus!
I have tank_auth working with my CodeIgniter application. Currently, the login/register views of tank_auth take over the entire screen. On my website, I would like the login/register views to occupy a div that I define. For example, I want the login/pw fields to just appear in the top right corner and not take over the whole screen...Can you point me in the right direction? - I read somewhere that I'd have to somehow constrain the view in a div but for the life of me I did not understand how!
Much obliged,
Mmiz

Create div for the login. Create a view for the login. Populate the div with a javascript call to the view.
<?php
//controller
//users.php
class Users {
//...
public function div_login()
{
$this->load->view('div_login_view.php');
}
//...
//------------------------------------------
//view
//div_login_view.php
echo form_open('users/login');
echo form_input('username');
echo form_password('password');
echo form_submit('Login');
echo form_close();
//------------------------------------------
//index page (or whatever page you want the form on)
<div id="login_div"></div>
<script type="text/javascript">
$(document).ready(function(){
var login_form = $.get('/users/div_login');
if (login_form.status === 200){
$('#login_div').html(login_form.responseText)
}else{
alert('There was an error getting the login form.');
}
})
</script>

Related

Can't get wordpress ajax form to submit

I am porting an application to WordPress. It uses a form to select what attributes the customer is looking for in an Adult Family Home via checkboxes and drop-downs. It re-searches the database on each onchange and keyup. Originally I had the application standalone in PHP, but when I migrated it to WordPress I started having issues.
Currently in WP I have the code conditionalized ($DavesWay == 1) to do ajax the normal no-WordPress-way and ($DavesWay == 0) to do it the WordPress-way.
In the non-WordPress-way, the ajax works fine EXCEPT that I get a WP header and menu between the search form and the results-div that Ajax puts the data in. I get no errors from WP or in the JS console. In the WP-way The search form displayed, but nothing happens when I check any of the checkboxes. The JS console displays
POST http://localhost/demo4/wp-admin/admin-ajax.php 400 (Bad Request)
But I don't see any way to tell exactly what it is complaining about. How should I troubleshoot this?
Troubleshooting = Examine the HTML output, lots of echos and exits in PHP code, look at JS console.
function submitPg1(theForm) {
// Used with onChange from "most" form elements, but not on those that change the page
// rather than the select criteria. Such as rowsPerPage, pageNumber etc.
setById("pageNo", "1"); // set inital page
mySubmit();
}
function mySubmit(theForm) { // The actual ajax submit
// DO NOT set page number
jQuery.ajax({ // create an AJAX call...
data: jQuery("#asi_search_form").serialize(), // get the form data
type: jQuery("#asi_search_form").attr("method"), // GET or POST
url: jQuery("#asi_search_form").attr("action"), // the file to call
success: function (response) { // on success..
jQuery("#result").html(response); // update the DIV
}
})
}
function setById(id, value) { // Used to set vales by Id
x = document.getElementById(id).value;
x.value = value;
}
// 1st submit with blank selection
jQuery(document).ready(function () { submitPg1(this.form) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Code fragments: (from the displayed page source)
<div id="asi_container" class="asi_container" >
<noscript><h2>This site requires Javascript and cookies to function. See the Help page for how to enable them.</h2></noscript>
<div id="searchForm">
<form id="asi_search_form" name="asi_search_form" method="post" action="http://localhost/demo4/wp-admin/admin-ajax.php">
<input type="hidden" name="action" value="asi_LTCfetchAll_ajax" style="display: none; visibility: hidden; opacity: 0;">
<table id="greenTable" class="asi_table" title="The Green areas are for site administration, not typical users">
<tbody>
PHP code:
$DavesWay = 0;
if ($DavesWay == 1){ //echo "Daves Way Setup"; // Dave's way, which works but prints the menu twice
if( $operation == "submit"){
require("asi_LTCfetchAll.php"); // for each onchange or onkeyup
}else{
add_filter( 'the_content', 'asi_tc_admin', '12' ); // Initial page refresh # must be >12
}
}else{
// The WordPress way that I could't get to work -- asi_LTCfetch never gets called
function asi_LTCfetchAll_ajax(){
//echo "<br /> Goto to Submit function"; // DEBUG
require($asi_plugin_dir . "/includes" . '/asi_LTCfetchAll.php');
}
add_action( "wp_ajax_asi_LTCfetchAll_ajax", "asi_LTCfetchAll_ajax" ); // admin users
add_action( "wp_ajax_nopriv_asi_LTCfetchAll_ajax", "asi_LTCfetchAll_ajax" ); // non-logged in users
add_filter( "the_content", "asi_tc_admin", "12" ); // Initial page refresh # must be >12
}
Try changing the JavaScript to the way WordPress recommends it in their documentation:
var data = {
'action': 'my_action',
'whatever': 1234
};
jQuery.post(ajaxurl, data, function(response) {
alert('Got this from the server: ' + response);
});
I suggest trying following URL: https://codex.wordpress.org/AJAX_in_Plugins
Also you can use the plugin: https://wordpress.org/plugins/ajax-search-lite/

How can I change the style of a div on return from a form submit action in Razor MVC3?

I have a Razor/ASP/MVC3 web application with a form and a Submit button, which results in some action on the server and then posts back to the form. There is often some delay, and it's important that users know they should wait for it to complete and confirm before closing the page or doing other things on the site, because it seems users are doing that and sometimes their work has not been processed when they assume it has.
So, I added a "Saving, Please Wait..." spinner in a hidden Div that becomes visible when they press the Submit button, which works very nicely, but I haven't been able to find a way to get the Div re-hidden when the action is complete.
My spinner Div is:
<div id="hahuloading" runat="server">
<div id="hahuloadingcontent">
<p id="hahuloadingspinner">
Saving, Please Wait...<br />
<img src="../../Content/Images/progSpin.gif" />
</p>
</div>
</div>
Its CSS is:
#hahuloading
{
display:none;
background:rgba(255,255,255,0.8);
z-index:1000;
}
I get the "please wait" spinner to appear in a JS method for the visible button, which calls the actual submit button like this:
$(document).ready(function () {
$("#submitVisibleButton").click(function () {
$(this).prop('disabled', true);
$("#myUserMessage").html("Saving...");
$("#myUserMessage").show();
$("#hahuloading").show();
document.getElementById("submitHiddenButton").click();
});
});
And my view model code gets called, does things, and returns a string which sets the usermessage content which shows up fine, but when I tried doing some code in examples I saw such as:
// Re-hide the spinner:
Response.write (hahuloading.Attributes.Add("style", "visibility:hiddden"));
It tells me "hahuloading does not exist in the current context".
Is there some way I am supposed to define a variable in the view model which will correspond to the Div in a way that I can set its visibility back from the server's action handler?
Or, can I make the div display conditional on some value, in a way that will work when the page returns from the action?
Or, in any way, could anyone help me figure out how to get my div re-hidden after the server action completes?
Thanks!
Is this done with ajax? I would assume so because the page is not being redirected. Try this:
$(document).ready(function () {
$("#submitVisibleButton").click(function () {
$(this).prop('disabled', true);
$("#myUserMessage").html("Saving...");
$("#myUserMessage").show();
$("#hahuloading").show();
document.getElementById("submitHiddenButton").click();
});
$("#hahuloading").ajaxStop(function () {
$(this).hide();
});
});
As an aside, you no longer need runat=server.

Magento OnePageCheckout Redirect After "Place Order" Click

can anyone help with the following issue.
Once a customer in onepagecheckout clicks the „order now“ button I would like to show a custom page for 2-3seconds and the forward to either payment provider or thankyou page.
Currently I have an observer on
"checkout_type_onepage_save_order_after"
calling my custom model/method.
In this model/method I do a...
$this->_forward($url); //with $url being a custom controller/method
$res->sendResponse();
exit;
In this custom controller/method I load and render my layout the show my *.phtml – file and then...
$url = Mage::getUrl("???");
$this->_forward($url);<
$res = Mage::app()->getResponse();
$res->sendResponse();
And this is where I am lost (or maybe I am totally wrong on the whole thing).
First of all, the controller does not forward at all (whatever url or controller is given).
Second how do I know where to redirect to (if its payment provider or thank you page)
Is there a better way to „simply“ load a *.phtml after user clicks „order now“ and before he is redirected to either thank-you-page or payment-provider.
The phtml is user to load tracking code which must be placed and loaded in html.
I suggest instead that you consider doing the following:
Adding a javascript action to the place order button in the order review which will effectively issue an in-screen modal or popup
The click issuing the modal will set a timeout of 3000ms (3 seconds) which will then fire the order submit Ajax that Magento uses. This is important as the order submit and the redirect are dependent on AJAX.
This example jQuery script (requires adding jQuery to your Magento site, which is not standard) would set the timeout, issue the modal / popup I would add this code to the following file:
/app/design/frontend/[your theme]/template/checkout/onepage/review/button.phtml
Add a class to this line and remove the onclick event so you can capture the click and interject your timeout:
<button type="submit" title="<?php echo $this->__('Place Order') ?>" class="btn-place-order button btn-checkout"><span><span><?php echo $this->__('Place Order') ?></span></span></button>
<script>
$('#myform').submit(function(event) {
event.preventDefault();
//issue the popup - put your html in here:
var html = '<div style="position:absolute; top:0; left:0; min-height: 100%; width: 100%; background-color:white;"><h1>I am a popup</h1></div>';
$('body').append(html);
var self = this;
window.setTimeout(function() {
review.save();
}, 3000);
});
</script>

How to hide jQuery tabs until authenticated and add or show them once authenticated in MVC3?

Summary
I'm currently trying to build a Web application using MVC 3 architecture and jQuery UI controls. I have been able to display tabs and navigate through them so far.
Now, I am able to get the LogOn page to display on my first tab as it is the first required action to this application.
Once authenticated, I'd like to be able to add some other tabs which allows to use use this application.
The application is about a phone book listing containing known people mailing address.
That said, the workflow of this application would be:
Authenticate upon first arrival on the site;
If the user is not yet registered, the app shall let this very user register once and for all, using the same jQuery UI tab or maybe showing a new tab for registration or else, a modal dialog box;
Once authenticated from step 1, the user has now access to the different features of the site.
For example, let's say I want to register a new user and I am this web-application administrator. I shall first authenticate against this application, and then I'll see the common tabs that any user can see, plus a special tab for creating/registering new users who'll be able to authenticate against this app. once registered successfully by the site admin.
I have already been able to display the LogOn view which I deleted the initial view created by the template to recreate as a partial view to be able to contain it within the jQuery UI tab body. This works fine.
I also have a SelectTab method within my HomeController which shall know what partial view to display depending on the value of the id it is passed in as an input parameter.
Now, when I try to navigate from the LogOn partial view on the first jQuery UI tab, that is actually the only available option yet, clicking the Register link won't let me show the Register partial view within the same tab.
Code samples
The HomeController class:
public class HomeController : Controller {
public ActionResult Index() { return View(); }
public ActionResult SelectTab(int id) {
switch (id) {
case 0: return RedirectToAction("Register", "Account");
default: return RedirectToAction("LogOn", "Account");
}
}
}
The AccountController class:
public class AccountController {
public ActionResult LogOn() { return PartialView(new LogOnModel()); }
public ActionResult Register() { return PartialView(new RegisterModel()); }
}
Both models (LogOnModel, RegisterModel) stated here are the template's default.
And my _Layout.cshtml shared view:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/south-street/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(window).load(function () {
$("#tabs").tabs({ select: function (event, ui) { selectTab(getSelectedTab()); } });
logIn();
});
function logIn() {
selectTab(-1);
selectTab(0);
}
function selectTab(index) {
var url = '#Url.Content("~/Home/SelectTab/")' + index;
var targetDiv = "#tab" + index;
$.get(url, null, function(result) { $(targetDiv).html(result); });
}
function getSelectedTab() { return $("#tabs").tabs("option", "selected"); }
function setSelectedTab(index) { $("#tabs").tabs("option", "selected", index); }
</script>
</head>
<body>
<div id="tabs">
<ul id="menu">
<li><span>Authenticate</span></li>
#if (Request.IsAuthenticated) {
<li><span>About</span></li>
}
</ul>
<div id="tab0"></div><div id="tab1"></div>
</div>
#RenderBody()
</body>
Development environment
I'm using:
VS2010 and .NET 4.0;
jQuery UI (see _Layout.csthml code sample for version and style template);
ASP.NET MVC3.
Question(s)
*How to render the Register partial view once one clicks the 'Register' link contained in the 'LogOn' partial view into the same tab?
Perhaps hiding the actual tab and showing another for registration would appear to be simpler? And yet, how to achieve this?*
I suggest that every other tab (except login) to be loaded via ajax. You submit the login from via ajax and on succesful response you destroy the login tab then add dynamically a new one with href set to an ajax action.
You can accomplish what you want to do, but it will require lots of jquery and ajax (I recommend to give knockoutjs a try).The server-side part is the easiest one.
I think it's also better to call the actions directly without the SelectTab switch.

Reloading everything but one div on a web page

I'm trying to set up a basic web page, and it has a small music player on it (niftyPlayer). The people I'm doing this for want the player in the footer, and to continue playing through a song when the user navigates to a different part of the site.
Is there anyway I can do this without using frames? There are some tutorials around on changing part of a page using ajax and innerHTML, but I'm having trouble wrapping my head aroung getting everything BUT the music player to reload.
Thank you in advance,
--Adam
Wrap the content in a div, and wrap the player in a separate div. Load the content into the content div.
You'd have something like this:
<div id='content'>
</div>
<div id='player'>
</div>
If you're using a framework, this is easy: $('#content').html(newContent).
EDIT:
This syntax works with jQuery and ender.js. I prefer ender, but to each his own. I think MooTools is similar, but it's been a while since I used it.
Code for the ajax:
$.ajax({
'method': 'get',
'url': '/newContentUrl',
'success': function (data) {
// do something with the data here
}
});
You might need to declare what type of data you're expecting. I usually send json and then create the DOM elements in the browser.
EDIT:
You didn't mention your webserver/server-side scripting language, so I can't give any code examples for the server-side stuff. It's pretty simple most of time. You just need to decide on a format (again, I highly recommend JSON, as it's native to JS).
I suppose what you could do is have to div's.. one for your footer with the player in it and one with everything else; lets call it the 'container', both of course within your body. Then upon navigating in the site, just have the click reload the page's content within the container with a ajax call:
$('a').click(function(){
var page = $(this).attr('page');
// Using the href attribute will make the page reload, so just make a custom one named 'page'
$('#container').load(page);
});
HTML
<a page="page.php">Test</a>
The problem you then face though, is that you wouldnt really be reloading a page, so the URL also doesnt get update; but you can also fix this with some javascript, and use hashtags to load specific content in the container.
Use jQuery like this:
<script>
$("#generate").click(function(){
$("#content").load("script.php");
});
</script>
<div id="content">Content</div>
<input type="submit" id="generate" value="Generate!">
<div id="player">...player code...</div>
What you're looking for is called the 'single page interface' pattern. It's pretty common among sites like Facebook, where things like chat are required to be persistent across various pages. To be honest, it's kind of hard to program something like this yourself - so I would recommend standing on top of an existing framework that does some of the leg work for you. I've had success using backbone.js with this pattern:
http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/
You can reload desired DIVs via jQuery.ajax() and JSON:
For example:
index.php
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<a href='one.php' class='ajax'>Page 1</a>
<a href='two.php' class='ajax'>Page 2</a>
<div id='player'>Player Code</div>
<div id='workspace'>workspace</div>
one.php
<?php
$arr = array ( "workspace" => "This is Page 1" );
echo json_encode($arr);
?>
two.php
<?php
$arr = array( 'workspace' => "This is Page 2" );
echo json_encode($arr);
?>
ajax.js
jQuery(document).ready(function(){
jQuery('.ajax').click(function(event) {
event.preventDefault();
// load the href attribute of the link that was clicked
jQuery.getJSON(this.href, function(snippets) {
for(var id in snippets) {
// updated to deal with any type of HTML
jQuery('#' + id).html(snippets[id]);
}
});
});
});

Resources