I am trying to create a webpage using jQuery mobile, part of my website includes a login feature and I am trying to show the login form in a popup on the page. The button linking to the popup is to be in the header of the page.
My problem is that the popup does not display when I click on the login button :/
I tried to remove the ui-selectmenu-hidden class from the div but that resulted in the popup being displayed without jQuery styles as soon as the page loads.
I know the code I have works without the page or header data-roles as I tested the exact code on another document without those divs.
Here is the code that's giving me the problem:
<div data-role="page">
<div data-role="header">
<h1>Hello World!</h1>
Open Popup
</div>
</div>
<div data-role="popup" id="popupLogin" data-theme="b" class="ui-popup-container ui-selectmenu-hidden popups" data-overlay-theme="a">
<form id="loginForm">
<input type="text" placeholder="Username..." />
<input type="text" placeholder="Password..." />
<input type="button" value="Login" data-theme="b" />
<p>New to The Social Network?</p>
<input type="button" value="Register here" />
</form>
</div>
Any help here would be appreciated. It's likely I've made a silly mistake somewhere, but for the life of me I cannot find it.
If the popup will only be accessed from this one page. Move the popup div inside the data-role="page" div at the same level as the header/content/footer.
If you want to access the login form from several pages, keep the markup as is, but add script on document ready to initialize the widget and enhance the content:
$(function(){
$( "#popupLogin" ).enhanceWithin().popup();
});
DEMO
Related
I'm making a chat application in a pop up mode in the corner of the website. I'm using SignalR for the chat in ASP.NET, C#. The problem is, that not showing the message in the textarea. Here is my code for my HTML file:
<div class="chat-popup" id="myForm">
<form action="/Wilcome" class="form-container">
<h1>Chat</h1>
<label><b>Message</b></label>
<textarea id="messagesList" readonly></textarea>
<textarea placeholder="Type message.." id="messageInput"></textarea>
<button type="button" class="btn" id="sendButton">Send</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
The id="messagesList is not showing. This is in my chat.js file, where showing the sent messages. When I tried to use in a simple <ul id="messagesList"></ul> thats worked but in a lots of messages its going to the infinity up and cant scroll down, so its better to make in textarea (i found only this one for it, if you can tell any one like this textarea, please share)
You can actually apply a scrollbar to more elements than the textarea.
You can have a div, give it a height in CSS and set its overflow-y to scroll
<div id="messagesList"></div>
#messagesList{
height:300px;
overflow-y:scroll
}
How to enable automatic scroll to focus input when keyboard are open ?
I create a simple demo where are 2 inputs:
<div style="height:300px;"></div>
<form action="/">
<input type="text" />
<br/>
<input type="text" />
<button>ok</button>
</form>
<div style="height:300px;"></div>
When I click on input in the bottom on the page, keyboard open and hide input.
I open from my phone w3s site ant on them when I click on input when it of the bottom of the page browser automatically scrolled it into view.
What I need to do that automatic scroll into view of focus input will start work on my demo ?
I sloved the problem. In my case it was because the body height was smaller then content height. And on codepen I think it was because it render via iframe.
I'm using Formspree - https://formspree.io/ to redirect my forms to my email as I'm hosting my website on a static page.
I'm also using an external library Toastr (http://codeseven.github.io/toastr/) to make a small notification appear once the user clicks the 'Submit' button for the form.
The problem is that I cannot get Formspree and Toastr to run at the same time. When I implement both of them, none of the features work.
Code: (Please say if I need to add more for the problem to be clearer).
<form action="http://formspree.io/emailhere" method="POST">
<div>
<div class="row">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u 12u(mobile)">
<input type="email" name="_replyto" id="email" placeholder="Your Email" />
</div>
</div>
<div class="row">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row 200%">
<div class="12u">
<ul class="actions"> //Pressing submit redirects to a 'thank you' page
<li> <input name="submit" type="submit" value="Send" id="submit"/> </li>
<li> <input type="reset" value="Clear Form" class="alt" /> </li>
</ul>
</div>
</div>
</div>
</form>
Now when you press the submit button it redirects you to a Formspring thank you page. When I add the Javascript for the toast notification it does not even do this meaning the JavaScript 'disrupts' the submit button functionality somehow.
$(document).on('click', '#submit', function(evt){
evt.preventDefault();
toastr.success('Thanks for the email, will be in touch promptly.');
});
Thanks for looking.
Edit: So I want it so both of them work together. This is the code for HTML were you can choose the redirect page after you press the submit button:
<input type="hidden" name="_next" value="//site.io/thanks.html" />
I want it so it does not redirect anywhere but does do my JS function notification.
You're preventing the default behavior (to redirect to the form URL) in your click handler. Simply remove
evt.preventDefault();
And it should work (although obviously, since your page is being redirected, the Toastr popup won't be visible).
If you want it to open in a new tab, you should prevent the default behavior (as you do currently) and then open the URL manually.
The best way to get around this is to use a button element instead of the submit input element. This would require you to submit the information to an endpoint of some sort using ajax and then notifying the browser of the submission using your javascript function. All of this is to avoid the redirect that happens when you use the default browser behavior to submit the form. If you don't use ajax, you have to redirect due to default browser behavior.
To reduce the file size on my index page i have tried to load in div from another page into a div on current page using ajax, the problem is i get the entire page when i would rather just load certain div from the external file instead.
var login = document.getElementById('display');
login.innerHTML = '<object type="text/html" data="view_login.php"></object>';
Where display is the div i want to load in new content into.
index
<div id="display">Ajax content goes here</div>
view_login.php
<div id="visible">
<form action="login/login.php" method="post">
<input type="text" name="username" placeholder="username" />
<input type="password" name="password" placeholder="password" />
<input type="submit" value="Sign in" />
</form>
</div>
how could i load visible instead of entire page with body, header and everything?
You can use the load function from jquery : http://api.jquery.com/load/
Check the "Loading Page Fragments" paragraph to load a specific bloc of the page.
It will be something like $('#display').load( "view_login.php .visible" ); in your case
I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/
The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.