Monthly Archives: September 2014

[RESOLVED]jQuery jstree

Hi

I’ve got this working beautifully…in my visual studio.

I’m really struggling to show my image…how do the image thing work with the url to upload on this forum?

Anycase, in my iis I don’t see the folder image and all is showing. I want to show the images but I can’t even seem to upload those. Yuck.

Please help.

 

Thanks

Hi sunettew1,

Did you give proper and exact path locations of your image?

Are you getting a frame with the correct tool tip in your rendered image or just a blank?

Hi

Okay, let me try and upload the images:

How do I get the upload working to show what is happening with my jstree?

I tried putting this in the image url: file:///C:/vsjstree.JPG

file:///C:/iisjstree.JPG

Not working…ugg..please help so that I can show my issue I’m having with jstree.

Hi,

Can you share some code and did you try to debug your jquery using F12 button and breakpoints?

I can. It works perfectly in visual studio. Get the same tree in iis but without the nice graphics. Meaning there is no folder icon to click to expand the nodes. Its all open. Thats why I want to upload the pics to show the difference. The formatting is
missing in iis but all the tree structure is there. Just all expanded looking linke hyperlinks.

My Index view:

<td id="TreeView">
               <%=Html.Action("ObjectTree", "tbObject", null)%>
 </td>

My ObjectTree:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<HCCWebTemplate.Models.tbObjectTree>>" %>

    <link href="../../Scripts/jstree/themes/default/style.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jstree/libs/jquery.js" type="text/javascript"></script>
    <script src="../../Scripts/jstree/jstree.js" type="text/javascript"></script>


    <div id="divtree">
  
        <%foreach (var item in Model) %>
<%{ %>
  <ul id="tree">
    <%  if (item != null) %>
    <%   { %>
    <li><a href="#" class="usr">
        <%: item.ObjectName %> 
        <label style="display:none"><%: item.ObjectGuid %></label>
         </a> 
        <% if (item.tbObjectTrees.Count > 0)%>
        <%{ %>
            <%=Html.Action("ObjectTreeChildren", "tbObject", new {myObjectList = item })%>
        <%} %>
    </li>
    <%} %>
</ul>
<%} %>

    
    </div>
    <script type="text/javascript">
        $(function () {
            $("#divtree").jstree();
        });
    </script>

My ObjectTreeChildren:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<HCCWebTemplate.Models.tbObjectTree>" %>

    <%foreach (var item in Model.tbObjectTrees) %>
<%{ %>
<ul>
    <%  if (item != null) %>
    <%   { %>
    <li ><a href="#" class="usr">
        <%: item.ObjectName%>
        <label style="display:none"><%: item.ObjectGuid %></label>
        </a>
        <% if (item.tbObjectTrees.Count > 0)%>
        <%{ %>
            <%=Html.Action("ObjectTreeChildren", "tbObject", new { myObjectList = item })%>
        <%} %>
    </li>
    <%} %>
</ul>
<%} %>

