'pageNumber' value in data parameter is not passed through $.ajax() call made

'pageNumber' value in data parameter is not passed through $.ajax() call made - javascript

I have been trying to do pagination using jquery to display item details through an eBay API using PHP as the back end. The other parameters are passed easily to the PHP file except for the page number parameter in the data section of the $.ajax() call and hence even though the call is successful, only the first page is shown for every page clicked. Can anybody point out what is going wrong?
Here is a part of the code:
function paginatingRetrieval(pageno)
{
alert("calling the page number "+pageno);
alert("the page is "+pages);
$.ajax(
{
type: "GET",
url: "ResponseProg.php",
datatype: "json",
data:
{
keywords:$("#kw").val(),
Results:$("#rslts option:selected").val(),
SortOrder:$("#srt option:selected").val(),
MinPrice:$("#mn").val(),
MaxPrice:$("#mx").val(),
New:$("#Nw").is(':checked') ? $("#Nw").val() : "notset",
Used:$("#Usd").is(':checked') ? $("#Usd").val() : "notset",
Very_Good:$("#Vg").is(':checked') ? $("#Vg").val() : "notset",
Good:$("#Gd").is(':checked') ? $("#Gd").val() : "notset",
Acceptable:$("#Ac").is(':checked') ? $("#Ac").val() : "notset",
ListingType_1:$("#bin").is(':checked') ? $("#bin").val() : "notset",
ListingType_2:$("#actn").is(':checked') ? $("#actn").val() : "notset",
ListingType_3:$("#Ca").is(':checked') ? $("#Ca").val() : "notset",
ReturnsAcceptedOnly:$("#Ra").is(':checked') ? $("#Ra").val() : "notset",
FreeShippingOnly:$("#Fs").is(':checked') ? $("#Fs").val() : "notset",
ExpeditedShippingAvailable:$("#Esa").is(':checked') ? $("#Esa").val() : "notset",
MaxHandlingTime:$("#Mhtd").val(),
pageNumber:pageno
},
success: function(data)
{
JSONObj = jQuery.parseJSON(data);
$("#rtrn").html("data successfully retrieved for page number "+pageno+"\n "+data);
//contentProvider("#rtrn");
},
error: function()
{
$("#rtrn").html("Data not retrieved successfully");
}
});
}
Here is part of the HTML code that is involved in the calling of the function:
var page='<ul class="pagination" id="pager">'+
'<li id="prev">'+
'<a href="#" id="prev" aria-label="Previous">'+
'<span aria-hidden="true">«</span>'+
'</a>'+
'</li>';
for(i=1;i<=5;i++)
{
var index=ind+i;
page+='<li id="'+index+'">'+index+'</li>';
}
page+='<li>'+
'<a href="#" id="next" aria-label="next">'+
'<span aria-hidden="true">»</span>'+
'</a>'+
'</li>'+
'</ul>';
return page;
I am trying to display only 5 pages as of now and not working on the previous and next buttons. Every time I click a button on the pagination, the same result is displayed.
This is the JSON retrieved on giving the keyword:'IKEA' min price:0 max price:100 and max handling time:7 and every time a pagination button is clicked say 2, 3 etc it always shows the first page.
{
"ack": "Success",
"resultCount": 23624,
"pageNumber": 1,
"itemCount": 5,
"item0": {
"basicInfo": {
"title": "IKEA HOLMO Floor lamp light white Rice paper shade Modern Contemporary New",
"viewitemURL": "http://www.ebay.com/itm/IKEA-HOLMO-Floor-lamp-light-white-Rice-paper-shade-Modern-Contemporary-New-/371340016191?pt=LH_DefaultDomain_0",
"galleryURL": "http://thumbs4.ebaystatic.com/m/mmkMl3fVtDHRy80P_StIYgg/140.jpg",
"pictureURLSuperSize": "http://i.ebayimg.com/00/s/NTAwWDUwMA==/z/-44AAOxygPtS57Qk/$_12.JPG",
"convertedCurrentPrice": 6.99,
"shippingServiceCost": 10.99,
"conditionDisplayName": "New",
"listingType": "StoreInventory",
"location": "Baltimore,MD,USA",
"categoryName": "Lamps",
"topRatedListing": "true"
},
"sellerInfo": {
"sellerUserName": "jx035md",
"feedbackScore": 10357,
"positiveFeedbackPercent": 100,
"feedbackRatingStar": "YellowShooting",
"topRatedSeller": "true",
"sellerStoreName": "",
"sellerStoreURL": ""
},
"shippingInfo": {
"shippingType": "FlatDomesticCalculatedInternational",
"shipToLocations": [
"US",
"CA",
"GB",
"AU",
"AT",
"BE",
"FR",
"DE",
"IT",
"JP",
"ES",
"TW",
"NL",
"CN",
"HK",
"MX",
"DK",
"RO",
"SK",
"BG",
"CZ",
"FI",
"HU",
"LV",
"LT",
"MT",
"EE",
"GR",
"PT",
"CY",
"SI",
"SE",
"KR",
"ID",
"ZA",
"TH",
"IE",
"PL",
"RU",
"IL"
],
"expeditedShipping": "false",
"oneDayShippingAvailable": "false",
"returnsAccepted": "true",
"handlingTime": 1
}
},
"item1": {
"basicInfo": {
"title": "New IKEA Ektorp loveseat Idemo beige slipcover cover 2-seat sofa ",
"viewitemURL": "http://www.ebay.com/itm/New-IKEA-Ektorp-loveseat-Idemo-beige-slipcover-cover-2-seat-sofa-/331569715403?pt=LH_DefaultDomain_0",
"galleryURL": "http://thumbs4.ebaystatic.com/m/m31xhZMrlY5bQeEWqRt87wQ/140.jpg",
"pictureURLSuperSize": "http://i.ebayimg.com/00/s/NTAwWDUwMA==/z/9sgAAOSwKrhVaf2Z/$_12.JPG",
"convertedCurrentPrice": 75,
"shippingServiceCost": 0,
"conditionDisplayName": "New other (see details)",
"listingType": "AuctionWithBIN",
"location": "Houghton,MI,USA",
"categoryName": "Slipcovers",
"topRatedListing": "false"
},
"sellerInfo": {
"sellerUserName": "jmack55",
"feedbackScore": 149,
"positiveFeedbackPercent": 100,
"feedbackRatingStar": "Turquoise",
"topRatedSeller": "false",
"sellerStoreName": "",
"sellerStoreURL": ""
},
"shippingInfo": {
"shippingType": "Free",
"shipToLocations": [
"US",
"CA",
"GB",
"AU",
"AT",
"BE",
"FR",
"DE",
"IT",
"JP",
"ES",
"TW",
"NL",
"CN",
"HK",
"MX",
"DK",
"RO",
"SK",
"BG",
"CZ",
"FI",
"HU",
"LV",
"LT",
"MT",
"EE",
"GR",
"PT",
"CY",
"SI",
"SE",
"KR",
"ID",
"TH",
"IE",
"PL",
"RU",
"IL",
"NZ"
],
"expeditedShipping": "true",
"oneDayShippingAvailable": "false",
"returnsAccepted": "false",
"handlingTime": 3
}
},
"item2": {
"basicInfo": {
"title": "Floor Lamp Light Ikea Holmo with Rice Paper Shade Modern Contemporary NEW ",
"viewitemURL": "http://www.ebay.com/itm/Floor-Lamp-Light-Ikea-Holmo-Rice-Paper-Shade-Modern-Contemporary-NEW-/371342969642?pt=LH_DefaultDomain_0",
"galleryURL": "http://thumbs3.ebaystatic.com/m/mcqESoYv3si3-U-n24F3LLQ/140.jpg",
"pictureURLSuperSize": "http://i.ebayimg.com/00/s/NTAwWDUwMA==/z/lNsAAOxy4dBRnOxf/$T2eC16F,!ygE9s7HHgu8BRnO)fjdsg~~60_3.JPG",
"convertedCurrentPrice": 19.99,
"shippingServiceCost": 0,
"conditionDisplayName": "New",
"listingType": "StoreInventory",
"location": "USA",
"categoryName": "Lamps",
"topRatedListing": "true"
},
"sellerInfo": {
"sellerUserName": "homeanddecor",
"feedbackScore": 22218,
"positiveFeedbackPercent": 99.4,
"feedbackRatingStar": "YellowShooting",
"topRatedSeller": "true",
"sellerStoreName": "",
"sellerStoreURL": ""
},
"shippingInfo": {
"shippingType": "Free",
"shipToLocations": "US",
"expeditedShipping": "true",
"oneDayShippingAvailable": "false",
"returnsAccepted": "true",
"handlingTime": 1
}
},
"item3": {
"basicInfo": {
"title": "FILLSTA Table White Lamp ",
"viewitemURL": "http://www.ebay.com/itm/FILLSTA-Table-White-Lamp-/331571817429?pt=LH_DefaultDomain_0",
"galleryURL": "http://thumbs2.ebaystatic.com/m/mQm7GQdmQ4cM4pCKUWo0h1g/140.jpg",
"pictureURLSuperSize": "http://i.ebayimg.com/00/s/NTAwWDUwMA==/z/5DEAAOSwl8NVbMuF/$_12.JPG",
"convertedCurrentPrice": 7.99,
"shippingServiceCost": 0,
"conditionDisplayName": "Used",
"listingType": "Auction",
"location": "Jacksonville,FL,USA",
"categoryName": "Lamps",
"topRatedListing": "false"
},
"sellerInfo": {
"sellerUserName": "clee9064",
"feedbackScore": 84,
"positiveFeedbackPercent": 100,
"feedbackRatingStar": "Blue",
"topRatedSeller": "false",
"sellerStoreName": "",
"sellerStoreURL": ""
},
"shippingInfo": {
"shippingType": "Calculated",
"shipToLocations": [
"US",
"CA",
"GB",
"AU",
"AT",
"BE",
"FR",
"DE",
"IT",
"JP",
"ES",
"TW",
"NL",
"CN",
"HK",
"MX",
"DK",
"RO",
"SK",
"BG",
"CZ",
"FI",
"HU",
"LV",
"LT",
"MT",
"EE",
"GR",
"PT",
"CY",
"SI",
"SE",
"KR",
"ID",
"TH",
"IE",
"PL",
"RU",
"IL",
"NZ"
],
"expeditedShipping": "true",
"oneDayShippingAvailable": "false",
"returnsAccepted": "true",
"handlingTime": 2
}
},
"item4": {
"basicInfo": {
"title": "IKEA HOLMO Floor lamp light white Rice paper shade Modern Contemporary brand new",
"viewitemURL": "http://www.ebay.com/itm/IKEA-HOLMO-Floor-lamp-light-white-Rice-paper-shade-Modern-Contemporary-brand-new-/171742977475?pt=LH_DefaultDomain_0",
"galleryURL": "http://thumbs4.ebaystatic.com/m/myaABTkDgQyLgI55COQjcIA/140.jpg",
"pictureURLSuperSize": "http://i.ebayimg.com/00/s/OTYwWDU0MA==/z/KzIAAOSwBahVHbbq/$_3.JPG",
"convertedCurrentPrice": 8.95,
"shippingServiceCost": 0,
"conditionDisplayName": "New",
"listingType": "StoreInventory",
"location": "Longwood,FL,USA",
"categoryName": "Lamps",
"topRatedListing": "true"
},
"sellerInfo": {
"sellerUserName": "xclusive-deals-com",
"feedbackScore": 740,
"positiveFeedbackPercent": 100,
"feedbackRatingStar": "Purple",
"topRatedSeller": "true",
"sellerStoreName": "",
"sellerStoreURL": ""
},
"shippingInfo": {
"shippingType": "Calculated",
"shipToLocations": "Worldwide",
"expeditedShipping": "true",
"oneDayShippingAvailable": "false",
"returnsAccepted": "true",
"handlingTime": 1
}
}
}
here is the php code:
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
$call="";
$response;
$c=0;
$l=0;
$pms=0;
$url="http://svcs.eBay.com/services/search/FindingService/v1?siteid=0&SECURITY-APPNAME=Universi-9b52-4bc2-b847-385688b5de53&OPERATION-NAME=findItemsAdvanced&SERVICE-VERSION=1.0.0&RESPONSE-DATA-FORMAT=XML";
if($_SERVER["REQUEST_METHOD"] == "GET")
{
$call.=$url;
if(isset($_GET["keywords"]) and $_GET["keywords"]!='' and $_GET["keywords"] != 'notset')
{
$enc = urlencode(utf8_encode($_GET["keywords"]));
$call.="&keywords=".$enc;
}
if(isset($_GET["Results"]) and $_GET["Results"]!='' and $_GET["Results"] != 'notset')
{
$call.="&paginationInput.entriesPerPage=".$_GET["Results"];
}
if(isset($_GET["SortOrder"]) and $_GET["SortOrder"]!='' and $_GET["SortOrder"] != 'notset')
{
$call.="&sortOrder=".$_GET["SortOrder"];
}
if(isset($_GET["MinPrice"]) and $_GET["MinPrice"]!='' and $_GET["MinPrice"] != 'notset')
{ $call.="&itemFilter(".$pms.").name=MinPrice&itemFilter(".$pms.").value=".$_GET["MinPrice"];
$pms++;
}
if(isset($_GET["MaxPrice"]) and $_GET["MaxPrice"]!='' and $_GET["MaxPrice"] != 'notset')
{
$call.="&itemFilter(".$pms.").name=MaxPrice&itemFilter(".$pms.").value=".$_GET["MaxPrice"];
$pms++;
}
$numhand = $_GET["MaxHandlingTime"];
if($numhand != "")
{
if(in_array($numhand,$_GET))
{
if(isset($_GET["MaxHandlingTime"]) and $_GET["MaxHandlingTime"]!='' and $_GET["MaxHandlingTime"] != 'notset')
{
$call.="&itemFilter(".$pms.").name=MaxHandlingTime&itemFilter(".$pms.").value=".$_GET["MaxHandlingTime"];
$pms++;
}
}
}
if(in_array("1000",$_GET) || in_array("3000",$_GET) || in_array("4000",$_GET) || in_array("5000",$_GET) || in_array("6000",$_GET))
{
$condition="&itemFilter(".$pms.").name=Condition";
$call.=$condition;
if(isset($_GET["New"]) and $_GET["New"]!='' and $_GET["New"] != 'notset')
{
$call.="&itemFilter(".$pms.").value(".$c.")=".$_GET["New"];
$c++;
}
if(isset($_GET["Used"]) and $_GET["Used"]!='' and $_GET["Used"] != 'notset')
{
$call.="&itemFilter(".$pms.").value(".$c.")=".$_GET["Used"];
$c++;
}
if(isset($_GET["Very_Good"]) and $_GET["Very_Good"]!='' and $_GET["Very_Good"] != 'notset')
{
$call.="&itemFilter(".$pms.").value(".$c.")=".$_GET["Very_Good"];
$c++;
}
if(isset($_GET["Good"]) and $_GET["Good"]!='' and $_GET["Good"] != 'notset')
{
$call.="&itemFilter(".$pms.").value(".$c.")=".$_GET["Good"];
$c++;
}
if(isset($_GET["Acceptable"]) and $_GET["Acceptable"]!='' and $_GET["Acceptable"] != 'notset')
{
$call.="&itemFilter(".$pms.").value(".$c.")=".$_GET["Acceptable"];
}
$pms++;
}
if( in_array("FixedPrice",$_GET) || in_array("Auction",$_GET) || in_array("Classified",$_GET))
{
$listing="&itemFilter(".$pms.").name=ListingType";
$call.=$listing;
if(isset($_GET["ListingType_1"]) and $_GET["ListingType_1"]!='' and $_GET["ListingType_1"] != 'notset')
{
$call.="&itemFilter(".$pms.").value(".$l.")=".$_GET["ListingType_1"];
$l++;
}
if(isset($_GET["ListingType_2"]) and $_GET["ListingType_2"]!='' and $_GET["ListingType_2"] != 'notset')
{
$call.="&itemFilter(".$pms.").value(".$l.")=".$_GET["ListingType_2"];
$l++;
}
if(isset($_GET["ListingType_3"]) and $_GET["ListingType_3"]!='' and $_GET["ListingType_3"] != 'notset')
{
$call.="&itemFilter(".$pms.").value(".$l.")=".$_GET["ListingType_3"];
}
$pms++;
}
if(in_array("ReturnsAcceptedOnly",$_GET))
{
if(isset($_GET["ReturnsAcceptedOnly"]) and $_GET["ReturnsAcceptedOnly"]!='' and $_GET["ReturnsAcceptedOnly"] != 'notset')
{
$call.="&itemFilter(".$pms.").name=ReturnsAcceptedOnly&itemFilter(".$pms.").value=true";
$pms++;
}
}
if(in_array("FreeShippingOnly",$_GET))
{
if(isset($_GET["FreeShippingOnly"]) and $_GET["FreeShippingOnly"]!='' and $_GET["FreeShippingOnly"] != 'notset')
{
$call.="&itemFilter(".$pms.").name=FreeShippingOnly&itemFilter(".$pms.").value=true";
$pms++;
}
}
if(in_array("Expedited",$_GET))
{
if(isset($_GET["ExpeditedShippingAvailable"]) and $_GET["ExpeditedShippingAvailable"]!='' and $_GET["ExpeditedShippingAvailable"] != 'notset')
{
$call.="&itemFilter(".$pms.").name=ExpeditedShippingType&itemFilter(".$pms.").value=Expedited";
$pms++;
}
}
$call.="&outputSelector[".$pms."]=SellerInfo";
$pms++;
$call.="&outputSelector[".$pms."]=PictureURLSuperSize";
$pms++;
$call.="&outputSelector[".$pms."]=StoreInfo";
if(isset($_GET["pageNumber"]))
{
$pgno = $_GET["pageNumber"];
$call.="&paginationInput.pageNumber="+$pgno;
}
$response = simplexml_load_file($call);
//$responseContent = file_get_contents($call);
//echo $call;
$entries=$response->paginationOutput->totalEntries;
$counter=$response->paginationOutput->entriesPerPage;
$result;
$items;
if($entries == 0)
{
$result["ack"] = "No results found";
}
else
{
$result["ack"] = (string)$response->ack;
$result["resultCount"] = (int)$response->paginationOutput->totalEntries;
$result["pageNumber"] = (int)$response->paginationOutput->pageNumber;
$result["itemCount"] = (int)$response->paginationOutput->entriesPerPage;
$cnt;
if($entries-$counter < 0)
{
$cnt = $entries;
}
if($entries-$counter > 0)
{
$cnt = $counter;
}
for($x=0;$x<$cnt;$x++)
{
$basicInfo;
$basicInfo["title"] = (string)$response->searchResult->item[$x]->title;
$basicInfo["viewitemURL"] = (string)$response->searchResult->item[$x]->viewItemURL;
$basicInfo["galleryURL"] = (string)$response->searchResult->item[$x]->galleryURL;
$basicInfo["pictureURLSuperSize"] = (string)$response->searchResult->item[$x]->pictureURLSuperSize;
$basicInfo["convertedCurrentPrice"] = (float)$response->searchResult->item[$x]->sellingStatus->convertedCurrentPrice;
$basicInfo["shippingServiceCost"] = (float)$response->searchResult->item[$x]->shippingInfo->shippingServiceCost;
$basicInfo["conditionDisplayName"] = (string)$response->searchResult->item[$x]->condition->conditionDisplayName;
$basicInfo["listingType"] = (string)$response->searchResult->item[$x]->listingInfo->listingType;
$basicInfo["location"] = (string)$response->searchResult->item[$x]->location;
$basicInfo["categoryName"] = (string)$response->searchResult->item[$x]->primaryCategory->categoryName;
$basicInfo["topRatedListing"] = (string)$response->searchResult->item[$x]->topRatedListing;
$sellerInfo;
$sellerInfo["sellerUserName"] = (string)$response->searchResult->item[$x]->sellerInfo->sellerUserName;
$sellerInfo["feedbackScore"] = (float)$response->searchResult->item[$x]->sellerInfo->feedbackScore;
$sellerInfo["positiveFeedbackPercent"] = (float)$response->searchResult->item[$x]->sellerInfo->positiveFeedbackPercent;
$sellerInfo["feedbackRatingStar"] = (string)$response->searchResult->item[$x]->sellerInfo->feedbackRatingStar;
$sellerInfo["topRatedSeller"] = (string)$response->searchResult->item[$x]->sellerInfo->topRatedSeller;
$sellerInfo["sellerStoreName"] = (string)$response->searchResult->item[$x]->storeInfo->storeName;
$sellerInfo["sellerStoreURL"] = (string)$response->searchResult->item[$x]->storeInfo->storeURL;
$shippingInfo;
$shippingInfo["shippingType"] = (string)$response->searchResult->item[$x]->shippingInfo->shippingType;
if(count((array)$response->searchResult->item[$x]->shippingInfo->shipToLocations) > 1)
{
$shippingInfo["shipToLocations"] = (array)$response->searchResult->item[$x]->shippingInfo->shipToLocations;
}
else if(count((array)$response->searchResult->item[$x]->shippingInfo->shipToLocations) == 1)
{
$shippingInfo["shipToLocations"] = (string)$response->searchResult->item[$x]->shippingInfo->shipToLocations;
}
$shippingInfo["expeditedShipping"] = (string)$response->searchResult->item[$x]->shippingInfo->expeditedShipping;
$shippingInfo["oneDayShippingAvailable"] = (string)$response->searchResult->item[$x]->shippingInfo->oneDayShippingAvailable;
$shippingInfo["returnsAccepted"] = (string)$response->searchResult->item[$x]->returnsAccepted;
$shippingInfo["handlingTime"] = (int)$response->searchResult->item[$x]->shippingInfo->handlingTime;
$itemdetails["basicInfo"]=$basicInfo;
$itemdetails["sellerInfo"]=$sellerInfo;
$itemdetails["shippingInfo"]=$shippingInfo;
$result["item".$x]=$itemdetails;
}
}
$rsltjson = json_encode($result,JSON_UNESCAPED_SLASHES);
echo $rsltjson;
}
}
?>
this is the code for the form:
<div><form id="ecomm" name="ebfrm" action="" method="GET">
<fieldset>
<div class="row">
<div class="col-sm-2" align="right"><label>Key Words<span style="color:red;">*</span>:</label></div>
<div class="col-sm-10"><input type="text" class="form-control" name="keywords" id="kw" placeholder="Enter keyword"></div>
</div>
<br>
<div class="row">
<div class="col-sm-2" align="right"><label>Price Range:</label></div>
<div class="col-sm-5"><input type="text" class="form-control" id="mn" placeholder="from ($)" name="MinPrice" ></div>
<div class="col-sm-5"><input type="text" class="form-control" id="mx" placeholder="to ($)" name="MaxPrice" ></div>
</div>
<br>
<div class="row">
<div class="col-sm-2" align="right"><label>Condition:</label></div>
<div class="col-sm-10">
<label class="checkbox-inline"><input type="checkbox" id="Nw" name="New" value="1000" >New</label>
<label class="checkbox-inline"><input type="checkbox" id="Usd" name="Used" value="3000" >Used</label>
<label class="checkbox-inline"><input type="checkbox" id="Vg" name="Very_Good" value="4000" >Very Good</label>
<label class="checkbox-inline"><input type="checkbox" id="Gd" name="Good" value="5000" >Good</label>
<label class="checkbox-inline"><input type="checkbox" id="Ac" name="Acceptable" value="6000" >Acceptable</label>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-2" align="right"><label>Buying Formats:</label></div>
<div class="col-sm-10">
<label class="checkbox-inline"><input type="checkbox" id="bin" name="ListingType_1" value="FixedPrice" >Buy it Now</label>
<label class="checkbox-inline"><input type="checkbox" id="actn" name="ListingType_2" value="Auction" >Auction</label>
<label class="checkbox-inline"><input type="checkbox" id="Ca" name="ListingType_3" value="Classified" >Classified Ads</label>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-2" align="right"><label>Seller:</label></div>
<div class="col-sm-10">
<label class="checkbox-inline"><input type="checkbox" id="Ra" name="ReturnsAcceptedOnly" value="ReturnsAcceptedOnly" >Return Accepted</label>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-2" align="right"><label>Shipping:</label></div>
<div class="col-sm-10">
<label class="checkbox-inline"><input type="checkbox" id="Fs" name="FreeShippingOnly" value="FreeShippingOnly" >Free Shipping</label>
<label class="checkbox-inline"><input type="checkbox" id="Esa" name="ExpeditedShippingAvailable" value="Expedited" >Expedited shipping available</label>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-10"><input type="text" class="form-control" id="Mhtd" placeholder="Max handling time(days)" name="MaxHandlingTime" ></div>
</div>
<br>
<div class="row">
<div class="col-sm-2" align="right"><label>Sort by:</label></div>
<div class="col-sm-10"><select class="form-control" id="srt" name="SortOrder">
<option value="BestMatch" >Best Match</option>
<option value="CurrentPriceHighest" >Price: highest first</option>
<option value="PricePlusShippingHighest" >Price + Shipping: highest first</option>
<option value="PricePlusShippingLowest" >Price + Shipping: lowest first</option>
</select></div>
</div>
<br>
<div class="row">
<div class="col-sm-2" align="right"><label>Result per page:</label></div>
<div class="col-sm-10"><select class="form-control" id="rslts" name="Results">
<option value="5" >5</option>
<option value="10" >10</option>
</select></div>
</div>
<br>
<div align="right">
<button type="button" id="btn" class="btn btn-default" name="clear" onclick="clean();">clear</button>
<input type="submit" id="sbmt" class="btn btn-primary" name="search" value="search">
</div>
</fieldset><br>
</form></div>
Update: I solved the problem...it was a typo in the php program

