javascript not showing elements? - javascript

I'm trying to create a modal which should show position variable mention in my code
here is my ejs code (i'm using ejs and node js and java script for modal)
<div class="container-fluid">
<%for(i=0;i<Vac.length;i++){%>
<div class="alert alert-dark" role="alert">
<h4 class="alert-heading">Postion:- <%=Vac[i].position%></h4>
<hr>
<h5>Type:- <%=Vac[i].type%></h5>
<h6>Skills:- <%=Vac[i].Skills%></h6>
<p class="lead"><%=Vac[i].Description%> </p>
<button type="button" class="btn btn-primary" data-toggle="modal" onclick="showApply()">Apply</button>
<br>
</div>
<%}%>
</div>
here is my javascript code for the modal
<script>
function showApply()
{
$('#applyModal').modal('show');
$('#applyModal').('#applyModaltitle').text($('#alert-heading'));
}
</script>
but i'm getting the error as below:
SyntaxError: missing name after . operator[Learn More] careers:216:23 [Show/hide message details.] ReferenceError: showApply is not defined
can anybody tell me whats wrong and how i can correct it ?

After Searching for the answer for many answer i had found this out from one of the answer on stackoverflow .Since I'm accessing data from database generated , i have to access data through the elements from the data set displayed like from my example :-
i have displayed my data in an alert box and from alert box i have to take the required data and displayed it in the modal,in order to display the data on the modal we have to do the following :-
$(document).ready(function(){
$('#modalname').on('show.bs.modal',function(e){
var _button =$(e.relatedTarget);
var info =_button.parents(".alert");
var position=info.find(".classofelementneeded").text(); //text as i was using h5 tag for displaying data
$(this).find("#element where you want to display data").val(position); //val because i want to display data in text box
});
});
you can use this for displaying data from web page to modal via javascript

Refer to: Multiple selector chaining in jQuery?
function showApply()
{
$('#applyModal').modal('show');
$('#applyModal').('#applyModaltitle').text($('#alert-heading'));
}
The error you get tells you that showApply doesn't exist.
That is so, because there is a . (dot) operator that is wrong in this function.
You can try that:
function showApply()
{
$('#applyModal').find('#applyModaltitle').innerHTML=$('#alert-heading').text;
$('#applyModal').modal('show');
}

Related

NETTE-LATTE: Include on click

I have a question. Can somebody explain me, how can I include another .latte file and send dynamic data with it?
I am creating api function, where you should be able to get information about company just by writing it's name. When I click to search, I can see in console that my request is getting through and sending back response, with correct data, but it won't refresh already loaded data.
Some examples of my code:
Javascript:
btn.onclick = function() {
modal.style.display = "block";
var firma = $("#firmaName").val();
console.log( "var is " + firma );
$.ajax('data', {
data: { 'firma' : firma}
});
}
.latte
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
{include 'data.latte'}
</div>
</div>
best way to approach this is by snippets and $.netteAjax().
viz: https://doc.nette.org/en/application/ajax
also, include tag can accept parameters, which are then used within loaded template, like here: https://latte.nette.org/cs/tags#toc-include
I also would recomend, insted of using include of antoher latte file, I would create component for your modal, viz. https://doc.nette.org/en/application/components

How to Set Header Text of Modal Dialog According to the Table element and his ID

Hello everyone and sorry in advance for my very bad English.
I'm working on an ASP.NET MVC project with a JavaScript framework as the front-end.
I have a table which contains customer names retrieved from a database. Now I want to show a modal dialog and set the text of its header according to the customer name which has been clicked. At the same time I would like to get the customer Id. For example, when clicking "Georges", the modal dialog pops up and its header text is set to "Georges".
Here is my code.
The customer table look like this:
<div class="col-lg-6">
<div class="container-fluid" id="DailyTask">
<h4>Daily Tasks</h4>
#if (Model != null)
{
List<SchedulerTool.Models.spGetDailyBatchTask_Result> batches = Model.DailyTask;
foreach (var batch in batches)
{
<div class="bs-callout bs-callout-warning" id="dailybatch">
<input name="currentdailyBatchId" id="#batch.BatchId" hidden type="text" value="#batch.BatchId" />
<input name="currentdailyBatchName" id=" #batch.BatchName " hidden type="text" value=#batch.BatchName />
<button class="btn btn-group-justified" id="dailybatchTask" data-title="#batch.BatchName" data-target="#dailybatchTaskModal" data-toggle="modal" data-bid="#batch.BatchId">
<span class="fa-bitbucket-square" id="name">#batch.BatchName</span>
</button>
</div>
}
}
</div>
The JavaScript code is:
$('dailybatchTask').on('click', function ()
{
var batchId = $(this).data('bid');
var batchName = $(this).data('title');
// Here I set the table name a template table
$("h4 a#bathDailyTaskModalLabel").html(batchName);
// Here I set the Id to a template table
loadMasterTable("LoadObjectsNotBatched", batchId, DailyBatchElementUrl, "DailyBatchCollapseElementId");
});
Customers table:
The modal that is popover when clicked on customer:
The problem is: when I clicked on the first element of the customer table, the modal is correctly shown (the header and id are correct) but when I clicked on the others elements the JavaScript code is not executed.
Hope someone can try to understand my problem and will help me!
You are trying to catch all buttons by ids. But in HTML ids must be unique. Because that jquery your click event only matches first data. You need to fix ids before jquery part. If you really need it you can define a counter for loop and use it like this;
id="dailybatchTask-#counter"
But you already defined data-bid so basically, you can just add a class name for the button like this;
class="btn btn-group-justified daily-batch-button"
then only you need to;
$('daily-batch-button').on('click', function () {
...
...
...
});

reCaptcha not shows on my singlepage website

I have some problem with the recaptcha loading.
I trying to remake and modernize one of old my website to a singlepage one with php, javascript and ajax (no jquery!).
Everyting is fine yet, but the recaptca. I use the following method.
index.php contains the "main frame" and the target divs to the HTTPRequest function.
With AJAX I load the PHP page templates to the main target divs.
BUT when my PHP template file looks the following to show the registration last page with the captcha:
<?php
$template = '
.../ some code sits here /...
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage(\'registration_page_2.php\')">« Back</button>
<button class="button btn-reg" onclick="validatePage(\'registration_validate.php\')">Submit your registration</button>
</div>
';
echo $template;
and I load it into one of my divs, the reCaptcha has not been shown. I tried some ways and tricks, but it's not working.
There is no form and submit section at all on my page. I do it with javascript and ajax.
Why I cannot make it works?
Is that possible to bypass form->submit->post method to get reCaptcha alive?
Or is the singlepage the wrong way?
I don't quite understand you but since i can't post a comment, i will attempt to answer anyway.
You don't have to use php to echo the html code, just in-case you didn't know, you can do it like this.
<?php
//php code
?>
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage('registration_page_2.php')">« Back</button>
<button class="button btn-reg" onclick="validatePage('registration_validate.php')">Submit your registration</button>
</div>
<?php //continue code here ?>
and I load it into one of my divs, the reCaptcha has not been shown. I
tried some ways and tricks, but its not works :(
It's hard to tell from the information you have given why it is not being shown
There is no form and submit section at all on my page. I do it with
javascript and ajax.
If your registration_page_2.php and registration_validate.php does not echo the template in your current .php shown, then it certainly wouldn't appear on your page
Why I cannot make it works? Is that possible to bypass
form->submit->post method to get reCaptcha alive? Or is the singlepage
the wrong way?
I think you just did something wrong in the middle. The way you have said is 'form->submit->post' is the right way to go about this
Can you help me to get the solution please?
Using your browser, inspect or view the source code of your page. (For google chrome the hotkey is CTRL+SHIFT+I) Try to find the elements in your page to see if they are loaded, but hidden due to css or the likes. After which, you should give more details.
update your captcha block with adding id recaptcha
<div class="g-recaptcha" id="recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
add following code in your page load
<script src='https://www.google.com/recaptcha/api.js?hl=en&render=explicit&onload=onReCaptchaLoad'></script>
<script type="text/javascript">
var recaptcha;
var onReCaptchaLoad = function(){
recaptcha = grecaptcha.render('recaptcha',{
'sitekey' : 'YOUR_RECAPTCHA_PUBLIC_KEY',
'theme' : 'white'
});
};
</script>
You can do it with php request
<?php
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
$recaptcha = $_POST['g-recaptcha-response'];
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY'
$verify = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$recaptcha_secret}&response={$recaptcha}");
$captcha_success = json_decode($verify);
if($captcha_success->success){
// success
}else{
// error
}
}
?>

Why is this dynamically assigned id using a loop only showing the first assignment? javascript, AJAX & JSTL

Have a Java based web application with a page where a feed of posts is dynamically generated with the help of JSTL. The user can currently 'like' any post in the feed but this has proved much more difficult to implement using AJAX. I know i'm really close here but can't quite figure out what's wrong.
It works but only for the first item in the array.. So any like button that is pressed in the feed, only updates the first like button in the feed. Why is it that the dynamically assigned div value (input name=likesDivCount) only registers the first assignment?
index.jsp
<c:forEach items="${idFeedArray}" var="posts" varStatus="count">
...feed item (such as image, text etc..)...
<form id="likesform" action="../AddLike" method="post" style="display:inline;">
// the value of this input below is supposed to change...(i.e. #likesSize0,#likesSize1,#likesSize2)
<input name="likesDivCount" value="#likesSize${count.index}" type="hidden">
<input name="postUser" value="${userpost[count.index]}" type="hidden">
// this button sends the AJAX request
<button style="padding-right: 0;" type="submit" class="btn btn-link"><span class="glyphicon glyphicon-thumbs-up"></span></button>
</form>
// The span in the button below updates with the response from the AJAX
<button style="padding-left: 0;" class="btn btn-link"><span id="likesSize${count.index}">${likesArraySize[count.index]}</span></button>
</c:forEach>
<script>
$(document).on("submit", "#likesform", function(event) {
var $form = $(this);
var likesDivCount = $("input[name=likesDivCount]").val();
//this alert below is for testing, everytime the like button is pressed it displays '#likesSize0' and i need it to spit #likesSize1,#likesSize2,#likesSize3 etc...
alert(likesDivCount);
$.post($form.attr("action"), $form.serialize(), function(response) {
// only updates the first item :( (#likesSize0)
$(likesDivCount).text(response);
});
event.preventDefault(); // Important! Prevents submitting the form.
});
</script>
Looks like you have multiple forms with the same ID: '#likesform'. This is because your forms are generated in a loop.
I suggest you to remove the ID, replace it with a css class (or something else) and rewrite the JS to search for elements inside the target form, e.g.:
var $form = $(this);
var likesDivCount = $form.find("input[name=likesDivCount]").val();
Once you have valid html it will be easier to troubleshoot

HTML form split to two different submissions

I performed a shopping cart integrated to my website and now I am trying to use only one form to be filled by customer (personal information) but I am facing a issue because I would like to use two different submit button depending on the payment platform chosen by customer. Does anybody know a simple solution for that? I appreciate in advanced.
you have to pass name attribute with different value of name attribute in button tags like that --
<button type="submit" name="button1">Button 1</button>
<button type="submit" name="button2">Button 2</button>
In php code --
<?php
if(isset($_POST['button1]))
{
// here we will add code of button 1
}
if(isset($_POST['button2]))
{
// here we will add code of button 2
}
?>
please try this .....
Use multi step form pattern.You can find huge of examples by searching on google.

Categories