Customizing popup window based on it's calling hyperlink Ids - javascript

I have a html code that describes about the community members like "K S Lenscapes" and "Venky P G" which onclick calls a modal popup #visit
<div class="portfolio-info">
<a href="#visit" id="ks" ><h3>K S Lenscapes</h3></a>
</div>
<div class="portfolio-info">
<h3>Venky P G</h3>
</div>
This is #visit code :
<div id="visit" class="modalDialog">
<div>
X<br><br>
<div class="text-center">
<p><a class="btn btn-primary btn-lg" href="#" id="ba">Book Appointment</a></p>
</div>
</div>
</div>
I need "Book Appointment" button of #visit to recognize from which anchor tag it is requested and send mail to corresponding portfolio taking its email from a file or databse.
I have no idea how to do this, Please help me out with this.

You can use data attribute for this
<div class="portfolio-info">
<h3>K S Lenscapes</h3>
</div>
<div class="portfolio-info">
<h3>Venky P G</h3>
</div>
and update the book appointment href URL when ever the dialog is opened.
in this case data variables can be called like $('selector').data('url')

HTML:
<h3>Bar</h3>
JavaScript:
function updatePopup(id) {
document.getElementById('ba').href = 'path/to/handler?id=' + id;
}
The updated HTML will pass the link ID to the function when clicked, and the JavaScript will update the popup window 'Book Appointment' button accordingly.
The ID is then passed in the query string of the URL of wherever you'd like to handle the email sending part. Retrieving the email from the database and sending an email to it is an entirely different and much broader question, of which I'm sure you will be able to find information on how to do this elsewhere on the site.

Related

A way to insert a # in front of a variable of the html attribute value data-bs-target

So basically, I have a vue web app and created a container with multiple bootstrap cards. The cards have a button, which collapses a form I've made for guests to apply. However, when I press the button of a card, it collapses the apply form of all cards at once. To fix that, I have to give each individual card a specific id which matches the data-bs-target and aria-controls of the button. So far, so good.
I've made a variable card_id and inserted it into the attribute values with v-bind, but it's not working. The reason is, that the attribute data-bs-target needs a hashtag before the actual variable name, but I can't figure out a way to do that.
Code sample:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" :data-bs-target="card_id" aria-expanded="false" :aria-controls="card_id">Apply now!</button>
<div class="collapse" :id="card_id">
<div class="card card-body">
<GuestForm></GuestForm>
</div>
</div>
I obviously can't just put a hashtag in front of the variable, so what is my next best solution for this?
Thank you in advance.
You could use the string template with backticks `` like:
<button :data-bs-target="`#${card_id}`"

Replace href with another href from the same page

I want to make a button that will have href that is same as another button.
I have one button on my website that not all users see but its almost hidden and hard to reach. This button has specific UR for every user and contains his ID. On another page I want to create a button that will copy the same href from the other button:
Here is an example:
<div class="row exsisting-button button-hard-to-reach">
See my offers
</div>
<div class="row new-button">
Here are you offers
</div>
You can use querySelector to find element and getAttribute getAttribute to set get href
document.querySelector('.btn-href').setAttribute('href',
document.querySelector('.your-offers').getAttribute('href')
);
<div class="row exsisting-button button-hard-to-reach">
See my offers
</div>
<div class="row new-button">
Here are you offers
</div>

ui-sref open with new tab

I tried to open ui-sref in new tab, noted that i don't want to call it from controller. How to do from view end?
<div class="col-md-12 text-right wow fadeInUp">
<!-- submit button -->
<button ui-sref="app.blogs" target="_blank" class="btn btn-black " id="form-submit" type="submit" value="Submit">See all Blogs</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
</div>
If you want to open a ui-sref from the view you can use target="_blank", but note that the button element does not support target. Change your button into an anchor tag.
<a ui-sref="app.blogs" target="_blank">See all blogs</a>
If you want to continue to use the button element, I believe you need to use the controller.
adding logic to view is not a good practice, however,
you can add some function to your controller and use it in your view(in view you don't have access to WINDOW/DOCUMENT or any other variable/function which is not part of scope)
or you can use HTML tags same as #Zahid Rahman answer(like target="_blank")
but I really recommend you to use a controller for UI logic and services for general logics and API calls or sharing data between controllers

How to make function for saving post

<div id="textareaWrap">
<textarea id="wall"></textarea>
<div id="sharebtn">
<a class="button Share" style="" id="shareButton"> Post</a>
</div>
When I write something in the textarea and post it, the posting is succesful, but when I refresh the page the post is deleted. If someone can make a function to get posts to stay posted after refresh (like Facebook), I would appreciate it.

Modal Window / foundation.reveal.js and passing a variable

Task Overview
I'm using the Code Igniter Framework to build a small client management system.
Part of the functionality would be to delete records from the database, before deleting I need to check with the user their okay to delete that record as a precaution. I'd like to do this via a modal window.
Frameworks I'm using
CodeIgniter MVC Framework (PHP, MYSQL)
Foundation HTML/CSS Boilerplate
Foundation's Javascript Libraries (In particular reveal.js)
What I would like to achieve
I'd like to have the user click on the delete link:
Delete
As you can see, the href tag is currently saying, go to the delete_domain function in the main class, and it's passing in the clients ID into the URL, this is used of course on the otherside of the application to delete the record that matches that ID.
Further on in the tag we have:
data-reveal-id="deleteModal"
This refers to the same [id=deletemodal] found in the modal window div that has to reside at the bottom of the page just before the closing body tag.
This is the DIV for the Modal window that resides at the bottom of the page?
<div id="deleteModal" class="reveal-modal small">
<h2>Are you sure you want to DELETE?</h2>
<p class="lead">Random Text</p>
<a href="" ></a>
<a class="close-reveal-modal">×</a>
</div>
The Issue
I'm not really sure if or how it will work, because at the moment the delete link is inside a table row, each one of these rows is generated by a foreach function, so they're multiple of these inside the DOM each with a different /$clientID value.
If I could I'd like to pass that value to a modal window, then of course to the option to finally delete the row.
Can anyone help?
You can grab the data you want from the pressed button and throw it in the modal. There are probably a few ways to do it; here's one of them: http://jsfiddle.net/b37s3/
Delete
<div id="deleteModal" class="reveal-modal">
<h2>Are you sure you want to DELETE?</h2>
<p class="lead">Random Text</p>
<a class="deleteUrl" href="#"></a>
<a class="close-reveal-modal">×</a>
</div>
and js:
$(document).foundation();
$('a.deleteLink').click(function(){
var link = $('.deleteUrl');
$(link).attr('href', this.href);
$(link).html(this.href);
});
This will throw the href from the Delete button pressed into the modals' a href and as the links text.

Categories

Resources