Reload Div Section Only - javascript

I don't know if what I am trying to do is possible so I will explain the whole scenario and what I am attempting to do that way if there is a better way you bright people can let me know!
Here is the scenario, I have a view and a PartialView. In the PartialView I have a dropdown list that gets populated via javascript from in the View. This works fine, in the PartialView I have a div that calls a Controller to return results based on a value in the Model passed to it. What I need are the results to be based on the value from the Model AND the dropdown list. Here is the code that works just based on the model value and a hardcoded loc which is what I want to get from the dropdown.
<div id="catalogue-view-action-view-ct" class="async-partial" data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatalogueItemID?loc=6&AsyncUpdateID=catalogue-view'>
#if (noJs)
{
<span>
#{ Html.RenderAction("ItemsActionViewPartial", "Catalogue_Items", new { id = Model.CatalogueItemID, location = 6, AsyncUpdateID = "catalogue-view-action-view-ct" }); }
</span>
}
else
{
<img src="#Url.Content("~/assets/images/busy.gif")" /><span> Loading...</span>
}
</div>
This div in the PartialView works great, in the View I have been able to set the data-url attribute no problem with javascript but the page is already loaded so it doesn't update. Is there a way to "refresh" or "reload" just a div not the whole PartialView? If I do the whole PartialView I am just back in the same situation with the html being loaded before the javascript sets the data-url attribute. Here is the javascript in the view:
var myDiv = document.getElementById('catalogue-view-action-view-ct');
url = '~/Catalogue_Items/ItemsActionViewPartial/20144?loc=' + $('#LocationID').val() + '&AsyncUpdateID=catalogue-view-action-view-ct';
myDiv.setAttribute('data-url', url);
$('#catalogue-view-action-view-ct').load(url);
Any help would be greatly appreciated.
UPDATE:
When using a relative path as I do above the data-url gets set properly but the load path is incorrect because it is appended. This is what happens:
data-url="~/Catalogue_Items/ItemsActionViewPartial/20144?loc=40&AsyncUpdateID=catalogue-view-action-view-ct"
This is perfect, exactly what I need, but the path loaded is:
http://www.example.com/catalogue-items/20144/myItem~/Catalogue_Items/ItemsActionViewPartial/20144?loc=40&AsyncUpdateID=catalogue-view-action-view-ct
The relative path get added to the end of my current location, I can fix this except I need to remove the "/myItem" portion as that is a parameter for the view that I don't want in the url. When I use an absolute path I get a cross-origin error. Any suggestions?

With the help of a few comments I was able to find a solution for my issue!
With using $('#catalogue-view-action-view-ct').load(url); there was actually no need to set the data-url.
But in order to have the relative path work properly I needed to surround it with url.content like so:
$('#catalogue-view-action-view-ct').load('#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatalogueItemID?loc=' + $('#LocationID').val() + '&AsyncUpdateID=catalogue-view-action-view-ct');
loading this value produced the desired results. Thanks #Lal for leading me in the right direction!

Related

How to load different views in same content div tag without refreshing entire page

I know must be possible to load different PartialViews in same div tag in my visual studio solution, I just can't get it. Here's a pic of what i want to make. I'm using razor to get the html, but can't figure out how to do it.
My html for the first option is like this
> <li><div id="abmPlan"><i class="fa fa-dashboard fa-fw"></i> ABM
> Plan</div></li>
My content wrraper is this
<div id="page-wrapper"></div>
Suppose I have a test1 view in my menu controller just for testing.
I have already tried Doing it with actionLink but this creates a button and i don't want that cause I already have my markup good and running. Besides the menu dissapears and only shows my partial view in the body of the layout.
Thanks in advance!
Ok so I finally did it. Here's the code.
$('#abmPlan').on('click', function (e) {
var base = window.location.origin + '/Plan/_ObtenerVistaPlan';
$('#contenidoMenuAdministrador').load(base );
});
There was an issue with the URL, so I had to get the base URL and then set the corresponding path. Thanks to those who answered and tried to help me!

Show iframes in angular-xeditable editables

I'm using angular-xeditable, here is my editable element:
<div class="like-pre" editable-textarea="question.answer" e-rows="10" e-cols="40" onbeforesave="validateFaq($data, 'answer')" ng-bind-html="question.answer"></div>
In controller, I use $sce.trustAsHtml to make question.answer appear as regular HTML instead of raw text. HTML can contain iframe (for youtube videos) or img elements. It works.
Problem is that after I change anything in question.answer through the editable element, IFRAME elements disappears complately. IMG elements still appears correctly after edition.
Anyone have idea whats wrong ?
Found solution. Problem was that xeditable only updates model data. After model is updated, it update editable div element through angulars bindings. Iframe was not shown, because new model content was not signed as trusted.
I had tried pass question.answer variable through $sce.trustAsHtml in onaftersave, but it didnt do anything. Thats because trustAsHtml didnt changed anything, I suppose it just marked it as trusted (dont know how it works internally).
Solution was adding empty space like this:
$sce.trustAsHtml(newQuestion.answer + ' ');
So angular finds that model has been changed and reloads editabel div with new - trusted as html - content.

