I'm trying to build an application that takes a text from a website (for the app I'm using gutenburg.org's open ebook catalog) and displays the story in bites of 10 indexes at a time in a div to make the story easier to read for those with ADD. I have a working increment function but I'm stuck as to how to increment back to the previous chunk.
HTML:
<input type="text" id="url" style="width: 400px">
<input type="button" id="btn" value="Get JSON">
<button id="button">Next</button>
<button id="prev">Previous</button>
<div id="test"></div>
Javscript:
$(function() {
$( '#service' ).on( 'change', function(){
$( '#url' ).val( $( this ).val() );
});
//angular.module('exampleApp')
$( '#url' ).val( $( '#service' ).val() );
$( '#btn' ).click(function(){
var url = $( '#url' ).val()
$.ajax({
crossOrigin: true,
proxy: "http://localhost:8888/whorl/proxy.php",
url: url,
//dataType: "json", //no need. if you use crossOrigin, the dataType will be override with "json"
//charset: 'ISO-8859-1', //use it to define the charset of the target url
context: {},
success: function(data) {
//alert(data);
var body = data;
console.log(body.length);
//body/data is a string
var text = body.split(' ')
console.log(text.length);
var increment = function(array) {
if (array.chunk < array.length) {
var chunk = array.slice(array.chunk,Math.min(array.chunk+array.chunkSize, array.length).join(" ");
array.chunk += array.chunkSize;
$( '#test' ).html(chunk);
console.log(chunk);
}
};
$(document).ready(function(){
$("button").click(function() {
increment(text);
});
});
}
})
.done(function( data, textStatus, jqXHR ) {
//alert(data);
});
});
});
pass an attribute, value would be either INCREMENT or DECREMENT
if (value=='increment')
array.chunk += array.chunkSize;
else
array.chunk -= array.chunkSize;
Related
I created a simple text field form and a button on a webpage:
<input type="text" value="name"><button>click me</button>
and I created a short script in jquery:
<script>
$( "button" ).click(function() {
var text = $( "input" ).text();
$( "input" ).val( text );
});
</script>
What I want to achieve is to take the value written by user in the text field and after hitting the button - inserting taken value from text field to the database. I have database ready, but I've never connected with that through jquery, I only used php for that. Right now when I press the button, I get the "name" string inside the text field (instead of string typed before). How should I change the code to make it work?
Thanks!
You need to continue to use php to talk to the database and use
jQuery.ajax(), or the .post() or .get() shorthand, to send the data to php. So:
$("button").click(function() {
$.post('myphpfile.php', { mytext: $('input').val() });
});
then in your php file:
<?php
if( $_REQUEST["mytext"] )
{
$mytext = $_REQUEST['mytext'];
// insert $mytext into database
}
?>
$( "button" ).click(function() {
$.ajax({
method: "POST",
url: "save.php",
data: $("input").val()
})
.done(function( msg ) {
alert( "Data Saved" );
});
});
Use AJAX call to call you service and pass you value parameter along with that.
var val=$('#text').val();
var xhr = $.ajax({
type: "POST",
url: "some.php",
data: "value="+val,
success: function(msg){
alert( "Data Saved: " + msg );
}
});
<input type="text" value="name" id="name">
<input type="button" id="button" value="Click Me"/>
<script>
$( "#button" ).click(function() {
var text = $("#name").val();
$.ajax({
url: 'location.php',
type: "POST",
data: {
text: text
},
success: function(response)
{
alert("inserted");
}
});
});
</script>
it will just get the input value than you have to post it using ajax and using mysql you can insert the value to database
I´m having some trouble setting the initial value of my Jquery UI Slider. The main problem (I think) is that the initial value I'm setting is being generated AFTER the slider is created (the initial value is coming from a Jquery.ajax).
Here is what I have:
<script type="text/javascript">
$(window).load(function(){
function ReadVars() {
$.ajax({
//Post to fetch values from computer B
url: "somefile.php",
type: "post",
datatype: "html",
data: {
foo: "foo",
bar: "bar",
},
success: function(response){
//Computer B responds with several values separated by
// a comma e.g. "0,23,1,hello,etc"
var responseSplitted = response.split( "," );
//The second value from the response (in this case 23)
//should be the initial value of the slider
var SliderStart = responseSplitted[1];
console.log("Slider start = ", SliderStart);
},
});
}
var Init = false;
if( !Init ) {
console.log( "Init" );
Init = true;
ReadVars();
}
setInterval( ReadVars, 10000 ); //Update respond every 10 seconds
$("#slider1").slider({
value: SliderStart, //SliderStart should be 23.. but is not working
//because SliderStart does not exist at the moment this part is run
min: 0,
max: 60,
slide: function (event, ui) {
$("#slider1Value").val(ui.value + " kg");
},
stop: function(){
var value = $(this).slider( "option", "value" );
console.log( "value = ", value );
}
});
$( "#slider1Value" ).val( $( "#slider1" ).slider( "value" ));
});
</script>
<body>
<input id="slider1Value" type="text">
<div id="slider1" style="width:300px;"></div>
<input type="text" id="slider1Value" />
</body>
If I include the following two lines under the "success: function(response){}", then it works.
$( "#slider1" ).slider( "option", "value", SliderStart );
$( "#slider1Value" ).val( $( "#slider1" ).slider( "value" ) + " kg" );
However, I just want to set the initial value once and not every 10 seconds. Is there anyway of doing this?
If you move all the code that creates your slider to the success function of your Ajax call, then the slider will be created as soon as your initial value is available.
I'm trying to get the ajax section to work but I have had no luck. I tried putting it in a different section but the variable "selection" does not go through and the page does not update. Basically what I"m trying to do is get the a value entered in the dropdown input item and then using that value to create a table in the Ajax function.
<html>
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<script>
$( document ).on( "pagecreate", function() {
$( "#mylist li" ).on( "click", function() {
$( "#myinput" ).val( $( this ).text() );
$("#mylist li" ).addClass('ui-screen-hidden');
var selection = $( "#myinput" ).val();
var station_code = "null";
if (selection == "Location1")
{
station_code = "A254";
my_url="www.someurl.com/"+station_code;
}
else{
station_code = "A300";
}
$.ajax({
type:"get",
dataType: 'jsonp',
url: "www.someurl.com",
success: function(data) {
//write code
}
});
});
});
</script>
<div data-role="content" id="content">
<form class="ui-filterable">
<input type="text" id="myinput">
</form>
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-input="#myinput" id="mylist">
<li>location1</li>
<li>location2</li>
<li>location3</li>
</ul>
</div>
I think your javascript code is a bit messy. Try this one :
$( document ).on( "pagecreate", function() {
$( "#mylist li" ).on( "click", function() {
$( "#myinput" ).val( $( this ).text() );
$("#mylist li" ).addClass('ui-screen-hidden');
var selection = $( "#myinput" ).val();
var location_code = "null";
var my_url = "null";
if (selection == "Elm St"){
location_code = "R227";
}
my_url="www.somelink.com";
$.ajax({
type: "post",
url: my_url,
dataType: 'jsonp',
success: function(data){
document.write(data);
},
error: function(){
document.write ("didn't work");
}
});
});
});
Im doing a AJAX call and once I get the response, I want to replace a submit button with a label...But this is not working. I get the alert msg ie; the response from the Ajax call but the replacewith command fails.
Can you please tell me what is the mistake Im doing..
Replacewith command
$( this ).closest( 'tr' ).find( 'input:label' ).replaceWith("<label for=\'success\'>SUCCESS</label>");
Code:
$("#table_appl,#table_enfr,#table_det01,#table_det02,#table_det03,#table_det04,#table_det05,#table_datais").on( "click", "input:submit", function( event ) {
//alert('Hi')
//event.preventDefault();
var fieldvalue = $(this).closest('tr').find('input:text').val();
var fieldname = $(this).closest('tr').find('input:text').attr('name');
alert('fieldname = ' + fieldname)
alert('fieldvalue = ' + fieldvalue)
$.ajax({
type:"GET",
url:"/validate/",
data:{'fieldvalue':fieldvalue,'fieldname':fieldname},
success:function(data){
if (data == 'Y'){
var item = $(this).closest('tr').find('input:label')
alert("Gonna be replaced" + item);
$( this ).closest( 'tr' ).find( 'input:label' );
$( this ).closest( 'tr' ).find( 'input:label' ).replaceWith("<label for=\'success\'>SUCCESS</label>");
}
alert("Response = "+ data);
}
});
return false;
})
Here's a fiddle.
And here's the code:
<form role="form" method="POST" action="/validate/" id="input_form">
<input id="myInput">
<button type="submit" id="submitButton">Click me!</button>
</form>
with the script:
$("#submitButton").click(function () {
event.preventDefault();
$.get("/validate/", function (d){
if (d == "Y"){
$("#submitButton").replaceWith("<label>SUCCESS</label>");
}
})
})
Is this about what you want? I guess you'll have to adapt the .replaceWith() part to find the correct element...
I used the example from jQuery mobile site Autocomplete source code
It's working fine, but when I tried to give alert in the script inside the listviewbeforefilter event, it's showing the alert 3 times, so when 3 characters are entered, it will prompt around 7-9 times.
Why is it showing so many alerts? I thinks it should prompt only once when the character is inserted.
Here is the code retrun in script for autocomplete:
$( document ).on( "pageinit", "#myPage", function() {
alert("abc");
$( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
alert("789");
if ( value && value.length > 2 ) {
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
$ul.listview( "refresh" );
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
crossDomain: true,
data: {
q: $input.val()
}
})
.then( function ( response ) {
alert("123");
$.each( response, function ( i, val ) {
html += "<li>" + val + "</li>";
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
});
});
Here is the code return in the body tag:
<div data-role="content">
<h3>Cities worldwide</h3>
<p>After you enter <strong>at least three characters</strong> the autocomplete `function will show all possible matches.</p>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" `data-filter-placeholder="Find a city..." data-filter-theme="a">
</ul>
</div>