sisyphus , dynamic rows not saved
Closed this issue · 13 comments
I have i page where i ma using to create dynamic rows using jQuery.
I also use this library "sisyphus.js" and "sisyphus.min.js" and "jquery-1.7.min.js".
I am not able to preserve my dynamically rows in my form.
I paste code here.
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script src="sisyphus.js" language="javascript"></script>
<script language="javascript" >
jQuery('#form1').sisyphus();
jQuery('form').sisyphus({timeout: 5});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.del').live('click',function(){
$(this).parent().parent().remove();
});
$('.add').live('click',function(){
$(this).val('Delete');
$(this).attr('class','del');
var appendTxt = "<tr><td><select name='ptype[]' ><option value='1' >ONE</option><option value='2' >TWO</option></select></td><td><select name='product[]' ><option value='3' >ONE333</option><option value='4' >TWO444</option></select></td><td><input type='text' name='dsc[]' /></td><td><input type='text' name='qty[]' /></td></td><td><input type='button' class='add' value='Add More' /></td></tr>";
$("tr:last").after(appendTxt);
});
});
</script>
<style>
.add{
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 2px 4px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 11px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.add:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.add:active {
border-top-color: #1b435e;
background: #1b435e;
}
.del{
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 2px 4px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 11px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.del:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.del:active {
border-top-color: #1b435e;
background: #1b435e;
}
</style>
<form name="form1" id="form1" action="" >
<table id="options-table">
<tr>
<td>Type</td>
<td>Product</td>
<td>Desc</td>
<td>Qty</td>
<td> </td>
</tr>
<tr>
<td><select name="ptype[]" >
<option value="1" >ONE</option>
<option value="2" >TWO</option>
</select></td>
<td><select name="product[]" >
<option value="3" >ONE333</option>
<option value="4" >TWO444</option>
</select></td>
<td><input type="text" name="dsc[]" /></td>
<td><input type="text" name="qty[]" /></td>
<td><input type="button" class="add" value="Add More" /></td>
</tr>
</tr>
</table>
</form>
Are you serious??
- Why do you include sisyphus on the page twice - both uncompressed and minified version?
- Why are you trying to protect non-existent forms on the page? Do you know what jQuery selectors
$('#form1')and$('form')do?
Sorry , You are correct....
I change the code...Please see to it .....though the issue remains same
Reference Site : http://coding.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
How did you change the code?
Could you please write a comprehensible explanation of what you are trying to do and what doesn't work? Or else it's not an issue.
Here i am adding dynamic rows in this form....
i set the timer 5 seconds.
after 10 or more seconds if i refresh page..it is loosing all the dynamic rows which i added.
So it's not a sisyphus responsibility. If you have all the form fields on the page, after refreshing it should (and will) populate them with previously stored values. As you add some rows dynamically, and sisyphus really do what it's intended to, i.e. saves form data to localStorage relying on fields names - you can try to add some rows after refreshing and wait until sisyphus will populate them. BTW, it's not necessary to use timeouts with no reason - if you didn't you would not have to wait.
Yes Sir,
I am not blaming sisyphus.I am very thank full to you that you created such a good script.
But i was just concern about my issue.I though that you know your "sisyphus" very well so that you can give me some idea to solve the things.
In the previous comment I gave you an answer to your question. You can't use a microscope to hammer a nail, you should know what actually each tool you're using does. But it seems that you don't. I'd advice you to re-read the answer solving your problem.
it is working for drop down menu???
@deneshgautam what do you mean by "drop down menu"? Sisyphus is a plugin that works with forms, not menus. If you meant HTML element <select>, the answer is yes.
Yes for html .... No m trying a lot but it not working..
m simply used with form name
Does it have a name attribute? http://yourbugreportneedsmore.info
Yes It have , as name="category[]"
Does it have a
nameattribute? http://yourbugreportneedsmore.info
This link is opening jap porn.