Related

ng-option set default value in Angularjs

I'm having trouble binding my default value to a ng-option. I already searched for the answer to my question but can't seem to find one.
My problem is that I have 3 cascading selects with one model.
default values
vm.roomData.branch = 'Lucena';
vm.roomData.building = 'mhq';
vm.roomData.roomFloor = '3rd Floor';
html
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="loc.floors as loc for loc in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
vm.locations data
[
{
"_id": "5a681380b7c41e7df2076819",
"branch": "Lucena",
"__v": 0,
"building": [
{
"name": "MHQ",
"floors": [
"Ground Floor",
"2nd Floor",
"3rd Floor"
]
}
],
"dateCreated": "2018-01-24T05:02:56.465Z"
},
{
"_id": "5a681aecb7c41e7df207681d",
"branch": "Lucban",
"__v": 0,
"building": [
{
"name": "MHQ1",
"floors": [
"ground floor",
"2nd floor"
]
}
],
"dateCreated": "2018-01-24T05:34:36.775Z"
}]

try initializing the default values like this,
$scope.roomData.branch = $scope.locations.find((loc) => loc.branch === 'Lucena');
$scope.roomData.building = $scope.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
$scope.roomData.roomFloor = '3rd Floor' ;
like
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
var vm = this;
vm.roomData = {};
vm.locations = [{
"_id": "5a681380b7c41e7df2076819",
"branch": "Lucena",
"__v": 0,
"building": [{
"name": "MHQ",
"floors": [
"Ground Floor",
"2nd Floor",
"3rd Floor"
]
}],
"dateCreated": "2018-01-24T05:02:56.465Z"
},
{
"_id": "5a681aecb7c41e7df207681d",
"branch": "Lucban",
"__v": 0,
"building": [{
"name": "MHQ1",
"floors": [
"ground floor",
"2nd floor"
]
}],
"dateCreated": "2018-01-24T05:34:36.775Z"
}
];
vm.roomData.branch = vm.locations.find((loc) => loc.branch === 'Lucena'); debugger
vm.roomData.building = vm.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
vm.roomData.roomFloor = '3rd Floor' ;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl as vm">
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="o as o for o in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
</body>

