I have this piece of code which opens a Model Window with a content picker and returns a breadrumb string for any selected node. This works in a custom area.
What I want to do is, also in a custom area, have a media picker open in a modal popup so I can get the id of the media item selected. I was hoping just to adapt this code ('content'-->'media' as a start) but my changes haven't worked and also I don't know if its meant to work. The 'GetPickerurl' is depretiated but I don't know if there is a new way? I'm using umbraco 6.1.6. Many Thanks
<script>
function showTree() {
var treePicker = parent.UmbClientMgr.openModalWindow('#(umbraco.uicontrols.TreeUrlGenerator.GetPickerUrl(true,"content","content"))', 'Select', true, 600, 425, null, null, null, function (args) {
$.ajax({
type: "POST",
url: '/umbraco/webservices/legacyAjaxCalls.asmx/GetNodeBreadcrumbs',
data: '{ "nodeId": ' + args.outVal + ' }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var a = msg.d;
var name = a[a.length - 1];
var breadcrumbs = a.join(" > ");
$('p#pickedContent').html(breadcrumbs);
}
});
});
}
</script>
Pick Content
<p id="pickedContent"></p>
I haven't seen your approach before, but you can use the build in media and content picker control.
Include this in your head of the aspx file
<%# Register Namespace="umbraco.uicontrols.TreePicker" Assembly="controls" TagPrefix="umbtree" %>
To get a Media picker control
<umbtree:SimpleMediaPicker runat="server" id="MediaSimpleContentPicker" />
and content picker
<umbtree:SimpleContentPicker runat="server" id="TreeSimpleContentPicker" />
Problem found. After looking at the urls in the popup I could see that the string wasn't being encoded properly-
/dialogs/treepicker.aspx?rnd=b235c90e995344f6a2e299a21013c7a8&id=-1&treeType=media&contextMenu=true&isDialog=false&
It just needed Html.Raw around the call - also note the "media" parameters.
parent.UmbClientMgr.openModalWindow('#(Html.Raw(umbraco.uicontrols.TreeUrlGenerator.GetPickerUrl("media", "media")))
Related
I have a view showform.phtml that is loaded into a div via jquery dialog. In the view I am loading a javascript with a $(form).submit() listener. The problem is, the javascript is never loaded. I have tried a couple of different methods, including $this->headScript()->appendScript(script), $this->headScript()->appendScript(file). I even tried just including the script in the layout and index view so that it was sure to be available... but the popup never fires it.
I suspect it has something to do with the fact that I am using setTerminal(true) on the form view... but I don't know what the alternative is.
Anyone have any advice on troubleshooting? Or any experience with this issue?
thanks
EDIT :
This is sample javasctipt that loads in the index.phtml view
$(function()
{
$("form#News").submit(function()
{
$.ajax(
{
type: 'POST',
url: '/main/manage/validateajax',
data: $('form#News').serialize(),
success: 'success'
});
return false;
});
});
The body of the view is a div that showform.phtml loads into
showform creates a form called #News.
When I insert the js code into the body of showform, it works. When I append this to the headScript, it does not work.
Maybe it's a solution for you.
Requirement: scripts of your modal view have to be already loaded (for example inside the application.js)
$("#loadModalBtn").click(function(e){
e.preventDefault();
var url = $(this).attr("href");
$("#modalContainer").load(url, function(){ // that's the point
var urlForm = $("form#News").attr("action");
$("form#News").submit(function(){
$.ajax({
type: 'POST',
url: urlForm,
data: $('form#News').serialize(),
success: 'success'
});
return false;
});
}).dialog({
height: 140,
modal: true
});
});
Using MVC 3.
(The code below was an attempt to recreate the toggle effect of stackoverflow's checked answer)
I have a ajax actionlink when you click it calls an update to db to switch the flag/image. However it works one time, if I click it again it will not toggle. Because there is no postback, model.IsIssue is not updated (its server code). Not sure the best approach to fix the issue. Should I handle it in the code, where I check the current flag in db and pass it back to the view. Or via Jquery, not sure how to code it (my preference)?
My code in the view (toggle):
<div>
#Html.Raw(
Ajax.ActionLink("[replacethis]",
"ToggleEnabled",
new { questionId = question.QuestionID, reviewId = step.ReviewID, flag = question.IsIssue },
new AjaxOptions { UpdateTargetId = "toggleimage" + question.QuestionID })
.ToHtmlString()
.Replace("[replacethis]",
string.Format("<div id='toggleimage{0}'><img src='/Content/images/{1}' border='0' alt='toggle'/></div>",
question.QuestionID, question.IsIssue ? "issue_on.png" : "issue_off.png")
)
)
My action controller:
public ActionResult ToggleEnabled(int questionId, int reviewId, bool flag)
{
using (var db = new NexGenContext())
{
db.Database.ExecuteSqlCommand(
"EXEC SP_AddUpdateQuestionFlagged #QuestionID, #ReviewID",
new SqlParameter("#QuestionID", questionId),
new SqlParameter("#ReviewID", reviewId)
);
return flag ? Content("<img src='/Content/images/issue_off.png' border=0 />") : Content("<img src='/Content/images/issue_on.png' border=0 />");
}
}
I would just change a css class to toggle the image.
So instead of holding the image in img ... I would use a div and placing the image as a background.
So, instead of replacing the html with the DIV and IMG in it (what removes the callback to handle the click), just change the class of the div.
In your view:
<div id="myimage" class="NormalState"></div>
In JS:
$('#myimage').click(function () {
$.ajax({
url: 'yourControllerActionURL'
type: 'POST',
contentType: "application/json; charset=utf-8",
data: {'questionId': question.QuestionID, 'reviewId': step.ReviewID, 'flag': question.IsIssue },
success: function (data) {
if(data.isClicked == true){
$('#myimage').addClass('ClickState').removeClass('NormalState');
}
else{
$('#myimage').addClass('NormalState').removeClass('ClickState');
}
}
});
});
In your CSS:
.NormalState { background-color: #ABCDEF;}
.ClickState { background-color: #FF0000;}
In your controller:
You need to return JSON with isClicked set as true or false. You could also return the css class to apply from the controller, but that way your controller knows about the view and that is not the idea of the MVC pattern. So telling the view what happenned more suitable.
I'm working on a simple Jquery Mobile application that does a search, presents results, and then allows you to click on a result to go to a dynamic detail page. On the detail page there is a collapsible list which uses an ajax call to get its content.
It appears to be working fine on the surface, but when I inspect it with Firebug I notice that every time you go to a detail page and expand the collapsible list, the ajax fires multiple times.
So, for instance, I do a search, go to the detail page, expand the collapsible list, the ajax fires once. I go back to the results page, click on another result, go to the detail page, expand the collapsible list, and the ajax fires twice, etc. Each time I expand the collapsible list, the ajax fires one more time...so if I look at 10 results, the ajax fires 10 times.
It would appear that the dynamic pages are accumulating in the DOM, and each time I click on the collapsible list, it's firing on all the selectors that have built up in the DOM (at least that's my theory).
How do I make sure that my ajax only fires once rather than multiple times?
I'm using Jquery Mobile 1.0.1 with Jquery 1.6.4. I'm using php to get the data.
Here's my code for the search page:
$('form#searchCompanies').submit(function(event) {
getSearchResultsCompanies();
return false;
});
function getSearchResultsCompanies() {
$.ajax({
type: "POST",
url: baseURL + 'server/searchCompanies.php',
data: $("form#searchCompanies").serialize(),
dataType: 'json',
success: function(results){
$('#companyList li').remove();
for ( var i=0; i < results.length; i++) {
$('#companyList').append('<li>' + results[i].CompanyName + '</li>');
}
$('#companyList').listview('refresh');
}
});
return false;
}
$('.companyDetail').live('click', function(event) {
//save companyid so that we can reference it on detail page
var companyid = $(this).attr('data-uid');
localStorage.setItem('thisCompanyId', companyid);
});
Here's the code for the detail page:
$('#companyDetailPage').live('pageshow', function(event) {
var companyid = localStorage.getItem('thisCompanyId');
$.ajax({
type: "POST",
url: baseURL + 'server/getCompanyDetail.php?companyid=' + companyid,
data: {companyid: companyid},
dataType: 'json',
success: function(company) {
$.each(company, function(index, company) {
$('#companyName').html(company.CompanyName);
//etc...pulls in more data to populate the page
});
}
});
//this is the call that fires multiple times
$('#companyContacts').live('expand', function(event) {
$('#companyContactList li').remove();
$.ajax({
type: "POST",
url: baseURL + 'server/getCompanyContacts.php?companyid=' + companyid,
dataType: 'json',
success: function(results){
for ( var i=0; i < results.length; i++) {
$('#companyContactList').append('<li>' + results[i].LastName + 'etc...more data</li>');
}
$('#companyContactList').listview('refresh');
}
});
return false;
});
});
The html div that gets populated looks like this:
<div data-role="collapsible" data-collapsed="true" id="companyContacts" class="cmdCompanyContacts">
<h3>Contacts (<span id="totalContacts"></span>)</h3>
<ul id="companyContactList" data-role="listview"><li></li></ul>
</div>
I've searched high and low for a resolution, and tried reworking my code from various angles, but I'm not able to solve this problem. Any help would be deeply appreciated. Thanks.
I had this problem too. I tried the suggestion found here, but still had the multiple event triggering problem after trying this. Here is what else I had to do. I changed it from this:
$(‘#myPage’).bind(‘pageinit’, function (event) {
$(‘#myButton’).live(‘click’, function (event, ui) {
to this:
$(‘#myPage’).bind(‘pageinit’, function (event) {
$(‘#myButton’).click(function (event, ui) {
Rather than using jquery live i would like to suggest you to use javascript function call when you click for the page change.Write your ajax call in that function so that its been called only once.Hope this helps
On a particular jQuery Mobile page I am loading content through an AJAX post. I am then replacing some content in the DOM with the returned HTML.
The returned HTML contains form elements, which I would like jQM to style.
This used to work in beta 1:
$.ajax({
type: 'POST',
url: form.attr("action"),
data: form.serialize(),
success: function (response) {
if (response.worked) {
voucher_area.fadeOut(function () {
$(this).html(response.html).children().page();
$(this).fadeIn();
});
}
else {
Notify.showMessage("Could not update your call with voucher information: " + response.message, "error");
}
},
dataType: "json",
error: function () {
Notify.showMessage("Fatal Error.");
}
});
The call to page on the content would style the content.
However in the latest version this no longer seems to work.
Is there a correct way to style loaded content?
Thanks
You should be able to style content directly using something like: $(this).css({'padding':'5px'}) using the styles of your choice.
Alternatively, you should be able to define the appropriate styles in an external css file as well.
I'm using ASP.NET MVC with jquery. I have a couple of dropdownlists. When I select one via mouse click and then scroll down over the items using the mouse/cursor, the list closes before a selection can be made, before the mouse can be clicked. This doesn't happen when I open them and then up/down arrow to select an item. It doesn't happen all of the time, but a lot. Just to try something different, I added a jquery "select" control with hardcoded values (options) and it displays the same behavior. Any ideas?
<%: Html.DropDownList("Accounts", (IEnumerable)ViewData["Accounts"], "-- Select an account --")%>
Thank you
Does the "Accounts" dropdown have any other jQuery handler set on it? It sounds like a hover handler (or some similar event) is performing an action on the dropdown.
DropDownList just gets rendered as a standard HTML <select> tag, which I really hope IE7 can handle correctly :) So I suspect some JavaScript fowl play is happening.
Jquery handlers being used, but the select control I added just for testing doesn't have any handlers and it displays the same behaviour.
jQuery(function () {
jQuery("#Accounts").change(function () {
var accountID = jQuery("#Accounts > option:selected").attr("value");
jQuery.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: changeAccountUrl + "/" + accountID,
data: "{}",
dataType: "json",
success: function (value) {
if (value == null || value.length <= 0) {
jQuery("#DefaultIndex").val("no default index");
document.getElementById("lblResults").innerHTML = "";
}
else {
jQuery("#DefaultIndex").val(value);
document.getElementById("lblResults").innerHTML = "";
}
}
});
jQuery("#gridShipments").trigger("reloadGrid");
});
});
jQuery(function () {
jQuery("#Status").change(function () {
jQuery("#gridShipments").trigger("reloadGrid");
document.getElementById("lblResults").innerHTML = "";
});
});