When this code pops up as a form it works well, but when I press "Don't have an Account.." it redirects to the Parent Directory.
Can someone help?
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
<div class="header">
<ul class="headerList">
<li id="item"> Home</li>
<li id="item"> About us</li>
<li id="item"> Contact us</li>
<li id="popup-login">
<button onclick="togglePopup()">Login/Register</button>
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<form class="form" id="login">
<h1 class="form__title">Login/Register</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or email">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text">
Forgotten your password?
</p>
<p class="form__text">
<a class="form__link" href="./" id="linkCreateAccount">Don't have an account? Create account?</a>
</p>
</form>
The problem is that by clicking on the button you are clicking on a link <a> with href="./".
The solution for this case should be: implementing javascript trigger instead of usual html-link:
<a class="form__link" href="void(0);" onclick="toggleCreateAccountPopup()" id="linkCreateAccount">Don't have an account? Create account?</a>
Here, href is voided, and JS-trigger toggleCreateAccountPopup() is called - instead of linking to parent dir.
I am trying to write a HTML code to be able to reply to comments. The issue I'm having in the code below is when I click the reply button it appends the reply text area to both comment 1 and comment 2. What can I do to make it only append the text area to only the relevant comment.
<script>
function reply2comment() {
$("div#reply").html('<form action="" method="GET" id="rati"><textarea style="border-radius:0em" name="comment" id="comment" placeholder="maximum 100 characters" maxlength="100" rows="4" cols="60" required></textarea>'+
'<div class="save_reply"><input type="submit" data-theme="e" id="send_reply" value="save"/></div></form>').trigger('create');
}
</script>
<div class="userReviews">
<div class="userDP_mP"><img src="display_pics/yy.jpg" alt=""/></div>
<div class="userName_mP">Tim</div>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt=""/>
<div class="review_mP"><p>comment 1</p></div>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" onClick="reply2comment()" value="reply"/>
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
<div class="userReviews">
<div class="userDP_mP"><img src="display_pics/xx.jpg" alt=""/></div>
<div class="userName_mP">David</div>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt=""/>
<div class="review_mP"><p>comment 2</p></div>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" onClick="reply2comment()" value="reply"/>
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
You have 2 divs with the same id "reply". This makes your $("div#reply").html(... command append it to the both of them.
IDs should be unique. You shouldn't have more than 1 element with the same ID attribute.
If a jQuery selector matches more than one element, it will call the html( methon on both of them.
Here is what something you could do.
$(document).ready(function() {
$(".reply").bind("click",
function reply2comment(event) {
var $replyContainer = $(event.currentTarget).siblings("#reply");
$replyContainer.html('<form action="" method="GET" id="rati"><textarea style="border-radius:0em" name="comment" id="comment" placeholder="maximum 100 characters" maxlength="100" rows="4" cols="60" required></textarea>' +
'<div class="save_reply"><input type="submit" data-theme="e" id="send_reply" value="save"/></div></form>').trigger('create');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="userReviews">
<div class="userDP_mP">
<img src="display_pics/yy.jpg" alt="" />
</div>
<a href="#" data-ajax="false">
<div class="userName_mP">Tim</div>
</a>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt="" />
<div class="review_mP">
<p>comment 1</p>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" value="reply" />
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
</div>
<div class="userReviews">
<div class="userDP_mP">
<img src="display_pics/xx.jpg" alt="" />
</div>
<a href="#" data-ajax="false">
<div class="userName_mP">David</div>
</a>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt="" />
<div class="review_mP">
<p>comment 2</p>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" value="reply" />
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
</div>
I modified you user_reviews markup to group the reply div and the reviews together.
And changed the event handlers from markup to script, just to make it easier to bind events.
I'm using jQuery dialog to gather the informations from users then append to my desired div. This function works very well, but when comes to edit/update my contents, I have no ideas how to do.
Front-Ends HTML
<li class="description_panel">
<a id="editPanel" href="#"></a>
<a id="closeBtn" href="#" class="closeButton"></a>
<div class="panel_title">
<h2>**Subscribe Here!**</h2>
</div>
<div class="panel_img">
<img width="320px" src="link_to_img_url"/>
</div>
<div class="panel_description">
<p>My paragraph 1</p>
<p>My paragraph 2</p>
</div>
</li>
Edit Panel
<div id="edit-dialog-form" title="Edit Panel">
<form id="formUpdatePanel">
<div class="form-group">
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel title::</h5>
<input style="margin-bottom:20px;" id="updatePanelTitle" class="form-control input-lg" name="title" placeholder="Panel Title" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>URL to image: </h5>
<input style="margin-bottom:20px;" id="updatePanelImageURL" class="form-control input-lg" name="imageURL" placeholder="Link to Image URL" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel description:</h5>
<textarea id="updatePanelDescription" rows="5" cols="50" style="width:312px"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
JQuery
$('#editPanel').click(function(){
editDialog.dialog("open");
});
var editDialog = {...};
function updateDialog {
}
How to retrieve all the inputs values and textarea value and display in the dialog input box and update/overwrite the contents again.
I have the html code `
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>site Details</h1>
</div>
<div data-role="content">
Enter the details of site
Modify site details
</div>
</div>
<div data-role="page" id="Site entry1">
<div data-role="header">
Home
<h1>Welcome To enter the details of site</h1>
</div>
<div id="generalList"></div>
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="sitename">Site name:</label>
<input type="text" sitename="name" id="siteName" value="" />
</li>
<li data-role="fieldcontain">
<label for="siteno">Site name:</label>
<input type="text" siteno="siteno" id="siteNo" value="" />
</li>
Next
</ul>
</form>
</div>
</div>
</div>
<div data-role="page" id="Site entry2">
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="moduleNo">moduleNo:</label>
<input type="text" moduleNo="moduleNo" id="moduleNo" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
<div data-role="footer">
previous
Next
</div>
</div>
<div data-role="page" id="Site entry3">
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="executiveNo">executiveNo:</label>
<input type="text" executiveNo="executiveNo" id="executiveNo" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button id="btn_3" type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
<div data-role="footer">
previous
Home
</div>
</div>
<div data-role="page" id="Modify site">
<div data-role="header">
Home
<h1>List of sites </h1>
</div>
<div data-role="content">
<button id="btm_4" type="submit" data-theme="a">modify</button>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>`
I have created the list of fields from different pages with the code below
function makesite(site){
var li = '<ul data-role="listview" >';
$('body').find('[data-role="fieldcontain"]').each(function(key, value){
var title = $(this).find('label').html();
var val = $(this).find('[type="text"]').val();
li += '<li>'+title+' '+val+'</li>';
});
li +='</ul>';
$('#content').html(li).trigger('create');
$('ul').listview('refresh');}
But the problem is I need to display the List of site added with sitename on clicking modify button in page with id "modifysite". where site, site name,site no,executive no, module no are global variables.
I have tried with the code below
Function redrawsites(site){
var ul = makesite(site);
$('#content').html(ul).trigger('create');
}
I'm loading 3 jsignature divs into my jquery mobile app. They display and work correctly when I load them into the certain pages:
But when they're loaded into other pages the div shows up with a squished height and is not responsive to touch:
I'm loading them with a document ready function at the bottom of the page, which seems fine:
<div id="info" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>NewF</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your Name" name="_fid_14" id="_fid_14" />
</form>
</div></div>
<div id="sigemail" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>Signatures & Email</h1>
</div>
<div data-role="content">
<div id="fcmsig" style="width:600px; height:150px;"></div>
<div id="gcsig" style="width:600px; height:150px;"></div>
<div id="inspsig" style="width:600px; height:150px;"></div>
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<br>
<p>What email address would you like the QAF pdf sent to?</p><input type="text" name="_fid_210" id="_fid_210" />
</form>
</div></div>
<script>
$(document).ready( function(){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
</script>
But when I change to this, so each signature loads in its own page, they loose size and functionality:
div id="info" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>NewF</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your Name" name="_fid_14" id="_fid_14" />
</form>
</div></div>
<div id="sigemail" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>Signatures & Email</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<br>
<p>What email address would you like the QAF pdf sent to?</p><input type="text" name="_fid_210" id="_fid_210" />
<a data-theme="a" href="#fcmsignature" data-role="button" data-transition="slidefade" data-inline="true">Field CM Signature</a><br>
<a data-theme="a" href="#gcsignature" data-role="button" data-transition="slidefade" data-inline="true">Contractor Signature</a><br>
<a data-theme="a" href="#inspsignature" data-role="button" data-transition="slidefade" data-inline="true">Inspector Signature</a>
</form>
</div></div>
<div id="fcmsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#fcmsig').jSignature('clear')"/>
Save
<h1>FCM Signature</h1>
</div>
<div data-role="content">
<div id="fcmsig" style="width:600px; height:150px;"></div>
</div></div>
<div id="gcsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#gcsig').jSignature('clear')"/>
Save
<h1>Contractor Signature</h1>
</div>
<div data-role="content">
<div id="gcsig" style="width:600px; height:150px;"></div>
</div></div>
<div id="inspsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#inspsig').jSignature('clear')"/>
Save
<h1>Inspector Signature</h1>
</div>
<div data-role="content">
<div id="inspsig" style="width:600px; height:150px;"></div>
</div></div>
<script>
$(document).ready( function(){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
</script>
I've tried using pageinit on the signature pages, but I get the same result:
<div id="fcmsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#fcmsig').jSignature('clear')"/>
Save
<h1>FCM Signature</h1>
</div>
<div data-role="content">
<script>
$('#fcmsignature').live('pageinit',function(event){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
</script>
<div id="fcmsig" style="width:600px; height:150px;"></div>
</div></div>
I'm not sure why they would work in one sub-page, but not another. Any thoughts?
Update: A direct refresh of /index.html#fcmsignature shows the signature correctly. So the issue is somehow connected to the initiation of the signatures - which is why I tried pageinit (without success). I also tried data-transition="none" on the buttons, but no change.
Try this syntax:
$('#fcmsignature, #gcsignature, #inspsignature').live('pageshow',function(e,data){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
This syntax will take care that jQuery and jQuery mobile is loaded, and it will work only when pages fcmsignature, #gcsignature, #inspsignature are about to be show. And because you are using one signature per page use it like this:
$('#fcmsignature').live('pageshow',function(e,data){
if($('#fcmsig').find('.jSignature').length == 0){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
}
});
$('#gcsignature').live('pageshow',function(e,data){
if($('#gcsig').find('.jSignature').length == 0){
$('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
}
});
$('#inspsignature').live('pageshow',function(e,data){
if($('#inspsig').find('.jSignature').length == 0){
$('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
}
});
jQM was not built to work with $(document).ready( function(){. Read my other artice to find out why: https://stackoverflow.com/a/14010308/1848600
Just to clarify for anyone else experiencing this issue, attaching jSignature to the "pageshow" event is what worked for me.
$("#signpage").live("pageshow",function(e,data){
if($("#signature").find(".jSignature").length == 0){
$("#signature").jSignature();
}
});
To update the other answers, the jQuery live() function has been deprecated since jQuery 1.7 and removed since jQuery 1.9. Now you will want to use the jQuery Mobile "pagecontainershow" event handler and check to see which page you are currently on, then perform the if block suggested in the other answers, as such:
$(document).on("pagecontainershow", function(evt, ui){
var pageID = $('body').pagecontainer('getActivePage').prop('id');
if(pageID == 'signaturePage'){
if($("#signatureDiv").find(".jSignature").length == 0){
$("#signatureDiv").jSignature();
}
}
}
This method works as of jQuery 1.11.3 and jQuery Mobile 1.4.5.