How to get label of an input field when submit a form in Angular JS

What I want to achieve is when I submit the form it should return the label of the option I choose in the console but it is returning me the value of the option.
Expected Result:
DXBA-sky
Result getting:
Dubai
HTML
<div class="suggestField">
<input type='text' list='listid' placeholder="TO" ng-model="toCity" ng- change="suggestCity(toCity)">
<datalist id='listid'>
<option ng-repeat="item in fromSuggestData" label='{{item.PlaceId}}' value='{{item.PlaceName}}'>
</datalist>
<button ng-click="submitForm(toCity)">SUBMIT</button>
</div>
JS
$scope.fromSuggestData = {
"PlaceId": "DXBA-sky",
"PlaceName": "Dubai",
"CountryId": "AE-sky",
"RegionId": "",
"CityId": "DXBA-sky",
"CountryName": "United Arab Emirates"
}, {
"PlaceId": "DUJ-sky",
"PlaceName": "Dubois",
"CountryId": "US-sky",
"RegionId": "PA",
"CityId": "DUJA-sky",
"CountryName": "United States"
}
$scope.submitForm = function(toCity) {
console.log(toCity);
}

Here Is demo using ng-option.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.fromSuggestData = [{
"PlaceId": "DXBA-sky",
"PlaceName": "Dubai",
"CountryId": "AE-sky",
"RegionId": "",
"CityId": "DXBA-sky",
"CountryName": "United Arab Emirates"
}, {
"PlaceId": "DUJ-sky",
"PlaceName": "Dubois",
"CountryId": "US-sky",
"RegionId": "PA",
"CityId": "DUJA-sky",
"CountryName": "United States"
}];
$scope.submitForm = function(toCity) {
console.log(toCity);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" class="suggestField">
<select id="cityname" ng-model="toCity" ng-options="item as item.PlaceName for item in fromSuggestData">
<option value="">Select</option>
</select>
<button ng-click="submitForm(toCity.PlaceId)">SUBMIT</button>
</div>

Select options disapear when i select item (Angular)

I have a strange case. When i select item as select option items in select disappear. This is happening in both selectors.
This is my controller
controllers.addLocationCtrl = function($scope, countriesFactory, provincesFactory){
countriesFactory.getCountries().then(function(data){
$scope.countries = data;
console.log($scope.countries);
});
provincesFactory.getProvinces().then(function(data){
$scope.provinces = data;
console.log($scope.provinces);
});
}
This are objects for countries
[{"id_country":"1","country":"Austria"},
{"id_country":"2","country":"Belgium"},{"id_country":"3","country":"Bulgaria"},{"id_country":"4","country":"Croatia"},{"id_country":"5","country":"Cyprus"},{"id_country":"6","country":"Czech Republic"},
{"id_country":"7","country":"Denmark"},{"id_country":"8","country":"Estonia"},{"id_country":"9","country":"Finland"},{"id_country":"10","country":"France"},{"id_country":"11","country":"Germany"},{"id_country":"12","country":"Greece"}]
And this is my HTML
<div class="form-group">
<label>Country</label>
<select class="form-control" data-ng-model="countries"
data-ng-options="c.id_country as c.country for c in countries"></select>
</div>
<div class="form-group">
<label>Province</label>
<select class="form-control" data-ng-model="provinces"
data-ng-options="p.id_province as p.province for p in provinces">
</select>
</div>
When i select one item in select then this happens
<div class="form-group">
<label>Country</label>
<select class="form-control ng-valid ng-empty ng-dirty ng-valid-parse ng-touched"
data-ng-model="countries" data-ng-options="c.id_country as c.country for c in countries"><option selected="selected"></option></select>
</div>
Console log shows no errors at all. Am i using data-ng-model wrong way? What might be the couse for this problem. If you need any additional information's please let me know. Thank you

When you select an item, AngularJS replaces the content of countries with the id_country that you have selected. So no countries to show in the select tag.
See your issue in this demo:
(function() {
var app = angular.module("app", []);
app.controller("addLocationCtrl", ["$scope",
function($scope) {
$scope.countries = [{
"id_country": "1",
"country": "Austria"
}, {
"id_country": "2",
"country": "Belgium"
}, {
"id_country": "3",
"country": "Bulgaria"
}, {
"id_country": "4",
"country": "Croatia"
}, {
"id_country": "5",
"country": "Cyprus"
}, {
"id_country": "6",
"country": "Czech Republic"
}, {
"id_country": "7",
"country": "Denmark"
}, {
"id_country": "8",
"country": "Estonia"
}, {
"id_country": "9",
"country": "Finland"
}, {
"id_country": "10",
"country": "France"
}, {
"id_country": "11",
"country": "Germany"
}, {
"id_country": "12",
"country": "Greece"
}];
}
]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="addLocationCtrl">
<div class="form-group">
<label>Country</label>
<select class="form-control" data-ng-model="countries" data-ng-options="c.id_country as c.country for c in countries"></select>{{countries}}
</div>
<div class="form-group">
<label>Province</label>
<select class="form-control" data-ng-model="provinces" data-ng-options="p.id_province as p.province for p in provinces">
</select>
</div>
</div>
</div>
Solution: Replace data-ng-model="countries" by other name.
data-ng-model="currentCountryId" and data-ng-model="currentProvinceId".
(function() {
var app = angular.module("app", []);
app.controller("addLocationCtrl", ["$scope",
function($scope) {
$scope.countries = [{
"id_country": "1",
"country": "Austria"
}, {
"id_country": "2",
"country": "Belgium"
}, {
"id_country": "3",
"country": "Bulgaria"
}, {
"id_country": "4",
"country": "Croatia"
}, {
"id_country": "5",
"country": "Cyprus"
}, {
"id_country": "6",
"country": "Czech Republic"
}, {
"id_country": "7",
"country": "Denmark"
}, {
"id_country": "8",
"country": "Estonia"
}, {
"id_country": "9",
"country": "Finland"
}, {
"id_country": "10",
"country": "France"
}, {
"id_country": "11",
"country": "Germany"
}, {
"id_country": "12",
"country": "Greece"
}];
}
]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="addLocationCtrl">
<div class="form-group">
<label>Country</label>
<select class="form-control" data-ng-model="currentCountryId" data-ng-options="c.id_country as c.country for c in countries"></select>{{countries}}
</div>
<div class="form-group">
<label>Province</label>
<select class="form-control" data-ng-model="currentProvinceId" data-ng-options="p.id_province as p.province for p in provinces">
</select>
</div>
</div>
</div>

AngularJS retrieve data and display with ng-change

I have a function to add records to database.
What I need to do is when I select an option all necessary fields must be filled with data.
I'm just new with angularjs and want to learn how to do this.
below is my code.
template
<div class="col-md-10">
<div class="col-md-12">
<div class="form-group">
<label>Select Employee </label>
<select class="form-control" ng-change='getData()' id='empId' ng-model="empId" ng-options="opt.id as opt.value for opt in employees">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Department <i class="required">*</i></label>
<select class="form-control" ng-change ="getPos()" ng-model="data.Employee.departmentId" ng-options="opt.id as opt.value for opt in deparments" data-validation-engine="validate[required]">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Position <i class="required">*</i></label>
<select class="form-control" ng-model="data.Employee.positionId" data-validation-engine="validate[required]">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Rate <i class="required">*</i></label>
<input type="text" class="form-control" ng-model="data.Employee.rate" data-validation-engine="validate[required]">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Loan Amount <i class="required">*</i></label>
<input type="text" class="form-control" ng-model="data.Loan.amount" data-validation-engine="validate[required]">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Period (months) <i class="required">*</i></label>
<input type='text' class="form-control" ng-model="data.Loan.amount" data-validation-engine="validate[required]">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Date Start<i class="required">*</i></label>
<input type="text" class="form-control text-left" id="dateStart" ng-model="data.Employee.contractFrom" data-validation-engine="validate[required]" id="contractFrom">
</div>
</div>
</div>
controller
app.controller('LoanAddController', function($scope, Loan,Select) {
$('#form').validationEngine('attach');
$scope.load = function() {
Loan.get({ id: $scope.employeeId }, function(e) {
$scope.data = e.data;
});
Select.get({ code: 'departments' }, function(e) {
$scope.departments = e.data;
});
// employees selection
Select.get({ code: 'employees' }, function(e) {
$scope.employees = e.data;
});
Select.get({ code: 'positions' }, function(e) {
$scope.positions = e.data;
});
}
$('#dateStart').datepicker({
format: 'mm/dd/yyyy',
autoclose: true
});
$scope.load();
// save loan data
$scope.save = function() {
valid = $("#form").validationEngine('validate');
if (valid) {
Loan.save($scope.data, function(e) {
if (e.ok) {
$.gritter.add({
title: 'Successful!',
text: e.msg,
});
window.location = '#/loans';
} else {
$.gritter.add({
title: 'Warning!',
text: e.msg,
});
}
});
}
}
});
some JSON data
{
"ok": true,
"data": [
{
"Loan": {
"id": "1",
"employeeId": "9",
"dateApplied": "2015-10-15",
"amount": "5000",
"period": "6",
"startdate": "2015-11-01",
"status": "pending",
"visible": true,
"created": "0000-00-00 00:00:00",
"modified": "0000-00-00 00:00:00"
},
"Employee": {
"id": "9",
"employeeNumber": "24681012",
"lastName": "Cortez",
"firstName": "Kim Carlo",
"middleName": "Mira",
"departmentId": "1",
"positionId": "4",
"rate": "600",
"typeId": "8",
"dateHired": "2015-10-22",
"contractFrom": "2015-10-31",
"contractTo": "2016-10-31",
"image": "9.PNG",
"visible": true,
"created": "2015-10-07 08:25:56",
"modified": "2015-10-07 08:25:56"
},
"Department": {
"id": null,
"code": null,
"name": null,
"description": null,
"visible": null,
"created": null,
"modified": null
},
"Position": {
"id": "9",
"name": "Bell boy",
"departmentId": "6",
"description": "bellboy, ice cream vendor",
"visible": true,
"created": "2015-10-06 13:52:43",
"modified": "2015-10-06 13:52:43"
}
}
],
"paginator": {
"page": 1,
"current": 1,
"count": 1,
"prevPage": false,
"nextPage": false,
"pageCount": 1,
"order": {
"Loan.id": "ASC"
},
"limit": 25,
"options": [
],
"paramType": "named"
}
}
I have to populate the fields for employee details.
Any help would be appreciated.
Thank guys,

Angular Js orderBy with numeric field is not working

In controller I have written code that convert rank into Float
details.rank = '';
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
if (predicate == 'rank') {
for (var i = 0; i < data.countries[$scope.index].cities.length; i++) {
details.rank = parseFloat(data.countries[$scope.index].cities[i].rank);
}
$scope.predicate = predicate;
} else $scope.predicate = predicate;
};
but here I am getting error that ReferenceError: details is not defined
I have json like this:
{
"countries": [{
"country": "India",
"cities": [{
"name": "Bangalore",
"rank": "40"
}, {
"name": "Kolkata",
"rank": "54"
}, {
"name": "Mumbai",
"rank": "32"
}, {
"name": "Chennai",
"rank": "42"
}]
}, {
"country": "China",
"cities": [{
"name": "Guangzhou",
"rank": "111"
}, {
"name": "Beijing",
"rank": "90"
}, {
"name": "Fuzhou",
"rank": "21"
}, {
"name": "Baotou",
"rank": "23"
}]
}]
}
In html if I click header of table then it will sort the table both ascending and descending order but I am unable to do this.
<th>
RANK
<span ng-show="predicate === 'rank'" ng-class="{reverse:reverse}"> </span>
</th>
<ul ng-repeat="city in countryType">
<li ng-repeat="details in city.data.cities | orderBy:predicate:reverse">
<div class="text" id="t1"> {{details.name}} </div>
<div class="text" id="t2"> {{details.rank}}</div>
<div class="text" id="t3"> {{details.population}} </div>
<div class="text" id="t4"> {{details.language}}</div>
</li>
</ul>

You can make a dynamic sorting by clicking on the header divs doing like that :
<ul ng-repeat="city in countryType">
<li>
<div class="text" ng-click="orderListBy('name')"> Name </div>
<div class="text" ng-click="orderListBy('rank')"> Rank</div>
<div class="text" ng-click="orderListBy('population')"> Population </div>
<div class="text" ng-click="orderListBy('language')"> Language</div>
</li>
<li ng-repeat="details in city.data.cities | orderBy:predicate:reverse">
<div class="text" id="t1-{{$index}}"> {{details.name}} </div>
<div class="text" id="t2-{{$index}}"> {{details.rank}}</div>
<div class="text" id="t3-{{$index}}"> {{details.population}} </div>
<div class="text" id="t4-{{$index}}"> {{details.language}}</div>
</li>
</ul>
And in your controller
//initialize values
$scope.predicate = 'rank';
$scope.reverse = false;
$scope.orderListBy = function(attr){
$scope.predicate = attr;
$scope.reverse = !$scope.reverse;
};
Doing so it will revert the sort when re-clicking on the header of a column.
PS : don't forget to dynamically name your IDs in the ng-repeat directive to avoid errors and have a valid HTML code.

We Keep Coding

JavaScript is the programming language of the Web.

'pageNumber' value in data parameter is not passed through $.ajax() call made - javascript

Related

ng-option set default value in Angularjs

How to get label of an input field when submit a form in Angular JS

Select options disapear when i select item (Angular)

AngularJS retrieve data and display with ng-change

Angular Js orderBy with numeric field is not working

Categories

Resources