My code in my controller:

  /// <summary>
        /// The object tree selection
        /// </summary>
        /// <returns>Returns the object tree for all objects for selection</returns>
        public ActionResult ObjectTree()
        {
            List<tbObjectTree> objectList = new List<tbObjectTree>();
            List<tbObjectTree> myObjectList = new List<tbObjectTree>();

            objectList = ObjectRepository.GetObjectTree();

            //get distinct list to see how many parent root i.e. projects there are
            var getdistinctProject = objectList.Where(x => x.ParentGuid == null).Distinct();

            var project = objectList.Where(x => x.ParentGuid == null).FirstOrDefault();

            if (getdistinctProject.Count() > 1)
            {
                foreach (var item in getdistinctProject)
                {
                    project = objectList.Where(x => x.ObjectGuid == item.ObjectGuid).SingleOrDefault();
                    SetChildren(project, objectList);
                    myObjectList.Add(project);
                }
            }
            else
            {
                 project = objectList.Where(x => x.ParentGuid == null).SingleOrDefault();
                 SetChildren(project, objectList);
                 myObjectList.Add(project);
            }



            return View(myObjectList);
        }

        /// <summary>
        /// The object tree selection
        /// </summary>
        /// <returns>Returns the object tree for all objects for selection</returns>
        [HttpPost]
        public ActionResult ObjectTree(FormCollection frmValues)
        {
            return View(frmValues);
        }

        /// <summary>
        /// Get the children for the object model
        /// </summary>
        /// <returns>Returns the childrens view for the projects</returns>
        public ActionResult ObjectTreeChildren(tbObjectTree myObjectList)
        {
                return View(myObjectList);
        }

        /// <summary>
        /// Set the children nodes for the tree view
        /// </summary>
        /// <param name="model">Type tbObjectTree</param>
        /// <param name="objectList">the Objectlist of the selected object tree</param>
        private void SetChildren(tbObjectTree model, List<tbObjectTree> objectList)
        {
            var childs = objectList.Where(x => x.ParentGuid == model.ObjectGuid).ToList();

            if (childs.Count > 0)
            {
                foreach (var child in childs)
                {
                    SetChildren(child, objectList);
                    model.tbObjectTrees.Add(child);
                }
            }
        }

Still not getting the images inserted here – the image insert / edit doesn’t work!!! Unless there is a trick to the whole url thing that I don’t know about…

 

 

Hi sunettew1,

Thank you post the issue to our forum.

Based on your description, I see you want to use the jquery plugin "jstree". And the icon of tree nodes not show proper.

For this issue, I think you should make sure the icons exist in your application folder, then the nodes image tag can refer to it

correctly. Check your "jstree" folder or download the complete plugin files again.

Best Regards,

Fuxiang

[RESOLVED]jquery.multiselect and jquery.selectbox conflicted

In my view, both jquery used.

Problem : So because of that multiselect selectbox not closed when clicking outside it

I also find solution for that from following link but i dont want to change jquery.selectbox-0.2.js 

because its used widely in application.

http://stackoverflow.com/questions/24197150/conflict-between-jquery-multiselect-and-jquery-selectbox

So please provide me any suggestion

Have you considered using any other selectboxes? 

There are
tons of different plug-ins similar to this
and that you could likely get to function as your current one does. One thing to consider is simply the version number of your current plug-in (0.2). A version that low (considering that a proper release is usually
1.0) is likely very early in it’s development and what you could be encountering might simply be a bug.

Have you checked to see if any newer versions of the same plug-in are available? It’s likely that the syntax wouldn’t change extensively and it might fix many of the issues that you are having.

If that isn’t an option, then you might consider posting the code (as well as where you downloaded the plug-in and we could try to help you troubleshoot the issue).

[RESOLVED]Jquery drop accept multiple classes

Hi, 

how to  drag elements from  multiple css classes to one drop area, so in the drop function there will be an action based on the accepted class.

any help please?

There are a variety of jQuery-based "drag and drop" plug-ins out there.

I would recommend looking through those and reviewing over the various syntax and functionality available for each. Generally speaking, the requirements you have provided above are fairly common and should be found in just about every plug-in of this nature.

Consider the following example which uses the
jQueryUI Library
:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dropping Example</title>
    <!-- jQuery UI References -->
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script type='text/javascript'>
      $(function() {
        // Set all classes "red","blue" and "green" as draggable
        $(".red,.blue,.green").draggable();
        // Define your "drop" element as a place to allow drops
        $("#drop").droppable({
          // Wire up a drop function that will be triggered when an element is dropped
          drop: function( event, ui ) {
            // Trigger your event here
            alert("Dropped!");
          }
        });
      });
    </script>
</head>
<body>
    <!-- Your Draggable elements -->
    <div class='red draggable'></div>
    <div class='blue draggable'></div>
    <div class='green draggable'></div>
    <!-- Your Drop area -->
    <div id="drop">
      <p>Drag and Drop Here</p>
    </div>
</body>
</html>

