I have dynamic tabs.
I need when I refresh the page that tabs should not be closed
Script:
var button = '<button class="close" type="button" title="Remove this page">×</button>';
var tabID = 1;
function resetTab() {
var tabs = $("#tab-list li:not(:first)");
var len = 1
$(tabs).each(function(k, v) {
len++;
$(this).find('a').html('Tab ' + len + button);
})
tabID--;
}
$(document).ready(function() {
$('#btn-add-tab').click(function() {
tabID++;
$('#tab-list').append($('<li>Tab ' + tabID + '<button class="close" type="button" title="Remove this page">×</button></li>'));
$('#tab-content').append($('<div class="tab-pane fade" id="tab' + tabID + '">Tab ' + tabID + ' content</div>'));
});
$('#tab-list').on('click', '.close', function() {
var tabID = $(this).parents('a').attr('href');
$(this).parents('li').remove();
$(tabID).remove();
//display first tab
var tabFirst = $('#tab-list a:first');
resetTab();
tabFirst.tab('show');
});
var list = document.getElementById("tab-list");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<p>
<button id="btn-add-tab" type="button" class="btn btn-primary pull-right">Add Tab</button>
</p>
<!-- Nav tabs -->
<ul id="tab-list" class="nav nav-tabs" role="tablist">
<li class="active">Tab 1</li>
</ul>
<!-- Tab panes -->
<div id="tab-content" class="tab-content">
<div class="tab-pane fade in active" id="tab1">Tab 1 content</div>
</div>
</div>
</div>
all you could do is to tell the users to not leave the page.
there is no way to prevent closing due to security and anti spam reasons.
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
window.onbeforeunload = function(e) {
var dialogText = 'Dialog text here';
e.returnValue = dialogText;
return dialogText;
};
using window.onbeforeunload will at least give you the opportunity to do some cleanup during that function call like writing data to local or session storage or throwing a syncronous request to your api and return a message to the user so he can decide if he would like to unload the current window by navigating away or not.
the example above set's the text in two different ways due to cross browser issues.
you can read more about that in the corresponding MDN article linked above.
Related
I'm new to JavaScript and have 2 html links:
<li><a class="dropdown-item confirm" href="#">wtdata</a></li>
<li><a class="dropdown-item confirm" href="#">ftdata</a></li>
The first step is getting the specific text value by clicking each link. For example, if I click the first link I will get the text wtdata. If I click the second link, I get the text ftdata. I have completed this step by:
<script>
var myFunction = function() {
var attribute = this.innerHTML;
alert(attribute);
};
var elements = document.getElementsByClassName("dropdown-item");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunction, false);
}
</script>
After clicking the link in last step, a Bootstrap modal will automatically pop out which has 2 buttons. This is a built-in Bootstrap function, already done. The buttons are:
<button id='cancel_btn'>Cancel</button>
<button id='confirm_btn'>Confirm</button>
The second step is:
If in the first step link wtdata is clicked and Confirm button in pop windows has been clicked,then replace the href value of link wtdata with 'wtdata_url'.
Same as link ftdata,if
in the first step link ftdata is clicked and Confirm button in pop window has been clicked ,replace the href value of link ftdata with 'ftdata_url'.
How to complete the second step?I have tried build a function to return the specific text that has been clicked ,but I can't get the return value:
<script>
function getLinkname(cl){
var elements = document.getElementsByClassName(cl);
var getText = function() {
var attribute = this.innerHTML;
document.getElementById("staticBackdropLabel").innerHTML='Run ' + attribute + ' ?';
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', getText, false);
}
return attribute;
}
var linkname = getLinkname('confirm');
console.log(linkname);
</script>
error:
Uncaught ReferenceError: attribute is not defined
at getLinkname ((index):159:1)
This example I wrote is based on my undertanding about your question.
📌 I use the id attribute, because it is a simple way.
📌 If you want to change innerText of <a/> tag dynamically, the better way is to produce your <ul/> link list by JavaScript.
function clickATag (e) {
document.getElementById('input').value = e.innerText
document.getElementById('aTagId').innerText = e.id
var myModal = getMyModal();
myModal.show()
}
function clickButton (e) {
const aTagId = document.getElementById('aTagId').innerText;
const a = document.getElementById(aTagId);
a.innerText = document.getElementById("input").value;
const result = document.getElementById('result');
result.innerText = "new url: " + document.getElementById("input").value;
}
function getMyModal () {
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
return myModal;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<ul>
<li><a id="a1" class="dropdown-item confirm" href="#" onclick="clickATag(this)">wtdata</a></li>
<li><a id="a2" class="dropdown-item confirm" href="#" onclick="clickATag(this)">ftdata</a></li>
</ul>
<div id="myModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input id="input" />
<p id="result">new url:</p>
<p id="aTagId" hidden></p>
<p>Buttons</p>
<button id='cancel_btn' type="button" class="btn btn-primary" onclick="clickButton(this)">Confirm</button>
<button id='confirm_btn' type="button" class="btn btn-secondary">Cancel</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have a div called project and it is rendered with EJS
There several projects in the data for EJS, they are rendered by forEach loop - so several similar div appear.
The project div has id for identification in Jquery.
Further it has a project.name and project.id as a data-*
The problem which I encountered:
If I don't reload the page as intended - first try works well and Element inner text get updated correctly.
But on second try to change another project name both are changed to value of previous, so to say for both projects. In few words - new change overrides all previous. How is it possible?
Link to see how it looks in GIF
Imgur
Strange behaviour of chaining requests Imgur
<%userData.forEach(function(project){%>
<div class="project" id='project <%=project.id%>'>
<div class="projectHeader">
<div class="projectTitle">
<h5 id="projectTitle <%=project.id%>" class="projectName">
<%=project.name%>
</h5>
<div class="projectButtons">
<span data-toggle="tooltip" data-placement="top" title="Edit Project Title">
<a data-toggle="modal" data-target="#editProjectTitleModal">
<i id="editProjectName" class="editProject fas fa-pencil-alt"
data-name="<%=project.name%>" data-id="<%=project.id%>"></i>
</a>
</span>
</div>
</div>
</div>
A simple modal is called when the a tag in project is clicked.
<div class="modal fade" id="editProjectTitleModal" tabindex="-1" aria-labelledby="exampleformModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form class="" action="" method="">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Title</h5>
</div>
<div class="modal-body">
<div class="input-group">
<input id="editProjectNameInput" autocomplete="off" pattern="[a-zA-Z0-9 ].{1,25}" title="1 to 25 characters" class="form-control" aria-label="With textarea" placeholder="Enter new title" required></input>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="confirmEditProjectName" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
Jquery event handler which serves to change project.name, at first sends it to database and ammend DOM with new name. So the database get the new data, but the page is not reloaded and project.name changed simultaneously.
It grabs project-name and project-id and sends Ajax regular post - method, on success - change element's inner text to project-name
// Edit Project Title by ID
$(document).on('click', "#editProjectName", function() {
//Grab Id of the Project
var editProjectId = $(this).attr('data-id');
//Fill Modal input with current project.name
var currentTitle = document.getElementById('projectTitle ' + editProjectId).innerText;
$("#editProjectNameInput").val(currentTitle)
var url = '/editProjectName';
$('#confirmEditProjectName').on('click', function(event) {
//Take new project name from updated modal input
var newTitle = $("#editProjectNameInput").val();
//If they are same - alert
if (currentTitle === newTitle) {
event.preventDefault();
alert("New Title should be different")
} else {
event.preventDefault();
if (newTitle.length > 1 && newTitle.length <= 25) {
$.ajax({
type: "POST",
url: url,
data: {
projectName: newTitle,
projectID: editProjectId
},
success: function(result) {
//Hide modal and change element inner text to new value
$("#editProjectTitleModal").modal('hide')
document.getElementById('projectTitle ' + editProjectId).innerText = newTitle;
},
error: function(err) {
console.log(err);
}
})
}
}
})
})
I removed the space from the IDs and I changed from using the ID of #editProjectName to just using the class that is already on that object of editProject.
<%userData.forEach(function(project){%>
<div class="project" id='project<%=project.id%>'>
<div class="projectHeader">
<div class="projectTitle">
<h5 id="projectTitle<%=project.id%>" class="projectName">
<%=project.name%>
</h5>
<div class="projectButtons">
<span data-toggle="tooltip" data-placement="top" title="Edit Project Title">
<a data-toggle="modal" data-target="#editProjectTitleModal">
<i class="editProject fas fa-pencil-alt"
data-name="<%=project.name%>" data-id="<%=project.id%>"></i>
</a>
</span>
</div>
</div>
</div>
// Edit Project Title by ID
$(document).on('click', ".editProject", function() {
//Grab Id of the Project
var editProjectId = $(this).attr('data-id');
//Fill Modal input with current project.name
var currentTitle = document.getElementById('projectTitle' + editProjectId).innerText;
$("#editProjectNameInput").val(currentTitle)
var url = '/editProjectName';
$('#confirmEditProjectName').on('click', function(event) {
//Take new project name from updated modal input
var newTitle = $("#editProjectNameInput").val();
//If they are same - alert
if (currentTitle === newTitle) {
event.preventDefault();
alert("New Title should be different")
} else {
event.preventDefault();
if (newTitle.length > 1 && newTitle.length <= 25) {
$.ajax({
type: "POST",
url: url,
data: {
projectName: newTitle,
projectID: editProjectId
},
success: function(result) {
//Hide modal and change element inner text to new value
$("#editProjectTitleModal").modal('hide')
document.getElementById('projectTitle' + editProjectId).innerText = newTitle;
},
error: function(err) {
console.log(err);
}
})
}
}
})
})
After some research I have found out that once the on('click') is called it is On until the page get reloaded.
Thanks to this Question and Answer:
https://stackoverflow.com/a/6121501/13541013
I figured out - on('click') event should be switched off by calling $(this).off() (this is the event)
In my case I had to make $(this).off() right after:
$(document).on('click', "#editProjectName", function() {
$(this).off() ... further code
And it has to be done for every single on('click') event in the script.
I have the following divs with special attributes that I am selecting with jQuery
<div data-tab-name="Description">
<!-- content -->
</div>
<div data-tab-name="Video">
<!-- content -->
</div>
<div data-tab-name="Reviews">
<!-- content -->
</div>
I am then taking those divs and turning them into individual Bootstrap tabs (& nav-tabs) and attempting to set the first tab-pane & nav-tab to active. This is the result:
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#description">Description</a>
</li>
<li>
<a data-toggle="tab" href="#video">Video</a>
</li>
<li>
<a data-toggle="tab" href="#reviews">Reviews</a>
</li>
</ul>
<div class="row tab-content">
<div class="tab-pane fade in active" id="description">
<!-- Content -->
</div>
<div class="tab-pane fade" id="video">
<!-- Content -->
</div>
<div class="tab-pane fade" id="reviews">
<!-- Content -->
</div>
</div>
Whenever I run the code it structures it as I intended, which is what w3school's boostrap tab example shows (Dynamic Tabs), but multiple tabs are staying active when I switch between them which prevents them from being clicked twice.
What would I need to do to make it behave as it normally does when entering the html for the tabs directly? https://codepen.io/BBell/pen/RBLmEr
I'm not sure why stacksnippet is showing a script error, but it continues to show even if I remove the JS (http://recordit.co/8mazS35U9r). Here is a backup codepen that worked better for me:
https://codepen.io/BBell/pen/VBzJXz
$(document).ready(function() {
function cssEncode(name) {
return name.replace(/ /g, "-").toLowerCase();
}
var dataAttr = "data-tab-name";
var tabDivs = $("div[" + dataAttr + "]");
var navTabs = $('<div class="nav nav-tabs">');
var tabContent = $('<div class="tab-content" id="tabs"></div>');
var tabs = [];
var tabPanes = [];
tabDivs.each(function(e) {
var name = $(this).attr(dataAttr);
var encodedName = cssEncode(name);
tabs.push(
'<li><a data-toggle="tab" href="#' +
encodedName +
'">' +
name +
"</a></li>"
);
var tabPane = $(
'<div class="tab-pane fade" id="' + encodedName + '"></div>'
).append($(this).html());
tabPanes.push(tabPane);
$(this).detach();
});
navTabs.append(tabs.join(""));
tabContent.append(tabPanes);
var tabsContainer = $('<div class="tabs"></div>');
tabsContainer.append(navTabs);
tabsContainer.append(tabContent);
$(".iseo-item-page .col-md-12").append(tabsContainer);
$(".nav-tabs a:first").tab("show");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row iseo-item-page">
<div class="col-md-12">
<div data-tab-name="Description">
Content 0
</div>
<div data-tab-name="Video">
Content 1
</div>
<div data-tab-name="Reviews">
Content 2
</div>
</div>
</div>
</div>
The main issue is that when you do it dynamically like you do the li elements all get class of active but it should be only one active. Look # the example your provided as a working one inspect element on the tabs ... you will see that once you select a an tab/li it would get the active class and the previous one would loose it. In your example that class gets set to all so you can't again click on them.
Here is a working version with basically going around bootstrap js:
$(document).ready(function() {
function cssEncode(name) {
return name.replace(/ /g, "-").toLowerCase();
}
var dataAttr = "data-tab-name";
var tabDivs = $("div[" + dataAttr + "]");
var navTabs = $('<div class="nav nav-tabs">');
var tabContent = $('<div class="tab-content" id="tabs"></div>');
var tabs = [];
var tabPanes = [];
tabDivs.each(function(e) {
var name = $(this).attr(dataAttr);
var encodedName = cssEncode(name);
tabs.push(
'<li><a data-toggle="tab" href="#' + encodedName + '">' + name + "</a></li>"
);
var tabPane = $(
'<div class="tab-pane fade" id="' + encodedName + '"></div>'
).append($(this).html());
tabPanes.push(tabPane);
$(this).detach();
});
navTabs.append(tabs.join(""));
tabContent.append(tabPanes);
var tabsContainer = $('<div class="tabs"></div>');
tabsContainer.append(navTabs);
tabsContainer.append(tabContent);
$(".iseo-item-page .col-md-12").append(tabsContainer);
$('a[data-toggle="tab"]').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass("active");
$('li').not(this.parentNode).removeClass('active')
$('.iseo-item-page div').removeClass('active in')
$(this.hash).addClass('active in')
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row iseo-item-page">
<div class="col-md-12">
<div data-tab-name="Description">
Content 0
</div>
<div data-tab-name="Video">
Content 1
</div>
<div data-tab-name="Reviews">
Content 2
</div>
</div>
</div>
</div>
I'm using Materialize's modal for an email sign-up pop-up on load, and the issue I'm running into is that when I first visit the site the modal pops up as expected. But if I click on another page, like go to the About page, and then back to the Home page, the modal launches again. How can I get it to only pop up the first time the page is visited? Any advice is much appreciated. Thanks.
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Want more of 'Carrow?</h4>
<p>Join our mailing list!</p>
<p>No, we won't fill your inbox every day, and no, we won't sell your information to anyone else – PROMISE!</p>
<p>What you will get is content only available to our email subscribers, as well as advance notice on upcoming events and book launch dates.</p>
</div>
<div class="modal-footer">
Sign up
</div>
</div>
<div id="modal2" class="modal"
style="height:350px;">
<form class="container"
style="padding:45px;">
<label>Name: <input type="text" style="border-color:#840081;" autofocus /></label>
<label>Email: <input type="email" style="border-color:#840081;" /></label>
</form>
<div class="row center-align">
<!-- <div class="modal-footer"> -->
Join!
</div>
</div>
<script>
let buttons = document.getElementsByClassName('button');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function(e) {
let wavePosX = e.offsetX,
wavePosY = e.offsetY,
button = e.target,
buttonWidth = button.clientWidth,
wave = document.createElement('span');
wave.className = 'material-wave';
wave.style.top = wavePosY + 'px';
wave.style.left = wavePosX + 'px';
// Append wave element to the button
e.target.appendChild(wave);
// Start scale and opacity transitions
setTimeout(function() {
wave.style.opacity = 0;
wave.style.transform = 'scale(' + buttonWidth / 10 + ')';
}, 0);
// Remove the wave element after the transition
// Should use Modernizr's transitionEndEventName
setTimeout(function() {
button.removeChild(wave);
}, 800);
});
};
</script>
<script>
$('.modal').modal({
dismissible: true,
inDuration: 300,
outDuration: 200
}
);
$(document).ready(function(){
$('#modal1').modal('open');
});
$('#join-btn').click(() => {
$('#modal1').modal('close');
});
</script>
I want to append html code in bootstrap modal
HTML content:
<div class="modal fade" id="share12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content get_direction_modal_bg">
<div class="text-right"><a class="fa fa-times white normal12" data-dismiss="modal"> close</a></div>
<div class="modal-body">
<p class="white text-center">Share this Event</p>
<div class="share_list_popup">
<ul>
<li></li>
<li><a href="http://www.linkedin.com/shareArticle?mini=true&utm_campaign=201308&url=http://10times.com/"+eventname+"&title=Come join me at "+eventname+" on "+eventstartdate+","+eventcityname+".&utm_source=LinkedIn&source=LinkedIn
Come join me at "+eventname+" on "+eventstartdate+","+eventcityname+". Find event details at 10times.com/"+eventname+""></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<img src="images/share.png">
Javascript code:
var modal_event_name=document.getElementById("modal_event_name");
var modal_event_startdate=document.getElementById("modal_event_name");
var modal_city_name=document.getElementById("modal_event_name");
$('#share12').modal('show');
The problem I'm getting:
modal is now working
guide how to show HTML content in bootstrap modal
JSFiddle: http://jsfiddle.net/4gW4y/115/
Bootstrap comes with methods for showing & hiding modals.
With bootstrap 3 you can do:
$("#pop").on("click", function() {
$('#imagemodal').modal('show');
$('#imagemodal').on('shown.bs.modal', function() {
$('#imagemodal').find('.modal-body').append('<p>append some html here</p>');
});
});
It looks like you're trying to use Javascript variables (eventname, eventstartdatae, eventcityname) directly in the HTML. Instead, you could try building the URL with Javascript, and set the <li> (list items) and <a href=""> (links) with jQuery:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div id="modal_event_name">My Event Name</div>
<div id="modal_event_startdate">My Event Start Date</div>
<div id="modal_city_name">My Event City Name</div>
<div class="modal fade" id="share12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content get_direction_modal_bg">
<div class="text-right"><a class="fa fa-times white normal12" data-dismiss="modal">close</a></div>
<div class="modal-body">
<p class="white text-center">Share this Event</p>
<div class="share_list_popup">
<ul>
</ul>
</div>
</div>
</div>
</div>
</div>
<button onclick="showModal()">Show Modal</button>
Show Modal From Link
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
var eventname = document.getElementById("modal_event_name").textContent;
var eventstartdate = document.getElementById("modal_event_startdate").textContent;
var eventcityname = document.getElementById("modal_city_name").textContent;
var facebookLink = "https://www.facebook.com/?" + eventname + "&" + eventstartdate + "&" + eventcityname
var linkedinLink = "http://www.linkedin.com/?" + eventname + " & " + eventstartdate + "&" + eventcityname
$('.share_list_popup ul').append('<li>Facebook</li>');
$('.share_list_popup ul').append('<li>LinkedIn</li>');
function showModal() {
$('#share12').modal('show');
}
</script>
</body>
</html>
Working fiddle
There are several ways to manipulate the data of a modal (or anything else really). Bootstrap provides some, and you can read more about them there.
If you want to use jQuery below are some examples:
$("#pop").on("click", function() {
//ref. to the modal
var imgModal = $('#imagemodal');
//Shows the modal
imgModal.modal('show');
//ref. to the body of the modal
var imgModalBody = imgModal.find('.modal-body');
//Changes the entire content of the body, in the modal, to this
imgModalBody.html('<span style="color:red">This is appended directly from a string or variable</span><br/>');
//Appends a button to the modal body
imgModalBody.append(' <button id="clickMe">Load content from hidden div</button><br/>');
//Adds a click event on the button just appended
imgModal.on("click", "#clickMe", function() {
//Appends text from the hidden div, myHiddenContent, on the page
imgModalBody.append(' ' + $('#myHiddenContent').html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
Open my modal
<div id="myHiddenContent" style="display:none;">This is appended from html already on the page (hidden or not)</div>
<!-- Modal -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width: 400px; height: 264px;" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Could you use a function to generate the hyperlinks?
E.g:
Link
function doSomething()
{
var modal_event_name=document.getElementById("modal_event_name");
var modal_event_startdate=document.getElementById("modal_event_name");
var modal_city_name=document.getElementById("modal_event_name");
var url="path?modal_event_name="+modal_event_name+"&modal_event_startdate="+modal_event_startdate + "&modal_city_name="+modal_city_name;
window.open(url,""."");
}
Something like this?
The modal is working with the code. Check if bootstrap js is included.
You can use the shown event of modal to add the variables.
var modal_event_name = "Event Name";
var modal_event_startdate = "10th july";
var modal_city_name = "SF"
$('#share12').modal('show');
$('#share12').on('shown.bs.modal', function () {
if (!$(this).hasClass('social-links-added')) {
$(this).addClass('social-links-added');
var linkedin_url = "http://www.linkedin.com/shareArticle?mini=true&utm_campaign=201308&url=http://10times.com/" + modal_event_name + "&title=Come join me at " + modal_event_name + " on " + modal_event_startdate + "," + modal_city_name + ".&utm_source=LinkedIn&source=LinkedIn Come join me at " + modal_event_name + " on " + modal_event_startdate + "," + modal_city_name + ". Find event details at 10times.com/" + modal_event_name;
var facebook_url = "https://www.facebook.com/sharer/sharer.php?u=www.10times.com&title=Come join me at" + modal_event_name + "on " + modal_event_startdate + ", " + modal_city_name;
$('.share_list_popup ul li:eq(0)').find('a').attr('href', facebook_url);
$('.share_list_popup ul li:eq(1)').find('a').attr('href', linkedin_url);
console.log(facebook_url);
console.log(linkedin_url);
}
});
Fiddle