Whats make different in below Jquery code?

I'm working with on developing one of the social networking site and its having some notification features in left panel.
Whenever any user have played a game it will automatically change the number of notification count.
For that i have using below code line.
jQuery('#count_id').load('mypage.php');
But it will retrieve me whole site content with header,footer and content area in the response text, which is wrong as per my requirements.
but if i used below code of line
jQuery('#count_id').load('mypage.php #count_id');
then it will retrieve me a real count but add another div in between the original,
Original html:
<div id="count_id" class="notify">2</div>
and Code after retrieving response:
<div id="count_id" class="notify">
<div id="count_id" class="notify">1</div>
</div>
which is also not as expected. count are right but i don't want to add new div inside a original one.
What should i need to change in my code?
Thanks.
jQuery('#count_id').load('mypage.php #count_id > *');
That would bring only the DOM childs (the content)
Because this is how it works. Also it enables you to attach events to the element you load and delegate them inside this element (so new elements can also benefit from attached JavaScript events) - see .delegate().
If you want to replace the element, you can try the following:
jQuery.get('mypage.php', function(data){
jQuery('#count_id').replace(jQuery(data).find('#count_id'));
}, 'html');
I did not test it, but it should work.
Ivan Castellanos is however right. According to the documentation, you can provide any selector after the first space in the .load()'s parameter.
To retrieve count_id, you can directly get the html value in the div like this:
<script type='text/javascript'>
jQuery(document).ready(function()
{
countVal = $("#count_id").html(); //returns the html content inside the div, which is the count value
countVal = parseInt(countVal); //This will convert the string to type integer
});
</script>
Note:
If you want increase the count and update the div value, you can add the following lines:
countVal++;
$("#count_id").html(countVal);

jQuery("#portfolioslide").data("AnythingSlider") is null

I have created a static HTML page with anythingslider to show sliding portfolio works. In that static HTML page it works just fine. Now I am trying to convert this page to a WordPress template page. At first, I just copy contents of the static main container page (excluding header and footer) and it stops working. It gives me an error jQuery("#portfolioslide").data("AnythingSlider") is null
Where should I dig in to define the cause of the problem?
I'm not sure what you are trying to do, but .data() is for storing arbitrary data together with an element. Have you previously saved the data to the same element, with the same key, on the same page? If not, .data() is expected to return null. See documentation
Edit
In the source code for anything slider I found the following:
if ($(this).is('.anythingBase')) { return; } // prevent multiple initializations
In you HTML you have the following:
<ul id="portfolioslide" class="anythingBase" style="width: 4800px;">
Not good since anything slider thinks that you've already initialized portfolioslide. Remove class="anythingBase" and it should work

How to display html page from string

I generate some html content dynamically like:
var content = "<head><title>testtitle</title></head><body>testbody</body>";
Then I get myself a new tab with about:blank, and now I want to display my generated html in this tab. If the tab's contentDocument is newDoc, I thought I just do:
newDoc.documentElement.innerHTML = content;
However, that doesn't work. It seems to have no effect at all. In firebug it seems to work once but screws up firebug at the same time, so I can't verify, source view remains unchanged.
I then tried:
newDoc.getElementsByTagName("head")[0].innerHTML = headContent;
newDoc.body.innerHTML = bodyContent;
Which doesn't change the displayed empty page, also not in the source view, but if I alert newDoc.documentElement.innerHTML, it reflects the changes. It seems like this isn't the document that's displayed any more. Weird.
So my question: how do I do that? Specifically in a firefox extension, if that is important.
Is there maybe a href format with "text://..." instead of "file://..." or something?
Update:
It turns out that I can't only replace the full code this way, I can't even body.appendChild, but I'm sure I did that before, so I compared. Here I get my document this way:
var tab = getBrowser().addTab(); //make new tab
getBrowser().selectedTab = tab; //bring it to front
var browser = getBrowser().getBrowserForTab(tab); //get the window of the tab
var newDoc = browser.contentDocument;
Now I can do:
newDoc.location.href = url;
And this works, it loads the given page.
So I thought this is the correct document, but if I don't assign a url, but instead try to build the dom myself, it simply doesn't work.
If I do those changes to window.content.document after the tab is in front, it works. So how come these documents are different? If newDoc is the wrong one, how come assigning a location does anything?
Although I can get it to work now, I don't particularly like the solution of getting the document by bringing the tab to the front and then grabbing the window.content document, that feels like a hack and depends on timing.
I just found a nifty jQuery method that might accomplish this: http://api.jquery.com/html/#html2
I created a page with a button that calls the script:
$("html").html("<span>Hello <b>World</b></span>");
This replaces the entire page DOM.

Categories