FSD PPT.pptx sfdb sfcdevc funcrv cf. Aaaf
SudeepNM
12 views
16 slides
Aug 03, 2024
Slide 1 of 16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
About This Presentation
Fdb. B ddgv crr
Slide Content
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING PRESENTATION ON MODULE 5 : when plan A doesn't work PRESENTING TO: Mr. DayanandaBhovi Assistant Prof. CSE, GMIT PRESENTED BY: K Naveen Kumar 4GM22CS401 Karthik N R 4GM22CS402 Nandan S 4GM22CS405 Krishna P K 4GM22CS404 Kotresh V D 4GM22CS403 Gurukiran A M 4GM21CS037 Chethan T M 4GM21CS024
WHEN PLAN A DOESN'T WORK Interest-based negotiation emphasizes focusing on underlying interests rather than fixed positions. Unlike hard negotiation (rigid and competitive) and soft negotiation (flexible but often yielding), interest-based negotiation seeks collaborative, win-win outcomes. By addressing the true needs of both parties, it fosters creative solutions and preserves relationships.
This allows at least four potential ways to get past the obstacle : 1 Resolve the problem and complete the intended solution 2 Work around the bug using the same framework 3 Find another jQuery plugin to handle autocomplete 4 Use a standalone solution, or another library
A FIRST WORKAROUND In interest-based negotiation with the computer, our goal is to save data. While the ideal method is an xmlhttprequest , an alternative is submitting data via an iframe with `display: none ;`. This workaround aligns with our interest in saving data without ruling out viable options. Using jquery UI, we can trigger form submission when an autocomplete value is selected, offering both visibility and input flexibility. Our revised code is as follows in static/style.css: bitbucket, #bitbucket { display: none; }
We define similar, but not identical, handling for the e-mail: <p> Email: <strong> {% for email in emails %} <a id=" EntityEmail_email _{{ email.id }}" class=" edit_rightclick " href ="mailto:{{ email.email }}"> {{ email.email }} </a> {% if not forloop.last %}, {% endif %} {% endfor %} <span class="edit" id=" EntityEmail_new _{{ entity.id }}"> Click to add email. </span> </strong> </p>
BOILERPLATE CODE FROM JQUERY UI DOCUMENTATION It is commonplace when using software to include adding boilerplate code. Here is an example. We insert boilerplate code from the documentation pages for jQuery UI at http://jqueryui.com/demos/autocomplete/#combobox : Key Points HTML Structure : <select> element with options. jQuery UI Integration : Include jQuery and jQuery UI libraries. Use a custom widget to enhance the select element. Combobox Widget : Hide the original select element. Create an input element with autocomplete functionality. Add a button to show all options. Autocomplete Functionality : Filter options based on user input. Highlight matched text. Update the select element value on change.
CODE <!DOCTYPE html> <html lang=" en "> <head> <title>jQuery UI Example</title> <link rel ="stylesheet" href ="https://code.jquery.com/ ui /1.12.1/themes/base/jquery-ui.css"> <script src ="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src ="https://code.jquery.com/ ui /1.12.1/jquery-ui.min.js"></script> </head> <body> <h1>jQuery UI Example</h1> <p>Date: <input type="text" id=" datepicker "></p> <script> $(function() { $("# datepicker "). datepicker (); }); </script> </body> </html>
TURNING ON AJAX BEHAVIOR (OR TRYING TO) To enable AJAX behavior in a jQuery UI combobox , modify the `source` option of the autocomplete to fetch data from a server dynamically. Use an `$.ajax` call within the `source` function to request data based on user input. Parse the returned JSON data to populate the autocomplete options. This approach allows the combobox to dynamically display items from a server, ensuring up-to-date and relevant data based on user input.
The user now has a choice between the select and an autocomplete box. $(function() { $(".autocomplete"). combobox (); $(".autocomplete").toggle(); Then see how this bend in the road can be addressed. /* $(".autocomplete").autocomplete({select: update_autocomplete }); $(".autocomplete").bind({" autocompleteselect ": update_autocomplete }); $(".autocomplete").bind({" autocompletechange ": update_autocomplete }); */ }); Now let us turn our attention to the server side.
CODE ON THE SERVER SIDE To enable AJAX behavior with a jQuery UI combobox , you need to create a view that handles AJAX requests and returns data in JSON format. Here's a simple Django example: views.py from django.http import JsonResponse from .models import YourModel # Replace with your actual model def get_items (request): if request.is_ajax (): query = request.GET.get ('term', '') items = YourModel.objects.filter (name__ icontains =query) results = [{'id': item.id, 'label': item.name, 'value': item.name} for item in items] return JsonResponse (results, safe=False)
urls.py from django.urls import path from . import views urlpatterns = [ path('get-items/', views.get_items , name=' get_items '), ] Create a view that handles AJAX requests and returns a JSON response containing filtered data. Update the combobox's source option in the jQuery UI autocomplete widget to use AJAX for fetching data. Parse the returned JSON data to populate the combobox dynamically. Set up a URL that maps to the view handling the AJAX requests to ensure seamless data retrieval
REFINING OUR SOLUTION FURTHER This approach works, but there is room to further clean it up. First of all, we can set things up in the base template so that, for development, Django's informative error pages are displayed; we also set form submissions to POST by default. We make a target div for the notifications: {% block body_site_announcements %} {% endblock body_site_announcements %} {% block body_notifications %} <div id="notifications"></div> {% endblock body_notifications %}
The notification is only dismissed by explicitly pressing a button, but we will stop here.. <Script language=" javascript " type="text/ javascript "> Function send_notification (message) { $("#Notifications").Html("<p>" + message + "</p>"); Settimeout ("$('#notifications').Show('slow').Delay(" + (5000 + message.Length * 2) + ").Hide('slow');", 0); } Our notifications area has several different messages, not all of which need to be visually labeled as errors, so we move from a red-based styling to one that is silverand grey in static/ css / style.Css : #Notifications { Background-color: #c0c0c0; Border: 3px solid #808080; Display: none; Padding: 20px; }
We call, on page load, $. Ajaxsetup () to specify a default error handler, and also Specify form submission via POST. This will need to be changed for deployment, but Together this means that a valuable django error page is displayed as a notification Whenever an ajax error occurs, which is a kind of "best of both worlds" solution For development. $(function() { $. ajaxSetup ( { error: function( XMLHttpRequest , textStatus , errorThrown ) { send_notification ( XMLHttpRequest.responseText ); }, type: "POST", }); }); </script>
SUMMARY Again, we have moved in two different dimensions in this chapter. The first dimension is the obvious one: what we need on the client-side and server-side to get autocomplete working with jquery UI. The second dimension has to do with creative problem solving when something goes wrong. We have covered the nuts and bolts of jquery ui's autocomplete, and where plugins can be obtained. We continue with the concept of "progressive enhancement," and a concrete example. We looked at what tools we have on the server-side and client-side to do this. We have continued to get our hands dirty with django templating to build the desired pages
THANK YOU Thank you for taking the time to learn about our Metaverse Project. If you have any questions or are interested in getting involved, please don't hesitate to contact us. Together, let's build the future of digital interaction.
Tags
Categories
EducationDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 12
- Slides 16
- Age 487 days
Related Slideshows
11
TLE-9-Prepare-Salad-and-Dressing.pptxkkk
MaAngelicaCanceran
32 views
12
LESSON 1 ABOUT MEDIA AND INFORMATION.pptx
JojitGueta
26 views
60
GRADE-8-AQUACULTURE-WEEKQ1.pdfdfawgwyrsewru
MaAngelicaCanceran
41 views
26
Feelings PP Game FOR CHILDREN IN ELEMENTARY SCHOOL.pptx
KaistaGlow
40 views
![Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx](https://slidepub.com/thumb/5828/284015828.jpg)
54
Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx
acecamero20
25 views
7
Jeopardy_Figures_of_Speech.pptxvdsvdsvsdvsd
acecamero20
25 views