EDIT: The solution was to add this to the profile page instead of the gender page.
$('#profile').live( 'pageinit',function(event){
$('p#pTest').text(localStorage.getItem('gender'));
});
I have a paragraph with som text in a listview that I want to change programatically from another page after clikcing save.
EDIT: This is my listview in profile.html. When you click on the item you get to another page where you can save your gender. I want to change the paragraph in this listview to the gender that was changed from the other page.
<ul data-role="listview" >
<li><a href="gender.html">
<img src="images/gender2.jpg" />
<h3>Gender</h3>
<p id="pTest">Male</p>
</a></li> </ul>
The gender html page is just basic stuff with two radio buttons and a save button.
Here is my javascript code(in a seperate file):
$('#gender').live('pageinit', function(event) {
var gender = localStorage.getItem('gender');
var boolMale = true;
if (gender == "female") boolMale = false;
$('#radio-choice-male').attr("checked",boolMale).checkboxradio("refresh");
$('#radio-choice-female').attr("checked",!boolMale).checkboxradio("refresh");
$('#saveGenderButton').click(function() {
if ($('#radio-choice-male').is(':checked'))
localStorage.setItem('gender', "male");
else localStorage.setItem('gender', "female");
$('#pTest').html('test'); //does not work
//$('p#pTest').text('test'); //does not work
//$('#pTest').text('test'); //does not work
$.mobile.changePage("profile.html");
});
});
I have tried this with javascript: $('p#pTest').text('test');
The text does not change however. (I know that the save button works). Is this possible?
Try the following, note that when the user refreshes the page, the value is "Male" again, data should be stored on a database.
$('button').click(function(){
$('#pTest').text('test')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<p id="pTest">Male</p>
<button>change</button>
"saving" is something wholly different from changing paragraph content with jquery.
If you need to save changes you will have to write them to your server somehow (likely form submission along with all the security and input sanitizing that entails). If you have information that is saved on the server then you are no longer changing the content of a paragraph, you are drawing a paragraph with dynamic content (either from a database or a file which your server altered when you did the "saving").
Judging by your question, this is a topic on which you will have to do MUCH more research.
Input page (input.html):
<form action="/saveMyParagraph.php">
<input name="pContent" type="text"></input>
</form>
Saving page (saveMyParagraph.php) and Ouput page (output.php):
Inserting Data Into a MySQL Database using PHP
It seems you have the click event wrapped around a custom event name "pageinit", are you sure you're triggered the event before you click the button?
something like this:
$("#gender").trigger("pageinit");
Related
I've created a DIV that loads a text file. The goal is to update the text file and have the output correctly displayed in the browser. It works; however, when I update the text file, the contents do not display in the browser until I do a ctrl-F5 to hard refresh the page.
<div id="outage"><object width=475 data="outage.txt"></object></div>
How can I refresh the DIV or OBJECT to correctly display the data in the text file?
I think that's what you mean? Ajax can be used in this process.
If you want what has been written in the file to be moved to the 'div' immediately after the 'save' then I don't think it's possible to do it except by back-end
<div id="outage">
<object width=475 data="outage.txt"></object>
</div>
<button class="bttn">Update</button>
<script>
document.querySelector(".bttn").addEventListener("click", (e) => {
e.preventDefault()
document.querySelector('#outage').innerHTML = "";
document.querySelector('#outage').innerHTML = `<object width=475
data="outage.txt"></object>`;
});
</script>
I'm looking to create a button for my website which allows the user to edit information on both the website and the database. To put it into context, I sell cars and when I would like to make changes to a vehicle's details, I would like it to update the information on the website, not just the database.
The function below represents what happens when the update button is clicked - I have narrowed it to just the car colour. The content piece represents the form which appears when the modify button is clicked. The cars.colour represents the colour of the car as per the DB. When the update button is clicked, this value will appear in the text field. The #carList is displayed on a different HTML page.
Catalogue.js:
function update(key){
database.ref('car').once('value', function(snapshot){
if(snapshot.exists()){
snapshot.forEach(function(data){
var cars = data.val();
console.log(cars);
if(data.key === key){
var content = '';
content += '
<form id="car_update">
<div class="container">
<h1>Vehicle Details</h1>
<div class="row">
<input id="colour"
type="colour" placeholder="Colour..."
value="'**+cars.colour+**'" style="width: 150px;"/>
</div>
<button class="test"
onclick="updateCar(\''**+key+**'\')">Submit</button>'
}
$('#carList').append(content);
})
}
}
}
Item1.html:
<label>Colour: </label></br>
<script type="text/javascript">
document.getElementById('colour').innerHTML;
</script>
I not sure I quite understand, it sounds like you want to make a call and update the database and you also want to the page display the user is seeing to update and you already have the call to the database working.
It looks like you have an inline javascript method in the html which is only called when the page is rendered by the browser:
<label>Colour: </label></br>
<script type="text/javascript">
document.getElementById('colour').innerHTML;
</script>
If you want to also update the page from user input, I think you need to have the page refresh after the user submits so the html is called again from the server with the latest content that was updated in the database, or change the html to be setup in a way that it can be updated from the javascript, something like:
<label>Colour: </label></br>
<span id="colorLabel">
and then in the javascript, after cars.colour has the updated value, have something like:
document.getElementById('colorLabel').innerHTML = cars.colour;
I have searched Unbounce and Google for documentation, but can't find a way to make this work. Any help is greatly appreciated!
Use case:
I have a test page setup in Unbounce and it would be great when a user lands on the page and submits the form that the value being generated through the script below in the hidden field is added to the current URL upon submission.
It's important that if the user lands on the page from an advertising campaign that the value is added to URL and does not replace it.
Example:
User lands on testpage.com or testpage.com?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA
Unique ID is created with the following JavaScript and added to a hidden field:
<script type="text/javascript">
$(document).ready(function() {
var id = new Date().toISOString().replace(/[-tTzZ:.]/g, '');
$('#lead_id').val(id);
});
</script>
User clicks submit and and is redirected to a thankyou page with the value of the hidden field passed in the URL:
testpage.com/thank-you?lead_id=1234
testpage.com/thankyou?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA&lead_id=1234
I should also mention that I can not edit the html of the form so this would need to happen with JavaScript as Unbounce provides a space to add custom code.
Is the form method get? If it is post it wont append that to the URL for the hidden field.
Your approach seems right however if this is the HTML on page:
<form action="http://example.com" method="get" id="theForm">
<input type="hidden" value="xyz" />
<button type="submit">Send</button>
</form>
You can use some JS code like one of the following to modify this...however you'll want to verify that everything still works as expected:
document.getElementById('theForm').action = "http://another.example.com";
document.getElementById('theForm').method = "get";
This is my first time posting so I apologize if I've missed something or if I get something wrong. I've also looked at other posts and although some are very similar, I don't think it's quite getting to the answer I'm seeking. I am also very new to AJAX (although this code doesn't really utilize a lot of AJAX I think) so any helpful insight into this problem would be greatly appreciated.
I'm trying to create a quiz template that calls on the data from a PHP file using AJAX after selecting a radio button and clicking the "Answer" button.
The general idea is that after the user reads the question, they select a radio button and clicks on the "Answer" button, the bottom part of the page gets populated with either the correct or incorrect string. It's easy to populate it with text and css, but my issue lies in pulling the right text.
Here is the HTML code block that sets up the form submission:
<form action="data.php" method="post" id="q1">
<input type="radio" name="answer1" value="1a" id="1q"> A.
<br>
<input type="radio" name="answer1" value="1b" id="1q"> B.
<br>
<input type="radio" name="answer1" value="1c" id="1q"> C.
<br>
<input type="radio" name="answer1" value="1d" id="1q"> D.
<br>
<input name="submit1" id="answer" type="button" title="abutton" value="ANSWER">
</form>
Here I've set up four radio buttons that each correspond to a letter and the form is linked to data.php, the file I'm pulling the correct/incorrect text from in this case.
I had an earlier version of the code that would follow the logic I had set out to do but would populate the correct text in another page. My goal is populate the a grey "Answer" box in the same page that appears after clicking the "Answer" button with text. The appended text is defined as a variable in the code as $correct or $incorrect, based on the user's selection.
The JS code block that calls the PHP file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#answer").click(function()
{
var test1 = $.post("data.php",
{answer1:'1d'},
function(data)
{
$("#text1").empty();
$("#text1").append(data);
$("#panel").fadeDown("slow");
});
});
});
</script>
I had help constructing this JS code but I understand enough of it. The goal here is that the "Answer" button, after being clicked, appends the text below the form element. This shows up as a small, grey "Answer" box from where users can read whether they got the right answer or not.
This particular line of code is what's bugging me:
{answer1:'1d'},
1d contains the right answer and when you pick any radio button and press "Answer", it still shows the correct text.
But when I try to do something like this:
{answer1:'1d',answer1:'1a',answer1:'1b',answer1'1c'},
The incorrect text, which is supposed to populate after choosing the radio buttons 1a, 1b, or 1c, overrides the text that's supposed to populate, even if the radio button 1d is chosen.
The PHP code that the JS code is calling from:
<?php
$correct = "Correct";
$incorrect = "Incorrect";
if (isset($_POST['answer1']))
{
if ($_POST['answer1'] === '1d')
{
print $correct1;
}
elseif ($_POST['answer1'] === '1b')
{
print $incorrect1;
}
elseif ($_POST['answer1'] ==='1c')
{
print $incorrect1;
}
elseif ($_POST['answer1'] === '1a')
{
print $incorrect1;
}
};
?>
Again, any insight on this problem would be greatly appreciated! Let me know if I need to clarify anything. Thanks!
First, id should always be unique. So remove or change the id of your inputs radio.
Then, you need to change your ajax request to send the selected input radio like this :
$(document).ready(function() {
$("#answer").click(function() {
var answer = $("input[name=answer1]:checked").val();
$.post("data.php", {answer1: answer}, function(data){
$("#text1").empty();
$("#text1").append(data);
$("#panel").fadeIn("slow");
});
});
});
Because in your code you never send the selected radio to your php page. And if you only send "1d" in this line {answer1:'1d'} your php page will always return the "correct" text even if you check another radio button.
I don't know the jQuery fadeDown() method. Only fadeIn() or fadeOut().
Also, in your data.php $correct1 and $incorrect1 are undefined. So echo $correct or $incorrect.
I have a main site, mainwebsite.org, and a sub-site that uses a different domain, mainwebsite.giftgiving.org that is styled to look the same as the main site so that users do not feel as though they've left the original site.
The main site has a search button, and I need that search button to work on the secondary site. However, I don't entirely understand how the submit function of the search button works, so I'm not sure how to get it working right on the secondary site. Simply copying the html didn't work, which I assume is because I'm either missing some javascript function or because the submit button is trying to post to a page that doesn't actually exist on the secondary site (I had a similar issue with a different website, where a submit button submitted to "../searchpage.aspx" but that page only existed on www.mainsite.org, so secondarysite.org/searchpage.aspx resulted in 'page not found'). As it is now though, I'm not getting any error, the search button simply doesn't do anything.
Here's the HTML from the main site:
<div id="ctl00_pnlSearch002" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_btnSearch002')">
<div class="utilities floatRight">
<ul>
<li class="searchButton"><input type="image" name="ctl00$btnSearch002" id="ctl00_btnSearch002" src="/images/design002/btn_search.jpg" style="width: 30px; height: 22px; border: none;"></li>
<li class="search"><input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" value="Search" onblur="if (value == '') {value = 'Search'}" onfocus="if (value == 'Search') {value =''}"></li>
<li class="paddingL">A+A-</li>
<li class="textsize paddingL">Text Size</li>
</ul>
</div>
</div>
I don't understand how this line works:
onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ct100_btnSearch002')
If I could figure out where the search button is making a call to, I could modify the secondary site by putting the search button inside a form with action="http://mainwebsite.org/?????"
That one line that you don't understand triggers a JavaScript function that in this case likely ends up performing a postback: WebForm_FireDefaultButton() performs a virtual "click" on the named element, in this case, "ct100_btnSearch002".
(There's a copy of the source code to that JS function here, although you can easily disassemble MS's helper JS yourself to see it: http://www.sentia.com.au/blog/fixing-the-enter-key-in-aspnet-with-jquery)
That button very likely performs a postback on the original page, triggering some "OnClick" event of the "btnSearch002" control. Since you've only shown the resulting HTML and not the original .aspx file it came from, or the .aspx.cs file that contains the server-side code that responds to that postback, it's going to be very hard to tell you much more.
But odds are pretty good that you can't simply copy that "search" button from site to site: Copying that markup is copying just the tip of the iceberg, and leaves out the rest of the berg that's holding up that tip.