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
Related
I need to add password and username automatically and then click "Enter" to Shadow DOM elements:
<input type="text" class="_y" aria-required="true" autocapitalize="off" autocorrect="off" maxlength="30" name="username" placeholder="username" value="">
#shadow-root (user-agent)
<div id="inner-editor"></div>
<div pseudo="-webkit-input-placeholder" id="placeholder" style="visibility: visible; text-overflow: clip;">Username</div>
</input>
</div>
The second field is the same.
I have the code for adding:
document.querySelector('input').value = "username";
document.querySelectorAll('input')[1].value ="password";
It's works, I see my username and password in the necessary fields. But when I click the button using the next code:
document.querySelector('button').click()
I see the process starts and then nothing and the fields become empty.
The button code:
<span class="_r ">
<button class="_a">Enter</button>
</span>
If I do this manually, everything works without problems. Why does not automatic mode work?
I's because when you click on the <button> your form is sent.
If you didn't specify where to send the form, the current page is requested again, and the content of the <input> tags is reset.
You should set the onsubmit attribute like this:
<form onsubmit="return false">
...or call a JavaScript function that will process the form (and return false if you don't want to navigate to a page).
<form onsubmit="process()">
Or specify the URL where to send the form in the action attribute:
<form action="/form">
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
This is the form code given in the fancybox popup iframe page.
I need to close this popup and redirect the parent page to the
http://luxuryresortstayvouchers.com/newdesign/?p=list.php
when the submit button is pressed.
following function is effectively closing the fancybox popup but the parent page is not redirected to the desired location.
function closeMeUp()
{
parent.$.fancybox.close();
}
<form action=""http://luxuryresortstayvouchers.com/newdesign/?p=list.php method="post" target="_parent" class="form_class" enctype="multipart/form-data" >
<input class="vouch_num" type="text" placeholder="Checkin date" maxlength="25" size="50" id="datepicker" />
<input class="vouch_num" type="text" placeholder="Checkout date" maxlength="25" size="50" id="datepicker2" />
<br />
<input type="button" id="ok" class="submit_but" value="Submit" onClick="closeMeUp();" />
<input type="button" id="cancel" class="cancel_but" value="Cancel" />
</form>
Any help is highly appreciated.
Thanks.
You could use the parent.window.location.href property inside the onsubmit attribute of your (iframed) form like :
<form id="login_form"
onsubmit="javascript:parent.window.location.href='http://luxuryresortstayvouchers.com/newdesign/?p=list.php';" >
...
</form>
Notice that you don't have to force closing fancyBox since the page redirection will do the job.
Also notice that if you close fancyBox manually (without submitting the form), the parent page won't be redirected.
See JSFIDDLE
On my JSP page with multiple div tags, of which I want to make a particular div non refreshable so that it retains its value when the jsp submits a form to servlet.
I am loosing div data as soon as the form is submitted to upload files.
How to do this without using ajax?
I've searched a lot but only could find ways to make a div refreshable.
In my below JSP page code, the form myform is submitted to upload.java and is redirected back to this jsp page. Now, I don't want to loose the contents of box div.
My JSP page
<div id="box">${f1stat}<br>${f2stat}<br>${f3stat}</div>
<div style="position: absolute; right: -5%; top: 2%;">
<form method="post" name="myform" action="upload" enctype="multipart/form-data">
Left File : <input type="file" name="dataFile1" id="fileChooser1" />
Right File : <input type="file" name="dataFile2" id="fileChooser2" />
Config File :<input type="file" name="dataFile3" id="fileChooser3" />
Geco File : <input type="file" name="dataFile4" id="fileChooser4" />
<input type="hidden" id="myField" value="" />
<button type="button" id="execute" onclick="ValidateFile()">Click to Upload files</button>
<button type= "button" id="execute" onclick="saveTextAsFile()">Click to execute</button>
</form>
</div>
the box div is populated during execution by commands like
var err1 = document.getElementById("box");
err1.innerHTML = err1.innerHTML + "<br>" + "<span class='red'>Configuration file and Geco script should not be the same as left or right files. Please check your uploads</span>";
I am using the box div like a console display
Servlet redirecting by
RequestDispatcher rd = request.getRequestDispatcher("geco.jsp");
rd.forward(request, response);
What comes to mind is saving the data on first load into a session scoped variable, then checking if that variable has a value on subsequent loads before setting it. That way your value will be retained:
<c:if test="${empty test}">
<c:set var="test" value="${objectWithData}" scope="session" />
</c:if>
Then use the properties of the object saved in the var to display info in your div.
I created a form for users to register to my site, it uses Jquery to slide the form into view.
I just decided to turn off JavaScript in the browser to see if my PHP form validation is working properly, but the form is not being displayed is this to do with me setting the form element with CSS (display: none), or is their a tag that needs to be used within the HTML for this situation ?
<form class="form" method="post" action=register.php id="register">
<fieldset>
<label for="username">Username</label>
<input type="text" size="30" name="username" id="username" />
<br/>
<label for="email">Email</label>
<input type="text" size="30" name="email" id="email" />
<br/>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
<br/>
<label for="confirm paassword">Confirm Password</label>
<input type="password" name="password1" id="password1" />
<br/>
<input type="submit" name="submit" id="submit" value="Register" />
</fieldset>
</form>
CSS style
#register{
display: none;
Jquery
$(document).ready(function(){
$('#register').slideDown(800);
}
All three files are external.
Invert your idea. Use js to hide the form for those with js turned on.
If you are changing from display: none with JS it'll not be visible without JS.
Try to use <noscript> to show form or link to register page (eg. with nojs param) to handle cases when user got JS disabled.
Yes, it should be because of setting display: none on the form element.
You should add tag to handle situation when you don't have javascript. However though keep in mind that you'll have to reload page to show the form in such situation...
javascript and css are not strictly releated, so "display: none" is hiding your form
change the display value from none to visible (un-none) in the onload event
Have JS hide the form. Or use feature detection such as modernizr to see if JS is supported then only apply the style where it is. Eg .js #myform {display:none;}