I have an issue with js code. I'm trying to call a Pop-Up Box on click of the certain button and it's not working.
My aim is to assign an action to a certain button to open the pop-up when customer clicks on certain button. But the problem is that Klaviyo Pop-Up Box is set to open on page load by default settings are set in JS File that is located on Klaviyo side and i'm not able to change them directly.
Here is a problem similar to my, but not exactly what i was looking for.
Another option i was thinking about is to break the function that opens a pop-up onPageLoad and then to add this function to assign open action to a button.
This is how i thought i could call the pop-up onButtonClick.
My JS code
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$('.button').on('click',function(){
KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
});
</script>
or
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$(':button').click(function() {
if (this.id == 'button') {
KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
$('.button').popup('open');
}
</script>
Button Html Code
<input type="button" class="button" value="Input Button" />
My Pop-Up HTML Code
<div class="klaviyo_modal" id="MainPage_PP" style="display:none;">
<div class="klaviyo_inner">
×
<form action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
<input type="hidden" name="g" value="LIST_ID">
<div class="klaviyo_fieldset">
<p class="klaviyo_header">Interested in our Newsletter?</p>
<p class="klaviyo_subheader">Stay in the know with news and promotions.</p>
</div>
<div class="klaviyo_fieldset">
<div class="klaviyo_field_group">
<label for="MainPage_PP_$email">Email Address</label>
<input type="email" id="MainPage_PP_$email" name="email"></div>
</div><div class="klaviyo_fine_print"></div>
<div class="klaviyo_form_actions">
<button type="submit" class="klaviyo_submit_button">
<span>Subscribe</span>
</button>
</div>
<div class="klaviyo_below_submit" ></div>
</form>
<div class="error_message" ></div>
<div class="success_message" ></div>
</div>
</div>
I assigned id="target" to the button to let the JS to make manipulations with it.
The important thing is that the Klaviyo JS file should be load after all actions to let the embedded button work properly.
HTML Code. Button
<input type="button" class="button" id="target" value="Input Button" />
JS Code
<script>
$( "#target" ).click(function() {
KlaviyoSubscribe.attachToModalForm('#MainPage_PP', {
//some var for Klaviyo
...
});
// It is essentially important to load the Klaviyo JS file after all actions
$.getScript("//www.klaviyo.com/media/js/public/klaviyo_subscribe.js")
});
</script>
Related
I have a row of links, and depending on which one is clicked, a certain file gets loaded inside the "main" #DIV_main area where things are seen/clicked/viewed.
The HTML file, say HOME.HTML is:
HOME.HTML
<DIV id="DIV_TOP_LINKS">
<a class="nav_links" id="a_a" href="File_one.php">one</a>
<a class="nav_links" id="a_b" href="MAIN_UI.php">MAIN</a>
<a class="nav_links" id="a_c" href="File_two.php">two</a>
</DIV>
<DIV id="DIV_main ">
<!-- files MAIN_UI.php, File_one/two.php etc go here -->
</DIV>
the Javascript is:
$(document).ready(function(){
$("#DIV_TOP_LINKS a").click(function(e){
e.preventDefault();
$("#DIV_main").load(e.target.href);
});
$("#BTN_a").click(function(e){ //these dont work
alert("helo a");
});
$("#BTN_c").click(function(e){ //these dont work
alert("helo b");
});
});
function CH_ANGE(th, txt)
{ switch(txt)
{ case "a_click":
$("#DIV_A_inputs").show();
$("#DIV_B_inputs").hide();
$("#DIV_C_inputs").hide();
break;
case "b_click":
$("#DIV_A_inputs").hide();
$("#DIV_B_inputs").show();
$("#DIV_C_inputs").hide();
break;
case "c_click":
$("#DIV_A_inputs").hide();
$("#DIV_B_inputs").hide();
$("#DIV_C_inputs").show();
break;
}
MAIN_UI.php file is as follows:
<div id="DIV_post_type">
<div id="BTN_a" onclick="CH_ANGE(this, 'a_click')">Button A</div>
<div id="BTN_b" onclick="CH_ANGE(this, 'b_click')">Button B</div>
<div id="BTN_c" onclick="CH_ANGE(this, 'c_click')">Button C</div>
<button id="BTN_Post_Wall" onClick="POST_AJAX_INP_to_PHP_BUTTON()">POST</button>
</div>
<div id="DIV_abc">
<div id="DIV_A_inputs">Div_A and other content
<input TYPE="TEXT" ID="inp_A" NAME="INP_A">
</div>
<div id="DIV_B_inputs">Div_B and other content
<input TYPE="TEXT" ID="inp_B_1" NAME="INP_B_1">
<input TYPE="TEXT" ID="inp_B_2" NAME="INP_B_2">
<input TYPE="TEXT" ID="inp_B_3" NAME="INP_B_3">
</div>
<div id="DIV_C_inputs">
<input TYPE="TEXT" ID="inp_C_1" NAME="INP_C_1">
<input TYPE="TEXT" ID="inp_C_2" NAME="INP_C_2">
</div>
</div>
So the issues which I do not know how to implement are:
If you see the $(document).load function, there are 2 more event handlers for $("#BTN_a").click and $("#BTN_c").click. These two did not work, and then I thought its because essentially, they are 'linked' when the document HOME.HTML loads. The items BTN_a and BTN_c will only be there on the main page if the "MAIN" link click triggers a load of file MAIN_UI.php inside the #DIV_main. Is there a way to link $(document).load functions to elements which will arrive later on the page? or another $(something).load function in jquery I can use?
Thanks a ton in advance.
I'm using Colorbox.js for the first time and am having issues with placing a newsletter signup inside of the popup. I am assigning colorbox to my element .newsletter-popup and it is working correctly, however as mentioned the <form> within does not work. I have tested the form and it works correctly when not loading via colorbox?
Also, in the source code of my page I can see some automatically generated colorbox code #cboxOverlay and #colorbox, why do these appear when I've already assigned colorbox to my own element? I'm also not able to set options for colorbox on my element, as they don't work. Have a got this setup incorrectly?
Working Example (Appears after 3 seconds): http://development.ozonecoffee.co.uk/our-journal/
JS
setTimeout(function(){
jQuery('.newsletter-popup').colorbox({
trapFocus: false,
closeButton: true,
onComplete: function(){ $("#email").focus(); }
});
}, 3000);
// Close button
$( ".close-popup" ).click(function() {
$.colorbox.remove();
});
HTML
<div class="newsletter-popup">
<div class="modal">
<div class="close-popup"><span>X</span></div>
<div class="container">
<h4>Title</h4>
<form class="mailing-list-signup" id="subscribe-form" action="http://ozonecoffee.us14.list-manage.com/subscribe/post-json?u=93b92e23751a1d94fe6e57dc9&id=3caae1521b" method="get">
<input id="email" type="email" placeholder="Sign up for our newsletter" value="" name="EMAIL" >
<input type="submit" value="Sign up" name="subscribe" >
</form>
</div>
</div>
</div>
i am trying to load ticket.htm from holiday.html using ajax. when i click on "Get Ticket" it is supposed to slide the para from ticket.htm but i am getting nothing .All i can see is a button.so far my script went like this..
<script>
$(document).ready(function()
{
$("#button").on('click','#submit',function()
{
$.get("ticket.htm",function(response)
{
$('#content').html(response).slideDown();
});
});
});
</script>
<body>
<div id="button">
<input id="submit" type="submit" value="Get Ticket"/>
</div>
<div id="content">
</div>
</body>
ticket:
<p class="button-para">Flight Details: Air Asia<br>
Schedule: 20-01-2015 (10:15 AM)<br>
Gate C
</p>
$('#content').html(response).slideDown(); // appending response to the newly added div
<body>
<div id="button">
<input id="submit" type="submit" value="Get Ticket"/>
</div>
<div id="content"></div> // Added a new div with id content
</body>
EDIT: This issue was due to calling xmlhttp request (AJAX) without using a webserver. Once the xampp (apache,php,mysql) is installed the problem solved
I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span> element further down the page.
When <button id="people"> hasClass('user_view_active') the HTML link should display "People" when <button id="jobs"> hasClass('user_view_active') the HTML link should display "Jobs".
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view">Jobs</button>
<button id="people" class="user_view_active user_view">People</button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> People</span>
To replace the text within a link you can use the jQuery .text() function. This function can also get the text value and also set the text value - as is shown in the example below -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.
Okeydokey ?
Are you sure those are the right tags ?
<span class="right_title">Connection Suggestions</title>
Are you sure an <a> element inside a <button> element is a good idea?
<button id="jobs" class="user_view">Jobs</button>
role="main" is'nt a valid attribute, but will probably work anyway.
This just seems easier:
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
FIDDLE
Try this way:
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');
I'm working on 'add a link' functionality. For that I'm using Modal plugin from Twitter Boostrap JS. On the main page there's only the 'link' field to fill, when a user clicks 'add link' button, a modal pops up, and the user sees the complete form to fill 3 fields: link, title, tags. However, I want 1) the link field to be pre-filled with the value from the previous step AND 2) the title field is pre-filled with the title of the url.
I can do each of these separately, but I can't do both. In fact, the code below pre-fills the link field leaving title field empty. If I uncomment the AJAX part and add 'onClick="sendRequest()', then the code prefills the title field by executing the php script 'savePostAjax.php' which given the url echoes the title. However, in that case the link field is not filled. I guess, Bootstrap events somehow interfere with AJAX I wrote. One approach I tried is to get the url title in JavaScript, didn't work. How would you go about solving this problem of pre-filling BOTH link and title of the form in the modal dialog? Thanks!
<html>
<head>
<title>Example</title>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap-modal.js"></script>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css" />
<!-- AJAX
<script type="text/javascript" src="ajaxwebform/prototype.js"></script>
<script type="text/javascript">
function sendRequest() {
new Ajax.Request("savePostAjax.php",
{
method: 'post',
parameters: 'linkURL='+$F('linkURL'),
onComplete: showResponse
});
}
function showResponse(req){
$('show-title').value= req.responseText;
}
</script>
AJAX ENDS -->
<script type="text/javascript">
$(document).ready(function()
{
$('#modal-from-dom').bind('show',function()
{
$(".modal-body #wall-post").val($("#linkURL").val());
});
});
</script>
</head>
<body>
<!-- The Modal Dialog -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Add Link</h3>
</div>
<div class="modal-body">
<!-- onsubmit='return false;' -->
<form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data' >
<div>
<input id='show-title' class='label-inline' name='title' type='text' size='100'>
</div>
<div>
<input id='wall-post' class='label-inline' name='linkURL' type='text' size='100'>
</div>
<div>
<input id='link-field' class='label-inline' name='topics' type='text' size='100' placeholder='topics'>
</div>
</form>
</div>
<div class="modal-footer">
Add Link
</div>
</div>
<!-- Enf of The Modal Dialog -->
<div class="container">
<div class="wall-post">
<input id='linkURL' class='label-inline' name='linkURL' type='text' size='100' autocomplete='off'>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn">Add Link</button>
<!-- onClick="sendRequest()" -->
</div>
</div>
</body>
The reason it doesn't work is because you've included prototype and jquery, both of which try to occupy $. You can easily get around this by using jQuery in noConflict mode but I'd recommend ditching prototype completely as it doesn't make sense to use two libraries in that situation.
I haven't actually run this, but it should be what you need. Of course before actually using it you'll want to add a little spinner indicating that the ajax request is being made etc.
jQuery(document).ready(function($) {
function setTitle(url) {
$.post("savePostAjax.php", { linkURL: $('#linkURL').val() },
function(resp) {
$('show-title').val= resp;
});
};
$('#modal-from-dom').bind('show',function() {
var linkURL = $('#linkURL').val();
$('.modal-body #wall-post').val(linkURL);
setTitle(linkURL);
});
});