jquery - Cannot get the datetimepicker from second row onwards in my view page -
i not able see div creating datetimepicker first row in create schedule section (create_event.php page). datetimepicker div not visible second row onwards also.please in resolving this.
view page->create_event.php
<?php $mainmenu ="create_event"; ?> <html lang="en"><head> <title>konnect</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/konnect1/css/bootstrap.min.css"> <link rel="stylesheet" href="/konnect1/css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="/konnect1/css/matrix-style.css"> <link rel="stylesheet" href="/konnect1/css/matrix-media.css"> <link rel="stylesheet" href="/konnect1/css/colorpicker.css"> <link rel="stylesheet" href="/konnect1/css/eventinfo.css"> <link href="/konnect1/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="/konnect1/css/bootstrap-wysihtml5.css"> <link rel="stylesheet" href="/konnect1/css/htmlbox.css"> <link href="/konnect1/font-awesome/css/font-awesome.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=open+sans:400,700,800" rel="stylesheet" type="text/css"> <script type="text/javascript" src="/konnect1/js/jquery-1.8.3.min.js" charset="utf-8"></script> <!--<script src="../js/jquery.min.js"></script> --> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src="/konnect1/js/bootstrap.min.js"></script> <script src="/konnect1/js/jquery.ui.custom.js"></script> <script src="/konnect1/js/matrix.js"></script> <script type="text/javascript" src="/konnect1/js/bootstrap-datetimepicker.js" charset="utf-8"></script> <script type="text/javascript" src="/konnect1/js/bootstrap-datetimepicker.fr.js" charset="utf-8"></script> <script type="text/javascript" src="/konnect1/js/htmlbox.colors.js"></script> <script type="text/javascript" src="/konnect1/js/htmlbox.styles.js"></script> <script type="text/javascript" src="/konnect1/js/htmlbox.syntax.js"></script> <script type="text/javascript" src="/konnect1/js/htmlbox.undoredomanager.js"></script> <script type="text/javascript" src="/konnect1/js/htmlbox.min.js"></script> <script type="text/javascript" src="/konnect1/js/htmlbox.full.js"></script> <style> <!--@media (min-width: 1200px) { .btnj{ margin-top:10px; margin-left: 446px; width:90px; background-color: #006dcc; border: 1px solid #006dcc; color: #fff; } .radios{ margin-left: 50px; } .span11{ width: 74.3% !important; margin-left: 4.5% !important; margin-top: 1%; background-color:#fff; } .eventinfoj{ margin-left: 36px;} .widgetstyle{ padding-bottom:12px !important;}.control-label{ margin-left:-29px;}.table-sortable tbody tr { cursor: move;}.tab-content {overflow: hidden;margin-left:27px;}.form-actions{ background-color:#f9f9f9 !important;}.datetimepicker { margin-left: 17% !important; margin-top: 2% !important;}.datetimepicker .prev th{ background-color:#eee !important;} } /* landscape tablets , medium desktops */ @media (min-width: 992px) , (max-width: 1199px) { .btnj{ margin-top:10px; margin-left: 45%; width:90px; background-color: #006dcc; border: 1px solid #006dcc; color: #fff; } .span11{ width: 70.6% !important; margin-left: 2.4% !important; margin-top: 1%; background-color:#fff; }.widgetstyle{ padding-bottom:12px !important;}.table-sortable tbody tr { cursor: move;}.tab-content {overflow: hidden;margin-left:27px;}.form-actions{ background-color:#f9f9f9 !important;}.datetimepicker { margin-left: 17% !important; margin-top: 2% !important;}.datetimepicker .prev th{ background-color:#eee !important;} } /* portrait tablets , small desktops */ @media (min-width: 768px) , (max-width: 991px) { .btnj{ margin-top:10px; margin-left: 290px; width:90px; background-color: #006dcc; border: 1px solid #006dcc; color: #fff; } .radios{ margin-left: 50px; } .span11{ width: 63.5% !important; margin-left: 3% !important; margin-top: 1%; background-color:#fff; }.widgetstyle{ padding-bottom:12px !important;}.table-sortable tbody tr { cursor: move;}.tab-content {overflow: hidden;margin-left:27px;}.form-actions{ background-color:#f9f9f9 !important;}.datetimepicker { margin-left: 17% !important; margin-top: 2% !important;}.datetimepicker .prev th{ background-color:#eee !important;} } /* landscape phones , portrait tablets */@media (max-width: 767px) { .btnj{ margin-top:10px; margin-left: 40%; width:90px; background-color: #006dcc; border: 1px solid #006dcc; color: #fff; } .radios{ margin-left: 50px; }.span11{ width: 54.5% !important; margin-left: 3.8% !important; margin-top: 1%; background-color:#fff; } .widgetstyle{ padding-bottom:12px !important;}.table-sortable tbody tr { cursor: move;}.tab-content {overflow: hidden;margin-left:27px;}.form-actions{ background-color:#f9f9f9 !important;}.datetimepicker { margin-left: 17% !important; margin-top: 2% !important;}.datetimepicker .prev th{ background-color:#eee !important;} } /* portrait phones , smaller */ @media (max-width: 480px) { .btnj{ margin-top:10px; margin-left: 67px; width:90px; background-color: #006dcc; border: 1px solid #006dcc; color: #fff; } .radios{ margin-left: 50px; }.span11{ width: 67.3% !important; margin-left: 13% !important; margin-top: 1%; background-color:#fff; }.eventinfoj{ margin-left: 0px;} .control-label{ margin-left:0px;}.widgetstyle{ padding-bottom:12px !important;}.table-sortable tbody tr { cursor: move;}.tab-content {overflow: hidden;margin-left:27px;}.form-actions{ background-color:#f9f9f9 !important;}.datetimepicker { margin-left: 17% !important; margin-top: 2% !important;}.datetimepicker .prev th{ background-color:#eee !important;}}--> .startimecl{ margin-top: 3%; } .addrowbtn{ border-radius:50%; background-color:#51a351; color:#ffffff; width: 14px; margin-right: 6%; } .addicon{ font-size:28px; margin-left: -4px; } .reviewcl{ margin-left: 26%; height:auto; } .reviewcardcl{ height:auto; background-color: #ffffff; margin-top: -2%; } .agendacl{ margin-top: -2%; } .publiccl{ margin-top: -40%; margin-left: 48%; } .publiccl1{ margin-top: -38%; margin-left: 74%; } .datetimepicker { margin-left: 5% !important; margin-top: 2% !important; } .addrowbtn { background-color: #8bbcb0; } </style> </head> <body> <!--header-part--> <?php include 'header.php'; ?> <!--header-part--> <!--main-container-part--> <div id="content"> <div id="content-header"> <div id="breadcrumb"> <a href="index" class="tip-bottom" data-original-title="go home"><i class="icon-home"></i> home</a> <a href="admin_c/create_event" class="current">create events</a> </div> <br> <div class="stepwizard col-md-3"> <div class="stepwizard-row setup-panel"> <div class="stepwizard-step"> <a href="#step-1" type="button" class="btn btn-circle btnopacity btn-primary" >1</a> <p>event info</p> </div> <div class="stepwizard-step"> <a href="#step-2" type="button" id="click" class="btn btn-default btn-circle btnopacity" >2</a> <p>schedule</p> </div> <div class="stepwizard-step"> <a href="#step-3" type="button" class="btn btn-default btn-circle btnopacity" >3</a> <p>agenda</p> </div> <div class="stepwizard-step"> <a href="#step-4" type="button" class="btn btn-default btn-circle btnopacity " >4</a> <p>review</p> </div> </div> </div> </div> <div class="container-fluid"> <hr> <div class="row-fluid"> <div class="span12"> <div class="widget-box"> <div class="widget-content widgetstyle"> <!--<form role="form" action="" method="post" class="form-horizontal">--> <?php echo form_open('admin_c/create_event1','class="form-horizontal"','method=post','role=form');?> <div class="setup-content" id="step-1" style="display: none;"><div class="eventinfoj"> <h3> event information</h3></div> <div class="control-group" style="margin-bottom:10px;"> <label class="control-label" style="font-weight:600px !important;">select category</label> <div class="controls"> <select name="ecategory" style="margin-left:0;width:91.38% !important;"> <option>conference</option> <option>second option</option> <option>third option</option> <option>fourth option</option> <option>fifth option</option> <option>sixth option</option> <option>seventh option</option> <option>eighth option</option> </select> </div> </div> <div class="control-group" style="margin-bottom:10px;"> <div class="controls" style="padding: 0%;"> <label class="control-label" style="margin-left: -30.5%;">event type</label> <font style="display:inline-block!important;margin-top: 1.45%;" > <input name="etype" value="public" type="radio" style="margin-top: 21%;" > <p class="publiccl">public</p></font> <font style="display:inline-block!important;margin-left: 4%;"> <input name="etype" value="private" type="radio" style="margin-left: 14px;"> <p class="publiccl1"> private </p> </font> </div> </div> <div class="control-group" style="margin-bottom:10px;"> <label class="control-label" style="margin-left:-62px;">event name</label> <div class="controls"> <input name="ename" type="text" class="span11" placeholder="event name" style="width:91.5% !important;margin-left: 0px !important;"> </div> </div> <div class="control-group" style="margin-bottom:10px;"> <label class="control-label " style="margin-left:-47px;" >date , time</label> <div class="input-group date form_datetime" data-date="1979-09-16t05:25:07z" data-date-format="dd mm yyyy - hh:ii p" data-link-field="dtp_input1" > <input name="edat_time" type="text" class="span11" style="background-color: #fff;width: 74.8% !important;margin-left: 6% !important;" placeholder="date , time" readonly > <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div> <input type="hidden" id="dtp_input1" value="" /><br/> </div> <div class="control-group" style="margin-bottom:10px;"> <label class="control-label" style="margin-left:-100px;">venue</label> <div class="controls"> <textarea name="evenue" class="span12" style="max-width:91.45% !important;margin-left:0%;" placeholder="venue"></textarea> </div> </div> <center><button class="btn btn-primary nextbtn btn-lg" type="button">next</button></center> </div> <div class="setup-content" id="step-2" style="display: none !important;"> <h3 style="margin-left: 2%;"> create schedule</h3> <table class="table table-bordered table-hover table-sortable" id="tab_logic" style="width: 97%;margin-left: 1.5%;"> <thead> <tr > <th class="text-center" style="font-size:15px;padding:7px 0px;text-align: center;"> event </th> <th class="text-center" style="font-size:15px;padding:7px 0px;text-align: center;"> speaker </th> <th class="text-center" style="font-size:15px;padding:7px 0px;text-align: center;"> start time </th> <th class="text-center" style="font-size:15px;padding:7px 0px;text-align: center;"> end time </th> <th class="text-center" style="font-size:15px;padding:7px 0px;text-align: center;"> venue </th> </tr> </thead> <tr class="ui-droppable" id='addr0' data-id="0" > <td data-name="sch_name" > <input name='sch_name' type="text" placeholder='event name' class="form-control" style="text-align:center;margin-left:10%;margin-top:10px;height: 29px;width: 85.4%;padding:17px; "/> </td> <td data-name="speaker_name" > <input name='speaker_name' type="text" placeholder='speaker' class="form-control" style="text-align:center;margin-left:16%;margin-top:10px;height: 29px;width: 68.4%;padding:17px; "/> </td> <td data-name="" data-id="sch_stime" > <div name='start_time' class="input-group date form_datetime startimecl " data-date="1979-09-16t05:25:07z" data-date-format="dd mm yyyy - hh:ii p" data-link-field="dtp_input1" style="width: 100.4%;text-align:center;"> <input name="sch_stime" type="text" class="span11" style="background-color: #fff;margin-top: 3%;height: 37px;width: 69%;text-align: center;" placeholder="start time" readonly > <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div> <br/> </td> <td data-name="" data-id="sch_etime"> <div class="input-group date form_datetime startimecl " name='end_time' data-date="1979-09-16t05:25:07z" data-date-format="dd mm yyyy - hh:ii p" data-link-field="dtp_input1" style="width: 100.4%;text-align:center;"> <input name="sch_etime" type="text" class="span11" style="background-color: #fff;margin-top: 3%;height: 37px;width: 69%;text-align: center;" placeholder='end time' readonly > <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div> <br/> </td> <td data-name="sch_venue" > <input name='sch_venue' type="text" placeholder="venue" class="form-control" style="text-align:center;margin-left:16%;margin-top:10px;height: 29px;width: 68.4%;padding:17px; "/> </td> </tr> </tbody> </table> <a name="add_row" id="add_row" value="+" class="btn btn-default btn-lg pull-right addrowbtn" style=""><i class="fa fa-plus addicon" aria-hidden="true"></i></a> <input name="counter" id="counter" value="0" type="text"> <br><br><br><hr> <button class="btn btn-primary nextbtn btn-lg" type="button" style="margin-bottom: 14px;margin-left: 446px;width:90px;">next</button> </div> <div class="setup-content" id="step-3" style="display: none !important;margin-left:3.7%;"> <h3> create agenda</h3> <div class="container"> <div class="row-fluid"> <div class="span6"> <textarea name="agenda_desc" id="htmlbox_silk_icon_set_blue">type here....</textarea> </div> </div> </div> <button class="btn btn-primary nextbtn btn-lg" type="submit" style="margin-top: 19px;margin-bottom: 9px;margin-left: 446px;width:90px;">next</button> <br> </div> <input type="text" name="results" id="results" value="0"> <?php echo form_close(); ?> <div class="setup-content" id="step-4" style="display: none !important;"> <h3 style="margin-left: 28px;"> review</h3> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div class="card reviewcardcl"> <div class="card-content"> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <img class="span2 offset1" src="/konnect1/user_images/tedx.png"> <br> <table class="reviewcl"> <tbody> <tr> <td> <p style="font-size: 20px;margin-left: 84px;font-weight: bold;"> event-name: </p> </td> <td style="margin-left: -4px;"> <p style="font-size: 20px;margin-left:10px;"> tedex</p> </td> </tr> <tr> <td> <p style="font-size: 20px;margin-left: 84px;font-weight: bold;"> event-venue: </p> </td> <td style="margin-left: -4px;"> <p style="font-size: 20px;margin-left:10px;">st regis, banquet 5 , lower parel , mumbai-09</p> </td> </tr> <tr> <td> <p style="font-size: 20px;margin-left: 84px;font-weight: bold;"> event-type: </p> </td> <td style="margin-left: -4px;"> <p style="font-size: 20px;margin-left:10px;;"> private</p> </td> </tr> <tr> <td> <p style="font-size: 20px;margin-left: 84px;font-weight: bold;"> date & time: </p> </td> <td style="margin-left: -4px;"> <p style="font-size: 20px;margin-left:10px;"> 30-01-2016 3.00 pm</p> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="span6"> <div class="card" style="height:auto;background-color: #ffffff;"> <div class="card-content"> <div class="container-fluid"> <div class="row-fluid"> <div class="span10"> <br><br><br> <p style="font-size: 46px;margin-left: 25%;font-weight: bold;text-align: center; padding-bottom: 25%;"> credits <br><br><br> 13 </p> </div> </div> </div> </div> </div> </div> <div class="span6"> <div class="card" style="height:auto%;background-color:#ffffff;"> <div class="card-content" style="padding-bottom:151px !important;"> <div class="container-fluid"> <div class="row-fluid"> <div class="span10"> <br><br><br><br> <a style="font-size: 41px;margin-left: 13%;font-weight: bold;text-align: center; padding-bottom: 33px;width:100%;" href="admin_c/create_event"> create event </a> </div> </div> </div> </div> </div> </div> </div> </div> <br> </div> <!--</form>--> </div></div> </div> </div> </div> </div> <!--main-container-part--> <!--footer-part--> <div class="row-fluid"> <div id="footer" class="span12"> 2016 konnect. </div> </div> <!--end-footer-part--> <script> $(document).ready(function () { var navlistitems = $('div.setup-panel div a'), allwells = $('.setup-content'), allnextbtn = $('.nextbtn'); allwells.hide(); navlistitems.click(function (e) { e.preventdefault(); var $target = $($(this).attr('href')), $item = $(this); if (!$item.hasclass('disabled')) { navlistitems.removeclass('btn-primary').addclass('btn-default'); $item.addclass('btn-primary'); allwells.hide(); $target.show(); $target.find('input:eq(0)').focus(); } }); allnextbtn.click(function() { var curstep = $(this).closest(".setup-content"), curstepbtn = curstep.attr("id"), nextstepwizard = $('div.setup-panel div a[href="#' + curstepbtn + '"]').parent().next().children("a"), curinputs = curstep.find("input[type='text'],input[type='url']"), isvalid = true; $(".control-group").removeclass("has-error"); for(var i=0; i<curinputs.length; i++) { if (!curinputs[i].validity.valid) { isvalid = false; $(curinputs[i]).closest(".control-group").addclass("has-error"); } } if (isvalid) nextstepwizard.removeattr('disabled').trigger('click'); }); $('div.setup-panel div a.btn-primary').trigger('click'); $("#add_row").on("click", function() { // dynamic rows code // max row id , set new id var newid = 0; $.each($("#tab_logic tr"), function() { if (parseint($(this).data("id")) > newid) { newid = parseint($(this).data("id")); } }); newid++; var tr = $("<tr></tr>", { id: "addr"+newid, "data-id": newid }); // loop through each td , create new elements name of newid $.each($("#tab_logic tbody tr:nth(0) td"), function() { var cur_td = $(this); var children = cur_td.children(); var child = cur_td.children().find('input'); // add new td , element if has nane if ($(this).data("name") != "") { var td = $("<td></td>", { "data-name": $(cur_td).data("name") }); var c = $(cur_td).find($(children[0]).prop('tagname')).clone().val(""); c.attr("name", $(cur_td).data("name") + newid); c.appendto($(td)); td.addclass("drop").appendto($(tr)); } else { var td = $("<td></td>", { "data-id": $(cur_td).data("id"), }); var d = $(cur_td).find($(child[0]).prop('tagname')).clone().val(""); d.attr("name", $(cur_td).data("id") + newid); d.attr('data-link-field','dtp_input1').attr('data-date','1979-09-16t05:25:07z').attr('data-date-format','dd mm yyyy - hh:ii p').addclass('date form_datetime startimecl').appendto($(td)); td.appendto($(tr)); } }); // add delete button , td /* $("<td></td>").append( $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>") .click(function() { $(this).closest("tr").remove(); }) ).appendto($(tr)); */ // add new row $(tr).addclass("ui-droppable").appendto($('#tab_logic')); $(tr).find("td button.row-remove").on("click", function() { $(this).closest("tr").remove(); }); }); // sortable code var fixhelpermodified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }; $(".table-sortable tbody").sortable({ helper: fixhelpermodified }).disableselection(); $(".table-sortable thead").disableselection(); $("#add_row").trigger("click"); /* end schedule step javascript add row */ $(".stepwizard-step").on('click', function() { $(this).prop('disabled', true); }); $('.form_datetime').datetimepicker({ //language: 'fr', weekstart: 1, todaybtn: 1, autoclose: 1, todayhighlight: 1, startview: 2, forceparse: 0, showmeridian: 1 }); $('#add_row').click(function() { var counter = $('#counter').val(); counter++; //alert(counter); $('#counter').val(counter); $('#tab_logic .ui-droppable[id]').each(function() { var d = $(this).attr("data-id"); alert(d); //$(this).css({color:'red'}); var data = d; $.post("create_event1", { vardata: data }).done(function(data) { $('#results').val(data); }); }); }); }); /* end wizard javascript enable , disable tab*/ /* schedule step javascript add row */ </script> <script src="/konnect1/js/bootstrap-colorpicker.js"></script> <script src="/konnect1/js/masked.js"></script> <script src="/konnect1/js/jquery.uniform.js"></script> <script src="/konnect1/js/jquery.peity.min.js"></script> <script src="/konnect1/js/bootstrap-wysihtml5.js"></script> <script src="/konnect1/js/wysihtml5-0.3.0.js"></script> <script src="/konnect1/js/select2.min.js"></script> <script type="text/javascript" src="/konnect1/js/htmlbox.content.js"></script> <ul class="typeahead dropdown-menu"></ul> <ul class="typeahead dropdown-menu"></ul> <ul class="typeahead dropdown-menu"></ul> </body> </html>
Comments
Post a Comment