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
Related
As of now, I am making a simple no internet dinosaur game that everyone is familiar with using HTML, JS and CSS. I have been working my way through it and I have gotten everything working for the past few hours. All of a sudden, my buttons weren't working giving me the error: Uncaught ReferenceError: start is not defined at HTMLButtonElement.onclick
I tried changing the functions of the buttons and the IDs but none of it worked. My conclusion is that my script.js file isn't loading with the HTML file for whatever reason but the .css file is. The following code is the HTML.
<div id="game">
<div id="character"></div>
<div id="block"></div>
</div>
<div>
<button class="btn btn-secondary" id="button" onclick="start()">Start</button>
<button class="btn btn-secondary" id="button2" onclick="pause()">Pause</button>
</div>
</body>
<p id="paused"></p>
<p id="score"></p>
<script src="script.js"></script>
</html>
The code below is the code for either function.
function start() {
document.getElementById("button").innerHTML = 'Jump'
button.setAttribute( "onclick", "jump()")
block.classList.add("movement")
}
function pause() {
pauseStatus = true
}
I don't know what the problem might be. I haven't made any changes to the file paths or anything and I can't think of how to fix the problem. I've tried putting the src path both in the body and outside of the body in the HTML and it hasn't worked.
You should try moving your script tag inside your body.
<div id="game">
<div id="character"></div>
<div id="block"></div>
</div>
<div>
<button class="btn btn-secondary" id="button" onclick="start()">Start</button>
<button class="btn btn-secondary" id="button2" onclick="pause()">Pause</button>
</div>
<p id="paused"></p>
<p id="score"></p>
<script src="script.js"></script>
</body>
</html>
Javascript
You should also be mindful that lines of Javascript should terminate with a semicolan.
function start() {
document.getElementById("button").innerHTML = 'Jump';
button.setAttribute( "onclick", "jump()");
block.classList.add("movement");
}
function pause() {
pauseStatus = true;
}
It would also be wise to take note of Sebastians suggestion and use addeventlistener for event handling.
button.addEventListener("click", jump);
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 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>
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.