I see some web sites use dynamic forms(I am not sure about how to call them!) to edit a group of data. For example: there is a group of data such as name, last name, city, country.etc. when user clicks on EDIT button, instead of doing postback, a form, consisisting of 2 textboxes + 2 comboboxes, dynamically opens to edit,And then when you click on Save button, edit form disappears, and all data updates..
Now, I know what happens over here is using Ajax for server calls and some javascript for dom manipulation.. I even found some jquery plugins for textbox editing.. However, I could not found anything for full implementation of form fields. Therefore I have implemented it on asp.net by jquery ajax calls and dom manipulation manually. here is my process:
1) when Edit button clicked: Make a ajax call to server to retrieve necessary formedit.aspx
2) it returns editable form fields with values assigned.
3) when Save button clicked: make ajax call to server to retrieve formupdateprocess.aspx page. it basically do the database updates and then return necessary DOM snipplet (...) to insert current page..
well ıt works but MY PROBLEM, is performance.. Result seems slower than samples I see in other sites.:((
IS there anything that I dont know? a better way to implement this??
I would keep the edit form on the client, but hidden with e.g. "style="display:none;", and then show it when the user clicks the edit button. Loading a form from the server in this event is very costly performance wise.
This is a very basic example and doesn't consider positioning the edit form etc.
<head>
<script type="text/javascript">
$(function () {
$("#showEdit").click(function () {
$("#editForm").css("display", "block");
});
});
</script>
</head>
<body>
<div id="editForm" style="display: none; position: absolute; z-index: 999;">
<fieldset>
<label for="surnameInput">Surname:</label>
<input id="surnameInput" type="text" />
<label for="firstNameInput">Surname:</label>
<input id="firstNameInput" type="text" />
</fieldset>
</div>
<input id="showEdit" type="button" value="Edit" />
</body>
This does mean your main page will have to carry the edit field values from first load, but very often that is a small price to pay, because the user accepts a wait at that time, not when they click a button.
I've used jQGrid in the past with ASP.NET (MVC doesn't support GridViews).
http://www.trirand.com/blog/
and demos at
http://trirand.com/jqgrid/jqgrid.html
(Check out the Row Editing ones).
Just an idea, but have you looked at Jeditable plugin which allows you to edit inline content?
And here is a tutorial, and the tutorial code with some improvements.
Here is how it is done if you are like me who loathes using plugins now and again.
The HTML:
<div id="pesa"><p>PERSONAL INFORMATION</p>
<ul>
EMAIL:<li class="editable">email</li>
NAME:<li class="editable">name</li>
TELLPHONE:<li class="editable">tel</li>
COUNTRY:<li class="editable">country</li>
CITY:<li class="editable">city</li>
</ul>
Then the CSS to cool things up:
#pesa a{
color: #000;
}
#pesa a:hover{
color: #;
}
#pesa a:hover{
text-decoration: none;
}
h1{
font-size: 30px;
padding: 0;
margin: 0;
}
h2{
font-size: 20px;
}
.editHover{
background-color: #E8F3FF;
}
.editBox{
width: 326px;
min-height: 20px;
padding: 10px 15px;
background-color: #fff;
border: 2px solid #E8F3FF;
}
#pesa ul{
list-style: none;
}
#pesa li{
width: 330px;
min-height: 20px;
padding: 10px 15px;
margin: 5px;
}
li.noPad{
padding: 0;
width: 360px;
}
#pesa form{
width: 100%;
}
.btnSave, .btnCancel{
padding: 6px 30px 6px 75px;
}
.block{
float: left;
margin: 20px 0;
}
Then the JavaScript:
$(document).ready(function()
{
var oldText, newText;
$(".editable").hover(
function()
{
$(this).addClass("editHover");
},
function()
{
$(this).removeClass("editHover");
}
);
$(".editable").bind("dblclick", replaceHTML);
$(".btnSave").live("click",
function()
{
newText = $(this).siblings("form")
.children(".editBox")
.val().replace(/"/g, """);
$(this).parent()
.html(newText)
.removeClass("noPad")
.bind("dblclick", replaceHTML);
}
);
$(".btnDiscard").live("click",
function()
{
$(this).parent()
.html(oldText)
.removeClass("noPad")
.bind("dblclick", replaceHTML);
}
);
function replaceHTML()
{
oldText = $(this).html()
.replace(/"/g, """);
$(this).addClass("noPad")
.html("")
.html("<form><input type=\"text\" class=\"editBox\" value=\"" + oldText + "\" /> </form>Save changes Discard changes")
.unbind('dblclick', replaceHTML);
}
}
);
So when someone hovers over the li items it turns blue just some colour to let the user know they can edit. When they double-click using the dblclick event, a form shows up with the value of the <li> item, just check the code. When they edit in the form and save, the form is removed and a list with the new htmlvalue is placed. You can then use an $ajax method to send the variables to the server side for processing.
Related
I'm currently working on a dating website for a school project, but i'm stuck and not sure if i'm on the right way.
On the user profile, i want a list of the photos the user choose to show, and i want a hover on the photo where the pointer is.
In my state i added a listPhotoHover: [ ], a tab that contains variables true or false. listPhotoHover[0] = true means the first photo of the list has a hover, false means no hover.
I map and add a div for every photo with a onMouseEnter( ) that takes the photo index and set it an hover if fired.
The hover appears if listPhotoHover[index] exists, the hover div has an onMouseLeave( ) that takes the photo index and set the hover of the photo as false.
Everything seems to work but i'm not sure if it's the best way to do it, and when i move very fast on every photo the hover is still there i think the onMouseLeave( ) don't run.
Here's my code
Map of every photo :
photos.map((photo, index) => {
return
<div className={`flex row`} key={index} >
<img
className={classes.userPhotos}
src={photo}
alt={`photo de ${name}`}
onMouseEnter={() => { this.haveHover(index) }}
/>
{
listPhotoHover[index]
? <div
className={`
absolute flex center alignCenter
${classes.userPhotos} ${classes.photoHover}
`}
onMouseLeave={
() => { this.removeHover(index) }
}
/>
: null
}
</div>
})
function when onMouseEnter() or onMouseLeave() is fired:
haveHover (index, value) {
const tab = this.state.listPhotoHover
tab[index] = value
this.setState({listPhotoHover: tab})
}
I would like to know why does the onMouseLeave() don't work when my pointer move very fast and also what is the best way to do an hover on a map.
Thank you for your advices and sorry if i don't write english correctly
ps: i checked previous questions and didn't find any answer yet :(
Josephine
I don't believe you need javascript to achieve your desired effect. If it is simply to show something when the image is hovered, you can uses some advanced CSS selectors to do this. Run the snippet below to
html {
font-family: sans-serif;
font-size: 10px;
}
.wrap {
position: relative;
}
.image {
width: 80px;
height: 80px;
}
.imageinfo {
display: none;
width: 80px;
height: 17px;
background: #cc0000;
color: #efefef;
padding: 3px;
text-align: center;
box-sizing: border-box;
position: absolute;
bottom: -13px;
}
/* here's the magic */
.image:hover+.imageinfo {
display: block;
}
Hover the image to see the effect
<div class="wrap">
<img class="image" src="https://www.fillmurray.com/80/80" />
<div class="imageinfo">
Bill Murray FTW
</div>
</div>
I just realized i did it all wrong, i added a className with a '&:hover' on the div containing one photo, and it works. No need javascript :D
I don't know why i wanted to complicate it haha..
className:
ANSWER: {
'&:hover': {
opacity: '0.4',
cursor: 'pointer'
}
}
div with the photo:
photos.map((photo, index) => {
return <div className={`flex row ${classes.ANSWER}`} key={index} >
<img
className={classes.userPhotos}
src={photo}
alt={`${name}`}
/>
</div>
})
Hope my mistake will help some people
I have a buying and selling website and above the sellers photos I have a LIKE button which used to work fine but since I've added a new background and moved things around with new margins it is now not clickable. I believe there's a solution with CSS but not sure how to do it.
When logged in on this page: https://www.onlinecarbooty.com/go-booting.aspx
You will see the LIKE icons. You can log in with test12345#aol.com and Password: qwerty
Here's the code I have for the like button..
<div style="width:50px; height:50px; display: inline-block; background:url('/files/images/icons/stallIconLike50.png'); cursor: pointer;" onclick="addLike('<%# Eval("orderID")%>')">
<div style="font-size:12px; color:#000; background:#ffffff; border:1px solid #000; padding:0 3px; float:left; margin: 0px 0 0 38px;" id="<%# Eval("orderID")%>"> <%# Eval("likeCounter")%>
</div>
</div>
JAVA
<script type="text/javascript">
function addLike(stallID) {
$.post('add-like.aspx', { id: stallID }).done(function(data) {
originalColor = $('#'+stallID).css('background-color');
$('#'+stallID).css('background', 'yellow').html(data);
$('#'+stallID).html(data);
setTimeout(function(){
$('#'+stallID).css('background', originalColor);
}, 500);
});
}
</script>
Any help appreciated.
Considering your current markup,
.lasteventimg + div {
z-index: 1;
position:relative;
}
seems to do the trick.
Additionally, pointer-events:none on .stallNew > div:nth-child(2) > div in your layoutNew.css:746 disables pointer-events on the middle button, so the onclick never fires on those items.
It's clearly none of my business but, if you asked me, I'd say your website needs professional services for:
frontend development,
design/layout.
I have the following HTML:
<div class="menus">
<di class="menu-option">
Weather
</di>
<di class="menu-option">
Travel
</di>
<di class="menu-option">
<input class="search-input" />
<span class="search-btn">Search</span>
</di>
</div>
CSS
.menus {
float:right;
}
.menu-option {
display: inline-block;
border-left: 1px solid black;
padding: 0 15px;
}
.search-input {
display: none;
}
Javascript:
$('.search-btn').click(function(e) {
$('.search-input').show();
});
At this moment, I able to show the search box from hidden when clicking the Search text. How can I make the search box show up by moving from right to left and pushing other text to the left side, instead of showing the search box all of a sudden.
This is the JSFIDDLE example:
https://jsfiddle.net/1btm224h/5/
Thanks!
You can go with:
$('.search-btn').click(function(e) {
$('.search-input').show("slow");
});
Or you can go with:
$('.search-btn').click(function(e) {
$('.search-input').show(3000);
});
From jQuery official: "The default duration is 400 milliseconds. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively."
So you only need to add animation duration, which is built into the .show() by default.
look, I don't sure if you need this.
$('.search-btn').click(function(e) {
$('.search-input').addClass('open');
$('.search-input').FadeIn(300);
$('.menus').FadeIn(300);
$('.menus').addClass('mover');
});
.search-input.open{
display:block;
float:right;
}
.menus.mover{
float:left;
}
I have a second page that is populated using data from an Ajax call on the home page. The header on this dynamically generated page is missing all its JQuery styling, and I suspect the two are related. This is my HTML for the page being generated:
<div data-role="page" id="breakdownDialog" data-add-back-btn="true">
<div data-role="header" id="cvResultsDialog">
<h3></h3>
<span></span>
</div>
<div data-role="content" id="dialogContent">
</div>
</div>
There is also some CSS styling I have used, which I think needs streamlining, but I don't think is causing the problem. This is because when I comment out this code the header is still missing the styling:
#cvResultsDialog {
width:100%;
text-justify: distribute-all-lines;
}
#cvResultsDialog:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
#cvResultsDialog > h3 {
display: inline-block;
display:inline;
text-align="left";
}
#cvResultsDialog span {
display: inline-block;
vertical-align: baseline;
text-align="right";
}
I then populate the header (and the page) using the response from an Ajax call from the previous page. The page is populated on the click of a button (#resultsList) linking to this page:
$('#resultsList').on('click', '#cvResults', function() {
//find previous result that matches the filename on the link.
for(var i=0;i<storedResponses.length;i++){
var currentTitle=storedResponses[i].title;
var textClicked=$("h3",this).text();
if(currentTitle===textClicked){
currentResult=storedResponses[i];
}
}
$('#cvResultsDialog h3').text(currentResult.title);
$('#cvResultsDialog span').text(currentResult.percentage);
//this last bit is populating the page, so is irrelevant for this question
$('#dialogContent').empty();
for(var i=0; i<currentResult.profile_json.length; i++){
$('#dialogContent').append(
'<table cellpadding="0" cellspacing ="0" width="100%" style="border: 4px solid transparent;"><tr id="'+
currentResult.profile_json[i].title+'"><td>'+
currentResult.profile_json[i].id+'</td><td align="right">'+
currentResult.profile_json[i].value+'</td></tr>'
);
}
});
Finally here is a picture of the header. You'll notice it doesn't have the JQuery Mobile styling and the back button is missing.
Thanks all!
To get the back button, you need to apply the data-add-back-btn="true" to the header div not the page div.
<div data-role="header" id="cvResultsDialog" data-add-back-btn="true">
Working DEMO
Other than that the header looks correct given the CSS styling you are applying... Perhaps you can tell us how you want the header to be arranged?
I am not able to get the click evet in CSS
My code is like this
<input name="btn" type="button" onclick="~/Default22.aspx" value="Home" class="classname" style="position:absolute; left: 286px; top: 160px; margin-bottom: 0px;"/>
and I have class="classname"
.classname
{
text-indent:1px;
display:inline-block;
color:#132354;
font-family:Arial;
font-size:17px;
font-weight:bold;
font-style:normal;
height:32px;
line-height:50px;
width:144px;
padding 0px 0px 0px 0px;
text-decoration:none;
text-align:center;
cursor: pointer;
opacity:.5;
}
.classname:hover
{
background:-webkit-gradient( linear, left top, left bottom,color-stop(0.05, #77d42a), color-stop(5, #5cb811) );
background:-moz-linear-gradient( center top, #ffffff 60%, #c0C0C0 90% );
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#77d42a',endColorstr='#5cb811');
background-color:#5cb811;
opacity:1;
}
.classname:active
{
position:relative;
top:1px;
}
The problem is when I click the button click event is not happening..not redirecting the page to Deafault22.aspx
I am working on Asp.net framework
Please help me
An HTML input element will not redirect to a web page in the onclick attribute, because it does not know how to redirect via that attribute.
Use a server control, like this:
Markup:
<asp:Button id="Button1" runat="server" Text="Home" OnClick="Button1_Click" />
Code-behind:
protected void Button1_Click(object sender, EventArgs e)
{
// Redirect here
Response.Redirect("Default22.aspx);
}
Use JavaScript/jQuery to handle the click event and redirect, like this:
$(document).ready(function() {
$('.classname').click(function() {
window.location = "Default22.aspx";
});
});
Try use onclick='window.open("Default22.aspx");' instead of onclick="~/Default22.aspx"
Inline Script:
onclick='window.location.href ="Default22.aspx";'
javascript function:
function Redirect(){
window.location.href ="Default22.aspx";
}
<input name="btn" type="button" onclick="Redirect();" value="Home" class="classname" style="position:absolute; left: 286px; top: 160px; margin-bottom: 0px;"/>
Jquery:
$(function() {
$('.classname').click(function() {
window.location.href = "Default22.aspx";
});
});
OnClick attribute of any HTML control is meant to be used for JavaScript. You have confused it with HREF attribute of <a></a> element
Here is what you need to do:
onclick="window.location.href ='Default2.aspx';return true;"
Firstly, 'the click event in CSS' - not sure what you're talking about. You can't handle click events in CSS.
Secondly, that's not how the <input type="button"> works. onClick - the client-side event - is expecting some Javascript, not a URL.
Try this: -
onclick="window.location = '/Default22.aspx';"
Note that the ~ (tilde) is an ASP.NET-specific thing and not relevant to IIS; don't use it in a regular URL.
Hope that helps.
Direct onclick="~/Default22.aspx" will not work here as this is a input type button, have to add client side events like..
onclick="window.location.href ='Default22.aspx';return true;" for opening in the same window.
or
onclick="window.open('Default22.aspx');", for opening the page in a tab.
Also you can created a javascript method and call that method inside the onClick and redirecting the page to Deafault22.aspx.