I'm very new to web development so forgive me for any obvious questions. I'm having trouble getting this function to work. I've been racking my brain for a while now.
I placed the php code in the url window and it displays the appropriate output so I know the php code is ok. I just can't get this function to display the query results into the "wine_categories" . Thanks in advance for all your help. Here's the code:
<script type="text/javascript">
var jQT = new $.jQTouch();
function showtype(type)
{
$('wine_categories').children().remove();
$.ajax({
type:"POST",
url:"get_winebot_type.php",
success:function(html){
$('#wine_categories').append(html);
jQT.goTo('#wine_list', 'slide');
}
});
return false;
}
</script>
Here's the <div>:
<div id="wine_list">
<div class="toolbar">
<h1>Categories</h1>
<a class="button back" href="#">Back</a>
</div>
<div id="wine_categories">
</div>
The most obvious mistake I can see is this line:
$('wine_categories').children().remove();
You missed a hash in front of the ID:
$('#wine_categories').children().remove();
Related
Searched and browsed the forum and tried many examples of ajax and form submission but can't get anything close to work for what I am trying to achieve. I must admit I've been going in circles for days with this and need someone with a fresh pair of eyes.
I have 2 pages:
page1.php
page2.php
Using Google jquery/1.9.0/jquery.js and developing this locally.
page1.php is as follows (I've omitted the head script and body/html tags for clarity)
$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
type: "POST",
url: "page2.php",
data: 'html',
success: function(html){
if(html == 'success'){
$('#address').fadeOut('slow');
$('#done').fadeIn('slow');
}else if(html == 'fail'){
alert('fail');
}
}
});
return false;
});
});
<div id="address">
<form action="page2.php" method="post" name="theForm">
<input name="checkname" type="text" id="checkname">
<input name="Proceed" type="submit" id="submit" value="Next Page" />
</form>
</div>
<div id="done">
That Worked!
</div>
Page2.php
Has a mysql query that checks the database for the checkname and echoes 'success' or ' fail' depending upon the result. The query runs fine and is not showing any error.
When the form is submitted page2.php loads and just shows 'success' in the browser.
Firebug also shows success under both response and html. There are no errors within firebug.
I basically want page1.php to stay and for the #address div to hide and the #done div to show when success is passed from page2.php
Hope someone can help.
Update
I tried this test page:
ajaxone.php
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
type: "POST",
url: "ajaxtwo.php",
data: 'html',
success: function(html){
if(html == 'success'){
$('#address').fadeOut('slow');
$('#payment').fadeIn('slow');
alert('ok');
}else if(html == 'fail'){
alert('fail');
}
}
});
return false;
});
});
</script>
<style type="text/css">
#payment{
visibility:hidden;
}
</style>
<div id="address">
<form action="ajaxtwo.php" method="post" name="theForm" id="theForm">
<p>
<input name="name" type="text" id="name">
</p>
<p>
<input type="submit" name="submit" value="submit">
</p>
</form></div>
<div id="payment">Name is correct</div>
ajaxtwo.php
print_r($_POST);
if($_POST['name'] == 'rob'){
echo 'success';
}else{
echo 'fail';
}
Using the above firebug shows the following error:
Array ( )
Undefined index: name
fail
However, when I remove the ajax call the submit works and the data is passed.
So, am I right to assume that if you do not specify the form variables within the ajax call nothing is posted to the next page?
Update 2
Sorry I'm answering myself here.
It does appear that you need to specify the form data to send within the ajax call.
I've just added:
$('#theForm').serialize();
within the ajax call and now the form submits without an error.
However, this still goes to ajaxtwo.php and does not show the success or fail on the ajaxone.php page.
So my next stage is to get the success or fail to show on ajaxone.php
You need to add id="theForm" in the form tag itself.
Example:
<form action="page2.php" method="post" id="theForm" name="theForm">
I would say, add a and then make jq read the output and then redirect accordingly, or use php to redict based on $success_fail result.
I'm trying to create a Dojo dialog in Zend Framework but I've run into some problems. My view code looks something like this:
<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
data-dojo-config="async: true" dojoConfig = "parseOnLoad: true">
</script>
<script>
require(["dijit/registry", "dojo/ready", "dojo/dom", "dijit/Dialog", "dijit/form/Form"],
function(registry, ready, dom, Dialog){
ready(function() {
createDialog = function(titleText, contentText) {
var node = dojo.byId("foobar");
var myDialog = new Dialog({ title:"From Source Node" }, node);
myDialog.show();
};
});
});
</script>
<body class="claro">
<div data-dojo-type="dijit/Dialog" id="foobar" title="Foo!" style="display: none">
<p>I am some content</p>
</div>
</body>
The button code that loads the dialog looks as follows:
<button name="btnDialog" id="dialogbtn" type="button" onclick='createDialog();'>Open</button>
The first time the button is clicked the dialog opens as expected, but once the dialog is closed and the button is clicked again, the dialog doesn't open and I get the following error in the console.
Tried to register widget with id==foobar but that id is already registered.
What am I doing wrong?
Thanks
Figured it out. I think the form wasn't parsing correctly because the dojo-config was incorrect. Changed the javascript code as follows:
<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
data-dojo-config="async: true, parseOnLoad:true">
</script>
<script>
require(["dijit/registry", "dijit/Dialog"], function (registry)
{
createDialog = function createDialog()
{
registry.byId("foobar").show();
}
});
</script>
and the div as follows:
<body class="claro">
<div class="dijitHidden">
<div data-dojo-type="dijit.Dialog" data-dojo-props="title:'Foo!'" id="foobar">
<p>I am some content</p>
</div>
</div>
</body>
and now the dialog dijit is saved to the registry and it's working as expected
I'm using fancybox, which I've used hundreds of times before and I'm getting a "The requested content cannot be loaded. Please try again later." error in the modal box. I'm expecting to see "Fancybox!! Yay!" Instead.
Code below. Any ideas?
<script type='text/javascript'>
function init(){
$("#upload-new").fancybox({type:'inline'});
}
</script>
<p><a id="upload-new" href="#image-uploader">Upload new screenshot</a></p>
<div class="hidden">
<div class="image-uploader">
Fancybox!! Yay!
</div>
</div>
this
href="#image-uploader"
means that you are targeting an element with id="image-uploader" but you have :
<div class="image-uploader">
.... I guess it should be :
<div id="image-uploader">
I'm developing a phonegap app and trying to use iScroll 4 for scrolling on my pages. It works fine on web, but when I test on device/simulator the scroll doesn't work smoothly. When I touch the device screen it already click on my li element, and if I scroll down it doesn't look like an scroller.
Here's the script that I've take form iScroll website:
function onDeviceReady(){
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
}
and here's how my list style looks like:
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li>
<div class="item">
<div class="arrow"></div>
<div class="score">98 <span>score</span></div>
<div class="job-title">Expert UI/UX Designer</div>
<div class="detail">
at <span>Hewlett Packpard</span> - 30 connections
</div>
<div>
</div>
</div>
</li>
</ul>
</div>
</div>
I think everything is right, take a look at the live page:
http://rodrigoparra.com/bright/pages/dashboard.html
and here a sample of iScroll on the same app:
http://rodrigoparra.com/bright/simple/index.html
If you test on your device, you will see the first one doesn't work and second one works fine.
Not sure what is wrong :\
Any ideas of how I could fix it?
Thanks Guys
Hi as per my knowledge you need to set your scroll view content size.
I have tried just about every suggestion known to man to get the basic FBJS working in my FBML app.
Here is my code
<script>
<!--
function areyousure(description,id,opt) {
debugger;
var dialog = new Dialog(Dialog.DIALOG_POP).showChoice('Are you sure?','Are you sure you want to delete "' + description + '"? This action cannot be undone!','Yes','No');
dialog.onconfirm = function() {
document.setLocation("http://apps.facebook.com/myapp/delete.php?rec
ord=" + id + opt);
}
}
//-->
</script>
<a href="#" onclick="areyousure(arg1,arg2,arg3);" >click me</a>
When I click the link, I get a a1234543_areyousure not found.
Help Please.
Thanks
I think you are messing a ";" in a href :
<a href="#" onclick="areyousure(arg1,arg2,arg3);" >click me</a>
The parameters didn't exist. This works:
<script>
<!--
function areyousure() {
var dialog = new Dialog(Dialog.DIALOG_POP)
dialog.showMessage('test','foo');
}
//-->
</script>
<a href="#" onclick="areyousure();" >click me</a>