I'm new to Umbraco and I'm trying to use media picker on my site but for some reason the value is always null or empty.
I followed the steps in here but when inspecting the html code i get the following results:
<img class="img-fluid" src="" style="background-image: url('')" alt="">
Here is my code:
#{
Layout = "Master.cshtml";
var image = Model.Value<IPublishedContent>("mainImage");
if (image != null)
{
<img class="img-fluid" src="#image.Url" style="background-image: url('#image')" alt="" />
} }
In the Backoffice i added my image in Media first and i did click save and publish.
backoffice
I'm running on version 8.14.1
As you are probably using the new (to 8.14+) media picker, you might need to do things a bit differently (like so: https://our.umbraco.com/Documentation/Fundamentals/Backoffice/Property-Editors/Built-in-Property-Editors/Media-Picker-3/ ) .
I've had to reload models builder + recompile in order for it to trigger. Try giving that a go.
I'm new to a-frame and created this project in Glitch.
Here is my code.
<a-assets>
<img id="image" src="arrow.png" crossorigin="anonymous">
</a-assets>
<a-image src="#image" width="2" height="0.8"></a-image>
There is no error with the path of arrow.png because I don't get 404 error in console. If I change spelling in "arrow.png" I get a 404.
The image appears as a black box.
But if I use an online resource instead, it displays correctly.
<a-assets>
<img id="image" src="https://i.imgur.com/wjobVTN.jpg" crossorigin="anonymous">
</a-assets>
I created a GET endpoint in the express server that returns the image.
// Return arrow
path = `${__dirname}/views/arrow.png`
app.get('/arrow', (request, response) => {
response.sendFile(path);
});
When I go to the endpoint from my browser, the entire screen is black.
EDIT
Glitch project link
https://glitch.com/~quickest-catshark
Looking at your project structure on Glith, you need to move the arrow.png to your public folder.
Remixed glitch: https://glitch.com/~scalloped-lemongrass
I'm really hoping someone can help. I just got over one big hurdle in my current project, only to hit another. I have a deadline fast approaching, so any advice would be very much appreciated.
I am developing a mobile application for iPad using MVC4 and Jquery Mobile. At a certain point in my app, the user will trigger a pop-up box, which contains "yes" and "no" buttons. If the user clicks "yes", I want to send some parameters to an action in my controller, do some database work, and then return a partial view (with updated model) that will be displayed in my main view. I have the following jquery that executes upon click of a href button that is inside a pop-up.
$(function () {
$("#popupSubmit").bind("tap", tHandler);
function tHandler(event) {
$.post('#Url.Action("LoadTestData", "WO")',
{TestKey: lblTestKey.innerHTML, TestRequestNumber: lblTestServiceRequestNum.innerHTML },
function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); });
}
});
In the above code, #popupSubmit is the href button, LoadTestData is an Action that returns a partial view, WO is the Controller, and #detailsDiv is a placeholder div in the main view. TestKey and TestRequestNumber are parameters that must be passed to the Action. Below is the code for the Action, LoadTestData. _ShowTestPartial is the Partial View.
[HttpPost]
public ActionResult LoadTestData(string TestKey, string TestRequestNumber)
{
//do database work
return PartialView("_ShowTestPartial", model);
}
Now, all of this code works on my desktop in Safari. However, this DOES NOT work on the iPad. I've tested, and the code does make it into the tHandler event when the button is clicked on the iPad, but there's something about the URL.Action or about returning a partial view in this way that the iPad just doesn't like.
Does anyone know how to solve this issue for iPad?
Edit (additional info from comments): To be clear, the partial view isn't being rendered at all on iPad, but it is on desktop Safari (and in Chrome for that matter). I have tried replaced "create" with "pagecreate" but this actually took away the JQM styling in the desktop browers and didn't change anything about the iPad.
It also doesn't seem to matter where I place the bind function...I've tried it as a separate function. I've tried it in .ready() and in .on('pageinit'). In all of these cases, it works on desktop Safari and Chrome, but not on iPad.
Also, as I said before, the .bind("tap") works on iPad. I've tested by putting other code in the tHandler. However something in the .$post does not work on iPad.
Thank you Omar, and anyone else who has any ideas. All are welcome!
Edit # 2: On Omar's advice I moved my function to $(document).on('pageinit'). I also added error catching on the $.post. Updated code below:
$(document).on('pageinit', function () {
$("#popupSubmit").bind("tap", tHandler);
function tHandler(event) {
$.post('#Url.Action("LoadTestData", "WO")', { TestKey: lblTestKey.innerHTML, TestRequestNumber: lblTestRequestNum.innerHTML })
.done(function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); })
.fail(function (xhr, textStatus, errorThrown) { alert(xhr.responseText); })
}
});
Fortunately, this enabled me to see the error occurring on the iPad. Unfortunately, the error coming out of $.post is "An unknown error occurred while processing your request". Everything is still running smoothly on the desktop browsers with this code.
It turns out the answer was that, on the iPad the parameters were not getting passed to $.post. lblTestRequestNum and lblTestKey are labels on my JQM popup dialog box. See below:
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="b" data-dismissible="false"
style="max-width:416px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Selection <label id="lblTestRequestNum" style="text-align:left; height:22px; font-size:14px;">#Model.TestRequestNumber</label></h1>
</div>
<div data-role="content" data-theme="a" class="ui-corner-bottom ui-content">
<h3 class="ui-title" style="text-align:center; height:22px;">Are you sure?</h3>
<label id="lblTestKeyLabel" style="text-align:left; height:22px; font-size:14px; margin-left:95px;">Test Key: </label>
<label id="lblTestKey" style="text-align:left; height:22px; font-size:14px;"></label>
<label id="lblTestType" style="text-align:left; height:22px; font-size:14px; margin-left:95px;"></label>
<a id="popupSubmit" data-role="button" data-inline="true" data-rel="back"
data-mini="true" data-theme="b" style="width:150px;" type="submit">Yes</a>
<a href="#" data-role="button" data-inline="true" data-rel="back"
data-mini="true" data-transition="flow" data-theme="b" style="width:150px;">No</a>
</div>
</div>
On the desktop, Safari was able to retrieve the parameters I needed from the labels in the popup. But on iPad, it could not. So, I simply found places outside of the pop-up, in my main view to display/retrieve my parameters from. Lesson learned: Don't expect iPad to be able to read anything from labels/inputs inside your pop-up dialog.
I am using jQuery Mobile and CodeIgniter. In my index page,
http://localhost:8888/hwezemail2/index.php/welcome/student/index
I have a link to another page.
http://localhost:8888/hwezemail2/index.php/welcome/student/myhomework/56
But when I click the link, it will go to the following and does not display.
http://localhost:8888/hwezemail2/index.php/welcome/student/index#/hwezemail2/
index.php/welcome/student/myhomework/56
Then I refresh the page once the url becomes
http://localhost:8888/hwezemail2/index.php/welcome/student/myhomework/56
But it does not display the content. So I refresh it again then it shows the content.
Once it shows, then I don't have any problem. It is only the first time.
My PHP code it the following.
echo '<a href="'. base_url().'index.php/welcome/student/myhomework/'
.$userid.'" data-role="button" data-inline="true" data-transition="pop"
data-icon="star" data-mini="true" data-theme="c">Missed Homework</a>';
I added data-ajax="false" to the link and the problem was solved.
I created an MVC3 application using jQuery Mobile which has a view with multiple jQuery mobile pages nested in a list like the following.
Main Page
<div data-role="page" id="main">
<ul data-role="listview" id="main" data-divider-theme="a">
<li>
Page 1
</li>
<li>
Page 2
</li>
</ul>
</div>
Other Pages
<div data-role="page" id="page1">
....
</div>
I also created a PhoneGapp application that offers some offline content which has a simple button menu which one directs to my externally hosted MVC site.
<div data-role="page" id="mainMenu">
<div data-role="content">
<ul class="buttonMenu">
<li>
<a href="http://www.thisismymvcsite.com" data-role="button">
<img src="mvcsite.png" alt="MVC Site" />
<span>MVC Site</span> </a></li>
</ul>
</div>
</div>
Now since I am using an External Host I added the domain to the PhoneGap.plist file, like *.thisismymvcsite.* to enable wild cards for sub domains.
The Problem
When I load up the PhoneGap application everything behaves correctly, I can even navigate to my external site and PhoneGap loads up the content within the application window. The issue I am running into, is when i click on my Page 1 the transition to the other page occurs in PhoneGap BUT also spawns a window into Safari like I am navigating to an external host that is not configured. If I go back to the application I see the correct jQuery Mobile page loaded up and if I try to go back to the #mainPage the same thing happens again.
I worked around this issue by altering the AppDelegate file in XCode to detect the #
- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *absoluteUrl = [[request URL]absoluteString];
NSRange range = [absoluteUrl rangeOfString:#"#" options:NSCaseInsensitiveSearch];
if( range.location != NSNotFound ) {
return YES;
}
return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}
The Question
My hack job works, however there must be something I am missing, is there anything I am doing wrong which is causing this strange behavior?
Note: I am using the latest PhoneGap 1.1 and jQuery Mobile 1 RC2