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");
}
});
});
});
Related
I ran two ajax one for post and one for get
This one is for posting form values by serialize.
$(function(){
function showValues() {
jQuery.ajax({
type: "POST",
data: $( "form" ).serialize(),
success: function(data){
var x = <?php echo json_encode($_SESSION['q10']); ?>;
console.log(x);
}
});
}
$( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
$( "select" ).on( "change", showValues );
showValues();
});
and I store the values in variable
if(isset($_POST['q10']))
{
if($_POST['q10'] == 2){
$_SESSION['q10']=1;
}else{
$_SESSION['q10']=0;
}
}
then i use another ajax for catching the updated values but it gives me the old values
$(document).ready(function(){
$("#result").click(function(){
$.ajax({
type: 'GET',
success: function(res) {
var session = <?php echo(json_encode($page_session)); ?>;
if(session == 1){
document.getElementById("s1").style.display="block";
document.getElementById("s1").textContent = <?php echo(json_encode($_SESSION['q1'])); ?> ;
}
}
});
});
});
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;
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>
I have a page which allows a user to 'nudge' someone to do something
I have the following html (it can appear many times but I'll show two for now)
<div class="nudgeHolder641">
<a id="nudge" data-wl_id="641" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>
<div class="nudgeHolder1172">
<a id="nudge" data-wl_id="1172" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>
I have the following code to action the click:
$(document).ready(function(){
$("#nudge").click(function() {
var nudge_from = $( '#nudge' ).data( 'nudge_from' );
var nudge_for = $( '#nudge' ).data( 'nudge_for' );
var wl_id = $( '#nudge' ).data( 'wl_id' );
var dataString = 'nudge_from='+ nudge_from + '&nudge_for=' + nudge_for + '&wl_id=' + wl_id;
$.ajax({
type: "POST",
url: "/pages/includes/ajax/nudge.php",
data: dataString,
success: function() {
$('.nudgeHolder'+wl_id).html("<h3>Fantastic!</h3>")
.append("<p>Nudge Sent!</p>")
.hide()
.fadeIn(1500, function() {
//$('#message').append("<img id='checkmark' src='/images/icons/check.png' />");
});
}
});
return false;
});
});
Only the first instance of the link fires when clicked though, when I click the second 'nudge' link nothing happens, the first one works as it should. If there is only one link shown on a page then it works fine.
Any ideas?
You're binding to an ID, and an ID can only exist once in the DOM. Try changing it to the class:
<div class="nudgeHolder641">
<a class="nudge" data-wl_id="641" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>
<div class="nudgeHolder1172">
<a class="nudge" data-wl_id="1172" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>
And then bind using:
$(function(){
$(".nudge").click(function() {
var nudge_from = $( this ).data( 'nudge_from' );
var nudge_for = $( this ).data( 'nudge_for' );
var wl_id = $( this ).data( 'wl_id' );
var dataString = 'nudge_from='+ nudge_from + '&nudge_for=' + nudge_for + '&wl_id=' + wl_id;
$.ajax({
type: "POST",
url: "/pages/includes/ajax/nudge.php",
data: dataString,
success: function() {
$('.nudgeHolder'+wl_id).html("<h3>Fantastic!</h3>")
.append("<p>Nudge Sent!</p>")
.hide()
.fadeIn(1500, function() {
//$('#message').append("<img id='checkmark' src='/images/icons/check.png' />");
});
}
});
return false;
});
});
Rather than having unique div classes, use them as ID on a tag. Like this:
<div class="nudge">
<a id="nudgeHolder641" data-wl_id="641" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>
<div class="nudge">
<a id="nudgeHolder1172" data-wl_id="1172" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>
And then, in jQuery; you need:
$(document).ready(function(){
$(".nudge a").click(function() {
Edit
Didn't notice that you were using $('#nudge') everywhere. As ryadavilli pointed out; replace $('#nudge') to $(this).