I am trying to display items from my database. There are 6 items in it. However, it was only able to display the first item. But they are able to display all the 6 buttons. I have also attached a picture at the end to show how my page looks like currently. Is there any way to solve this problem? I want my item image, description and price to appear and followed by the button next. But as of now, its showing the first item and the 6 buttons.
Javascript
$(document).ready(function () {
showlist();
});
function showlist(userid) {
var url = serverURL() + "/listitems.php";
categorynameID = decodeURIComponent(getUrlVars()["categoryID"]);
var JSONObject = {
"categoryID": decodeURIComponent(getUrlVars()["categoryID"])
};
$.ajax({
url: url,
type: 'GET',
data: JSONObject,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (arr) {
_showitemResult(arr);
},
error: function () {
validationMsg();
}
});
}
function _showitemResult(arr) {
for (var i = 0; i < arr.length; i++) {
$("#lblimagefile").attr("src", serverURL() + "/images/" + arr[i].imagefile); //display profile image
$("#lblitemName").html(arr[i].itemName); //display item name
$("#lblprice").html(arr[i].price); //display price
htmlstring = "<a href='#' class='ui-btn' id='btn" + arr[i].itemID + "'>View Item</a>"; //add a new [Category] button
$("#result").append(htmlstring);
$("#btn" + arr[i].itemID).bind("click", { id: arr[i].itemID }, function (event) {
var data = event.data;
showitem(data.id);
});
}
}
function showitem(itemID) {
//alert(categoryID);
window.location = "showitem.html?itemID=" + itemID;
}
HTML
<div role="main" class="ui-content" id="main-ui">
<img id="lblimagefile" height="100">
<div id="lblitemName"></div>
<div id="lblprice"></div>
<div id="result"></div>
</div>
Add to htmlstring price, image and name template. htmlstring is your template for every post.
HTML:
<div role="main" class="ui-content" id="main-ui">
<div id="result"></div>
</div>
jQuery:
htmlstring = "<img src='" + serverURL() + "/images/" + arr[i].imagefile + "' height='100'><div>" + arr[i].itemName + "</div><div>" + arr[i].price + "</div><a href='#' class='ui-btn' id='btn" + arr[i].itemID + "'>View Item</a>"; //add a new [Category] button
$("#result").append(htmlstring);
Related
I am using a jquery plugin to generate a mega dropdown on my mobile website:
The menu is generated dynamically: everytime the user clicks on the right arrow, an api call is made to gather all sub-points to the clicked menu-entry. Down the menu everything works fine, but when I click on "back" it seems that there is added a forward/back-button for each menu-level:
This is my code:
// Catching the click-event
$(document).on('click','.next-button', function(){
var subCatContainer = $(this).next('.subcats');
var current = $(this).parent('.shopCatWithSub');
var categoryid = current.data('categoryuuid');
console.log('Next clicked');
console.log(categoryid);
if(typeof categoryid !== "undefined"){
buildSubcats(categoryid, subCatContainer, standardUrl);
} else {
console.log("No category set!");
}
});
// Get subcategories from API:
function buildSubcats(catid, subCatContainer, standardUrl) {
$.ajax({
type: 'GET',
url: 'https://my-awesome-url.de/api?category-id=' + catid,
dataType: 'jsonp',
contentType: 'application/json',
success: function (data) {
handleResponse(data, subCatContainer, standardUrl);
},
error: function(XMLHttpRequest, textStatus, errorThrow) {
console.log(errorThrow);
if (jQuery.isFunction(callback)) {
}
}
});
}
// Build and add new nav-elements:
function handleResponse(data, subCatContainer, standardUrl){
var output = '';
$.each(data, function(key, category){
var element = '';
var uladd = "";
var aClassAdd = "";
if(category.hasSubcategories) {
uladd = '<ul class="subcats"></ul>';
aClassAdd = 'has-next-button';
}
element = '<li class="shopCatWithSub" data-categoryuuid="' + category.categoryUUID + '">'
+ '<a class="text-truncate menu-item ' + aClassAdd + '" href="' + standardUrl + category.categoryUUID + '">'
+ '<i class="icon-' + category.categoryIconClass + ' mr-2"></i>'
+ category.displayName
+ '</a>'
+ uladd
+ '</li>';
output += element;
});
subCatContainer.empty();
subCatContainer.html(output);
// Re-initialize menu
$('.nav-mobile').mobileMegaMenu();
}
I assume that there is a problem with the re-initializing of the complete menu-structure. But I can't figure out how to handle it.
With the code below I am trying to update PartialView's HTML.
open_Modal_AssignAmendRoles = function (url) {
$.ajax({
url: url,//PartialView URL
cache: false,
type: "POST",
dataType: "html",
success: function (data, textStatus, XMLHttpRequest) {
var modalhtml = data;
var result = datafetchfunction("action URL", )
if (result.compleate == true) {
result.data.employeeroles.forEach(function (roletype) {
var tagbox = $(modalhtml).find("#tagbox" + roletype.clientroletypeid);
var span = $(modalhtml).find("#rolecontainer" + roletype.clientroletypeid);
var roletypeid = roletype.clientroletypeid
roletype.roles.forEach(function (role) {
var roleid = role.FK_ClientRoleID
var roledescription = role.ClientRole_Description;
var rolecode = role.ClientRole_Code
var markup = ""
markup += " <li class='taglist' id='" + roleid + "'>"
markup += " <button onclick='$(this).parent().remove()' class='tagclose'>"
markup += " <span class='glyphicon glyphicon-remove' aria-hidden='true'></span>"
markup += " </button>"
markup += " <a class='assignedrole' href='Javascript:void(0);' onclick='pop_click_fn(this)'"
markup += " role-id='" + roleid + "' role-type-id=" + roletypeid + ""
markup += " data-toggle='popover' data-trigger='hover' data-content='" + roledescription + "' data-placement='top' > " + rolecode + " </a>"
markup += " </li>";
$(span).append(markup)
})
})
openModal( modalhtml);
}
}
});
}
Step 1:
On button click the open_Modal_AssignAmendRoles() function is called. Then it goes to the success() function.
Step 2:
var result = datafetchfunction("action URL" )
this fetch data as JSON format
Step 3:
Then I start some loop, I already create some spans and find them with
var span = $(modalhtml).find("#rolecontainer" + roletype.clientroletypeid);
Step 4:
then I build a markup and assign this
$(span).append(markup)
and finally, call
openModal( modalhtml);
But modalhtml is not updated as expected, it means lis which I created with loop is not added.
Can someone tell me what is the problem and how to solve this?
i'm trying to redirect to new page on clicking the link, but it redirect to new page it also add previous page url in the address bar. Kindly have a look at my code. How do i remove current page url on the upcoming page or next page.
This my HTML.
#{
ViewData["Title"] = "ProductList";
}
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<h2>Product List</h2>
<div id="im" >
</div>
Here is my Script.
<script>
$(document).ready(function () {
var loc = window.location.href;
var dat = loc.substring(loc.lastIndexOf('/') + 1);
$.ajax({
url:'api-url'
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "ProjectId": "1", "CategoryId": dat }),
success: function (data)
{
console.log(data);
$.each(data.ProductList, function () {
var list = "<a href='Product/ProductDetail/" + this.Id + "'><img src=" + this.ImageLink + " height=400 width=400> " + this.Name + "</a> $" + this.Price + " </img> ";
$("#im").append(list);
})
}
});
});
</script>
On Redirection the next page url becomes like this.
http://localhost:36547/Product/ProductList/Product/ProductDetail/102
Rather it should be
http://localhost:36547/Product/ProductDetail/102
You need to add slash / before product url to route from domain root
var list = "<a href='/Product/ProductDetail/" + this.Id + "'><img src=" + this.ImageLink + " height=400 width=400> " + this.Name + "</a> $" + this.Price + " </img> ";
$("#im").append(list);
Without it browser URL will be relative to the current path
To display company details with image,
I have controller like:
public JsonResult PrintHeading()
{
CompanyModel cm = new CompanyModel();
string qry = "select CompanyName,Address,ContactNo,EmailAddress,LogoFileName from tblCompanyInfo";
DataTable dt = cls.LoadData(qry);
foreach (DataRow dr in dt.Rows)
{
cm.CompanyName = Convert.ToString(dr["CompanyName"]);
cm.Address = Convert.ToString(dr["Address"]);
cm.ContactNo = Convert.ToString(dr["ContactNo"]);
cm.EmailAddress = Convert.ToString(dr["EmailAddress"]);
cm.LogoFileName = Path.Combine("\\Content\\Logo", Convert.ToString(dr["LogoFileName"]));
}
return Json(cm, JsonRequestBehavior.AllowGet);
}
and Function:
function getPrintHeading() {
var heading = '';
$.ajax({
url: '#Url.Content("~/Bank/PrintHeading")',
type: "GET",
dataType: "JSON",
async: false,
success: function (headdata) {
heading = '<img src="' + headdata.LogoFileName + '" width=50 height=50>' + headdata.CompanyName + '<br>' + headdata.Address + '<br>' + headdata.ContactNo + ', ' + headdata.EmailAddress ;
}
});
return heading;
}
It displays all other data but doesn't display image.please Can you give the idea?
I think you forgot to close img tag.Check it once may help You.
<img src="' + headdata.LogoFileName + '" width=50 height=50 />
I have some ppt files in a list now when I click on a particular ppt then I am generating image of each slide and storing in a folder.Now I want to display all the images in a list.
Here is my html to display the images.
<div class="sideBySide">
<div id="dvLeft" class="left" style="overflow: scroll; height: 400px; float: left">
</div>
<div class="right" >
<ul class="target connected" style="float: left; width: 300px"></ul>
</div>
</div>
Here is my script
$(".lnk").click(function (e) {
e.preventDefault();
var vPath = $(this).attr("href");
debugger;
//$("#viewPlaceHolder").load("/home/generateImageList?strPath=" + $(this).attr("href"));
//$(".left").html("/home/generateImageList?strPath=" + $(this).attr("href"));
//$("#iPPT").attr("src", $(this).attr("href"));
//---------------
$.ajax({
type: "POST",
data: { "strPath": vPath },
url: '#Url.Action("generateImageList", "home")',
success: function (result) {
alert(result);
$('#dvLeft').empty();
$('#dvLeft').html(result);
//$('.left').html("<ul class='source connected'><li>Audi</li></ul>");
$(".source, .target").sortable({
connectWith: ".connected"
});
}
});
//---------------
})
});
Here is my action
public ActionResult generateImageList(string strPath)
{
try
{
// load a PowerPoint document
PPTXDocument doc = new PPTXDocument(strPath);
//Delete files
System.IO.DirectoryInfo di = new DirectoryInfo(#"D:\Sajal\ResterEdgeApiTest\PPTSlider\Test\");
foreach (FileInfo file in di.GetFiles())
{
file.Delete();
}
// convert all PowerPoint document pages/slides to PNG files
// page index will automatically append to the file name
doc.ConvertToImages(ImageType.PNG, #"D:\Sajal\ResterEdgeApiTest\PPTSlider\Test\", "0");
DirectoryInfo dirInfo = new DirectoryInfo(#"D:\Sajal\ResterEdgeApiTest\PPTSlider\Test\");
List<FileInfo> files = dirInfo.GetFiles().OrderBy((f) => Int32.Parse(Path.GetFileNameWithoutExtension(f.Name))).ToList();
List<clsPPT> ppts = new List<clsPPT>();
int i = 1;
/****************************/
StringBuilder sb = new StringBuilder();
sb.Append("<ul class='source connected' style='float: left'>");
/****************************/
foreach (var item in files)
{
clsPPT cp = new clsPPT();
cp.strName = item.Name;
string strPath1 = #"http://localhost:63714/Test/" + item.Name;
//Uri myuri = new Uri(strPath1);
cp.strPath = strPath1;//myuri;
cp.rowNo = i;
ppts.Add(cp);
sb.Append("<li><p>" + i.ToString() + "</p><img id='" + i + "' src='" + strPath1 + "' height='200' width='300' alt='" + strPath + "' /></li>");
i = i + 1;
}
sb.Append("</ul>");
ViewBag.htmlDesig = sb.ToString();
//return PartialView("~/Views/Home/_ppSlideList.cshtml", ppts);
//return PartialView("~/Views/Home/_ppSlideListNew.cshtml", ppts);
return Json(sb.ToString());
}
catch (Exception ex)
{
throw ex;
}
}
When first time I am clicking on the ppt it's loading correct images but when I am clicking on the second ppt then image generation and html generation for the list is successful but it displaying the previous images which does not exist int folder.
Add cache: false to your AJAX call as in:
$.ajax({
type: "POST",
cache: false,
...
});