You can see a complete working example here.

[RESOLVED]Trouble closing FancyBox and causing a postback on underlying user control

Background: I have a web solution I am developing that shows and hides user controls in panels. A user clicks a button on a main form, and then the button div is hidden and panels are shown with dynamically loaded user controls in them to present various
functions of the program. Within these user controls, I sometimes need to get further information, which I am using FancyBox to do.

Problem:

In the past, in my FancyBox afterClose event, I used the following:

afterClose: function () {
        window.location.href = 'Default.aspx';
}

However, this causes my default page to completely reload, re-showing the button div and removing my user control – obviously not what I want. So, I’ve tried various things I’ve found online to try to get a postback or page reload that doesn’t kill my user
control. Another option I tried is:

afterClose: function () {
       parent.location.reload(true);
}

However, this option causes Firefox (only browser I’ve tried right now) to pop up a warning message. If I select "Resend" to allow it to proceed, the FancyBox pops right back up. I obviously don’t want the warning message, and I’m not sure why the FancyBox
comes back up.

The other options I’ve tried just don’t work. I may be doing something wrong with these, not sure:

afterClose: function () {
        __doPostBack('BodyContent', '');
}

afterClose: function () {
       window.opener.location.reload(); return; 
}

I am looking for help on what to do to cause a postback on my user control after the FancyBox closes so that Page_Load is called again in the user control. I set a session variable in my FancyBox which I look for In my user control Page_Load to know that
I have returned from a FancyBox and to return information from it.

Thank you for your time and help with this.

Also, for further information, this FancyBox is showing another page in an iframe.

$('#fancy_link').fancybox({
    'title': 'Test',
    'parent': 'form:first',
    'type': 'iframe',
    'width': '100%',
    'height': '100%',
    'hideOnOverlayClick': false,
    'hideOnContentClick': false,
    'overlayOpacity': 0.7,
    'enableEscapeButton': false,
    'afterClose': function () {
<<< problem getting postback on parent page - what goes here??? >>>
    }
});

M-Clark

afterClose: function () {
        window.location.href = 'Default.aspx';
}

Hi M-Clark,

Thanks for your post.

According to your description and code provided, I see you want cause a postback when the event handler “afterClose” occurs.

For this issue, I think you can try to use LinkButton server control as a trick.

# Adding a LinkButton into your page:

<asp:LinkButton ID="CausePostBack" runat="server"></asp:LinkButton>

Then change your code like below:

afterClose: function () {
       document.getElementById("CausePostBack").click();
}

Hope this helps, thanks.

Best Regards!

THANK YOU!!!!!!!!!!!!!!!!!!!!

The solution you suggested didn’t work exactly, but it spurred me to be able to search and find the right way to get it to work for me.

Just FYI for others, here’s what was added to get it to work:

1) Created a new ASP button:

            <asp:Button ID="CausePostBack" OnClick="CausePostBack_Click" ClientIDMode="Static" runat="server" style="visibility: hidden; display: none;" Text="Hidden - used to update after FancyBox close" />

2) Created the code behind for the button:

    Protected Sub CausePostBack_Click(sender As Object, e As EventArgs) Handles CausePostBack.Click
          << Code that I want to do after return from FancyBox here >>
    End Sub

3) Changed the FancyBox afterClose to this:

'afterClose': function () {
     window.parent.$('#CausePostBack').click();

And now it works great! I had to make the button with a static ClientIDMode because I couldn’t figure out how to do it by referencing the parent control ID. I’d like to not have to declare the button client ID as static, but this will work for now until
I can get that sorted out.

Thank you again!

Append a larger data to view after ajax post without freezing the browser.

How can I append a partial view after a ajax post? The partial view content size is 50-60 kb. So I,m using asynchronous ajax post and append that data. Now each content has only lesser than 10kb. But now I have append multiple data after every ajax success,
so browser has been hanged some interval of time(5-8 seconds) . How can I previent this?

Can any one one give suggestion this?

Hi LTAravindh,

please check that if you have set your ajax request  async as true. if it is set to false ,the browser will freeze until a response is received.

You can try the code below:

$.ajaxSetup({
    async: true
});

$.post(url,data,success,datatype);

Or you can try use $.ajax() equivalent:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType,
  async:true
});

