I am trying to use some show hide functions in my js file:
$(document).ready(function() {
$('#me').hide();
$('#send').click(function() {
$('#me').show("slow");
});
});
for some reason, when i click the id="send" button, the id="me"(a picture)
is not showing up again(though it disappears):
<div id="me">
<img src="Me.JPG" alt="me" width="450" height="450" alt="picture" align="right"/>
</div>
help please?
please let me know if i have to add more code to make myself clear...
thank you!
EDIT:
here is the code for the send button:
<input type="submit" id="send" value=" Send " class="submit" />
I would say the most likely answer is the send button does not yet exist when your page is loaded. Is this button being created dynamically, or through some other mechanism? To debug, I would say:
$(document).ready(function() {
$('#me').hide();
alert(document.getElementById('send')); //Test if it exists
$('#send').click(function() {
$('#me').show("slow");
});
});
If you get a popup with null, then you'll have to track down where this button gets generated and bind the event there.
Other than that, as you can tell from:
jsfiddle.net/zs7W2/
Your code works fine.
UPDATE:
I believe your FORM is actually submitting itself. You should change your code to:
$(document).ready(function() {
$('#me').hide();
$('#send').click(function() {
$('#me').show("slow");
return false; //Prevent submit
});
});
Or, use a <button type="button"> or <input type="button">
Example: http://jsfiddle.net/zs7W2/7/
<div id="me">
<img src="Me.jpg" alt="me" width="450" height="450" alt="picture" align="right"/>
</div>
<input type="button" id="send" value="Submit">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#me').hide();
$('#send').click(function() {
$('#me').show("slow");
});
});
</script>
I've used something like this. It works. I guess that some problem with image align. Try to change it.
Related
I'm trying to create a click event to a button but it ain't working.
This is what I've got so far:
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<div id="#background">
<div id="#showMoreComments">
<button id="#btn_showComments">Show more comments!</button>
</div>
</div>
I know it's kind of a silly question. But what am I doing wrong?
First remove the "#" from the id declaration in button tag i.e have this:
<button id="btn_showComments">Show more comments!</button>
Second, move the script below the html.
Remove the # from the button id. The # tells JQuery to select an element with the following id.
Like this:
<div id="#background">
<div id="#showMoreComments">
<button id="btn_showComments">Show more comments!</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<button id="#btn_showComments">Show more comments!</button>
should be -
<button id="btn_showComments">Show more comments!</button>
then your code will work just fine. :)
Kindly don't use # in HTML tags for IDs. # is attached to get an element using its ID.
Try this code, actually you have added # in your html code for ids. Please remove it.
<script type="text/javascript">
$(document).ready(function() {
$("#btn_showComments").click(function() {
alert("Hi from the button! :)");
});
});
</script>
<div id="background">
<div id="showMoreComments">
<button id="btn_showComments">Show more comments!</button>
</div>
</div>
Remove the # from the element in the html.
<div id="background">
<div id="showMoreComments">
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>
Here is my problem. I want to create a questionnaire.
How are you? A)Button "Good" B)Button "Bad"
i.e. user click button B.)
Alert Window is shown and notifying user about his/her last choice.
New Question and Buttons appear on the same page. Essentially, users will go through the set of questions on the same page.
Why are you Bad? A)Button "Some Txt" B.)Button "Some Txt"
How can I show new question and new buttons on the same page. The concept should follow some kind of decision tree logic.
Solutions, advises or "where-to-check hints" appreciated. Please, help me!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<script type="text/javascript">
function buttonclickgood() {
alert('you have clicked Good');
}
</script>
<script type="text/javascript">
function buttonclickbad() {
alert('you have clicked Bad');
}
</script>
</head>
<p>How are you?</p>
<input type="button" value="Good!" onclick="buttonclickgood()"/>
<input type="button" value="Bad!" onclick="buttonclickbad()"/>
<body>
</body>
</html>
You might want to explore JQuery a bit.
Particularly something around the .click() API
https://api.jquery.com/click/
Are you intending to do this just on the client side? I would recommend doing this through a client/server model thou e.g. Angular(Client) -> NodeJS(Server)
That is, having the question generation logic in node and let the client consume the questions however it is not impossible to do everything on the client.
So you code will be something like
<script src="../script/jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
<!-- maybe let say define your data (questions) here -->
var data =
[
{
<!--example ... -->
}
]
$("#btn_1").click(function() {
<!-- do some logic with the data above. Process it then print the new question by update your text -->
$('#TxtArea').val(data);
});
</script>
You will need to use some javascript to hide/show your different steps. With JQuery for example you can do something like that:
<script type="text/javascript">
$(document).ready(function() {
$(".step").hide();
$(".step-1").show();
});
function buttonclick(nextStep)
{
$(".step").hide();
$(".step-"+nextStep).show();
}
</script>
<div class="step step-1">
<p> Question 1 </p>
<input type="button" class="button" value="Good!" onclick="buttonclick(2)"/>
<input type="button" class="button" value="Bad!" onclick="buttonclick(2)"/>
</div>
<div class="step step-2">
<p> Question 2 </p>
<input type="button" class="button" value="Good!" onclick="buttonclick(3)"/>
<input type="button" class="button" value="Bad!" onclick="buttonclick(3)"/>
</div>
<div class="step step-3">
<p> Question 3 </p>
<input type="button" class="button" value="Good!" onclick="buttonclick(1)"/>
<input type="button" class="button" value="Bad!" onclick="buttonclick(1)"/>
</div>
Don't forget to add the JQuery library to make it work. The function can also be replaced by .click from JQuery.
I hope this will help.
WORKING CODE FOR YOU . I have added 2 level question only ... you can add more questions.
Click for working demo
<div id="first">
<p id ="text">How are you?</p>
</div>
<input type="button" id="b1" value="Good!" />
<input type="button" id="b2" value="Bad!"/>
<script>
$("#b1").click(function(){
if($("#b1").val()=="Good!")
{
$("#text").text("Good To hear that ! Do you want to spread a smile ?");
$("#b1").val("Yes");
$("#b2").val("No");
}
});
$("#b2").click(function(){
if($("#b2").val()=="Bad!")
{
$("#text").text("Ohh Sad ! Do you want my help ?");
$("#b1").val("Yes");
$("#b2").val("No");
}
}); </script>
Click for working demo
I have done question changes for both button of question 1 only... rest you can add . Include the jquery file
In my solution buttons' texts are changed. A decision tree of object is followed.
<input type="button" id="left" value="good" onclick="buttonclick(this.value)"/>
<input type="button" id="right" value="bad" onclick="buttonclick(this.value)"/>
<script type="text/javascript">
decision_tree = {
'bad': {
'some A': 'done',
' some B' : 'done'
},
'good': {
'yes': {
'like':'done',
'dont like':'done'
},
'no':'done'
}
};
left = document.getElementById("left");
right = document.getElementById("right");
st = decision_tree;
function buttonclick(v) {
alert('you have clicked ' + v);
if(st[v] == 'done'){
alert('you are done with questionnaire');
left.style.visibility = 'hidden';
right.style.visibility = 'hidden';
} else{
console.log(st[v]);
left.setAttribute("value",Object.keys(st[v])[0]);
right.setAttribute("value",Object.keys(st[v])[1]);
st = st[v];
}
}
</script>
I want to append a script generated in javascript inside a div created before in HTML, the problem is that only works if
$("<script />", {
"src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
"data-location":"http://en.parkopedia.co.uk/parking/" + search_field2,
"data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size":"650:400",
"id":"script_map",
"type":"text/javascript"
}).appendTo("body")
but if I change that for "$('#divId')" does not work, so the questions are:
How can I append that script generated inside a div when you click into a button?
How can I prevent to duplicate the script when I click twice in the button? Because it's working inside the body, but when I click again it shows two script windows. So i should remove the script before create a new one or if I get to put inside the div, clean all the childs inside.
I've created a demo here:
Update:
The main aim is to update the data-location when you click on the button and send the text inside the box to the data location to search there and show the script map below the textbox. Maybe it is another simple way to do it.
This will answer your first question.
.appendTo("#map")
And for second question.
if ($("#script_map").length > 0) {
$("#map").html("");
}
DEMO :
http://jsfiddle.net/kishoresahas/oosttuc0/4/
Code :
window.scripting = function () {
if ($("#script_map").length > 0) {
$("#map").html("");
}
var src_fld = document.getElementById('txt_f').value;
$("<script />", {
"src": "//en.parkopedia.co.uk/js/embeds/mapView.js",
"data-location": "//en.parkopedia.co.uk/parking/" + src_fld,
"data-options": "l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size": "650:400",
"id": "script_map",
"type": "text/javascript"
}).appendTo("#map")
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="tab-pane carpark" id="main_view">
<input type="text" id="txt_f" name="txt_f">
<input type="submit" class="btn btn-default" id="btn" value="Submit" onclick="scripting(); return false;">
<div id="map" name="map"></div>
<iframe style="border:none" width="100%" height="500px" id="iFrame2" name="iFrame2"></iframe>
</div>
Look this:
function scripting(){
var src_fld = document.getElementById('txt_f').value ;
$("#main_view").find("script[id='test']").remove();
console.log("Size: " + $("#main_view").size());
$("<script id='test'/>", {
"src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
"data-location":"http://en.parkopedia.co.uk/parking/" + src_fld,
"data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size":"650:400",
"id":"script_map",
"type":"text/javascript"
}).appendTo($("#main_view"))
console.log($("#main_view").html())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane carpark" id="main_view">
<input type="text" id="txt_f" name="txt_f">
<input type="button" class="btn btn-default" id="btn" value="Submit" onclick="scripting(); return false;">
<div id="map" name="map"></div>
<iframe style="border:none" width="100%" height="500px" id="iFrame2" name="iFrame2"></iframe>
</div>
Run the Date input line
DateInput('creneau_2',true,'DD-MON-YYYY');
you could just try and do it all in jQuery rather than mixing javascript selectors.
$("#test").append("<script type='text/javascript'>DateInput('creneau_2',true,'DD-MON-YYYY');</script>");
I have this code:
<div class="item">
<div class="hidden">44</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
<script type="text/javascript">
$(document).ready(function () {
$('#btnAddCommentForAnswer').click(function () {
alert(XXX);
});
});
</script>
</div>
<div class="item">
<div class="hidden">12</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
<script type="text/javascript">
$(document).ready(function () {
$('#btnAddCommentForAnswer').click(function () {
alert(XXX)
});
});
</script>
</div>
what code should I put at XXX to get the content of the div with class=hidden when i press the button at the same div with class=item?
If you click the first button you should get 44, and for clicking the second button you get 12.
id's are meant to be unique; you may wish to consider changing the id to a class.
With that in place, you could use a script like the following to achieve what you want:
$(document).ready(function() {
$('.btnAddCommentForAnswer').click(function() {
alert($(this).siblings('.hidden').text());
});
});
Here's a JSFiddle example: JSFiddle
Also, you don't need to have two script tags in your script! This one script wrapped in <script> tags is all that is necessary :)
Haven't tried but this should work:
$(this).closest('div').text()
You need not repeat the javascript code multiple times. Also, you cannot use id in jquery as the buttons have same id.
Here is the jsfiddle http://jsfiddle.net/t8XJZ/ which might solve your problem.
maybe this is more useful for you...
jquery:
$(document).ready(function () {
$('.item').each(function(){
$(this).find("#btnAddCommentForAnswer").click(function () {
alert($(this).prev(".hidden").text())
});
});
});
html:
<div class="item">
<div class="hidden">44</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
</div>
<div class="item">
<div class="hidden">12</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
</div>