Best Regards,

Kevin Shen.

That depends on the RAM size of the machine the website is being viewed on, since a lot of network requests hang the browser or the computer itself. You need to make sure, that you pass each of the data, one after the other. You can send the requests and
returns true if the previous data was recieved and processed. Once true, send the next amount of data. 

This error is a user related issue, and the machine related issue. You can minimize it, using lesser executions per seconds, if you’re uploading data, don’t download. If you’re going through algorithm, pause remaining threads. Using the Threadings of the
.NET Framework would be a great thing to work around with, but that is on the server side. 

Try using a time interval of the JS framework and send data after 1 second the ajax returns true. 

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setInterval

LTAravindh

I,m using asynchronous ajax post and append that data.

What do you mean by "append that data"? Are you generating DOM elements (table rows or divs) dynamically from JSON or similar? You might find that returning an HTML snippet instead of data and using jQuery’s load method is more efficient.

Hi Kevin,

I tried as per your suggestion. At the time of ajax post browser has not been hang. Browser will be hang when I append DOM element.

Hi Mikesdotnetting,

In my question data represented as a DOM element.

Hi LTAravindh,

I am not quite sure how much data you append to your dom element.

If you did that ,the browser will hang .

I suggest that you can dynamically create the data /table in the server side, and append the  table into the page.

Best Regards,
Kevin Shen.

[RESOLVED]JQuery Arrays from Database Tables

I am trying to load data from the database into JQuery arrays. So basically I need to get the information for the logged in user and store it in JQuery arrays so I can use them anytime I want during the user’s session and not call the database again and
again.

For ex I want to get all the data from a table called members for the logged in user. I want to create a JQuery array members that will hold the data in key/value pair. So if there is a field called member_name then I should be able to get it from the array
using something like members[member_name]

I have no idea how or where to begin. Can someone guide me in the right direction and show me some examples to accomplish this?

I have not used JQuery/JSon before but I want to do this in JQuery so I can learn it.

Hi devilsgrave,

Did you use MVC or WebForms?

Basic workflow which you can follow:

1. Create Controler Action which will retrieve JSON string. Before retreive JSON string you have to serialize C# object into JSON. See:

http://stackoverflow.com/questions/6201529/turn-c-sharp-object-into-a-json-string-in-net-4

http://msdn.microsoft.com/en-us/library/bb412179%28v=vs.110%29.aspx

http://matijabozicevic.com/blog/csharp-net-development/csharp-serialize-object-to-json-format-using-javascriptserialization

Also you can review NewtonJSON Nuget Packages.

2. Call controler action from AJAX. See following:

http://stackoverflow.com/questions/14049817/in-asp-net-mvc-all-possible-ways-to-call-controller-action-method-from-a-razor

http://stackoverflow.com/questions/6119098/how-to-call-controller-actions-using-jquery-in-asp-net-mvc

If you use ASP.NET web form app consider following link to call code behind method from JQuery:

http://www.aspsnippets.com/Articles/Call-ASPNet-Page-Method-using-jQuery-AJAX-Example.aspx

Thanks

Chat box template with attachment in jquery

I use jquery v1.9.1 and jquery-ui v1.10.1 in my project.I want to use chatbox template in project .My project is ‘ticketing system’ and I want use chatbox for reply with attachment.

like this:

sample

Hi zsh64,

Do you want to develop a chat application?

If so, please refer to:

ASP.NET AJAX web chat application

How to develop a web chat application by using ASP.NET AJAX

Chat Application in ASP.NET Using AJAX (Pop-up Windows)

If you want to implement a chat box with Jquery,
jQuery for the ASP.NET Developer forum
 would be the better forum.

Regards,

George.